/* =========================================================
   Complices — Dark Theme
   ========================================================= */
:root {
  --color-bg: #10131a;
  --color-bg-card: #181c24;
  --color-night: #111111;
  --color-primary: #7B1634;   /* Claret */
  --color-secondary: #7F130F; /* OU Crimson */
  --color-text: #F5D7BE;      /* Desert Sand */
  --color-copper: #AD7B43;
  --color-purple: #7D5EA7;
  --color-purple-dark: #624773;
  --color-pink: #F27FAB;
  --color-pink-light: #F1ABBF;
  --color-gray: #6c6d6f;

  --font-display: 'Biryani', sans-serif;
  --font-body: 'ABeeZee', sans-serif;
  --font-quote: 'Trirong', serif;

  --radius: 6px;
  --container: 1280px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  line-height: 1.6;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
p { color: var(--color-gray); }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 900;
  margin: 0 0 .5em;
  line-height: 1.15;
}
ul { list-style: none; margin: 0; padding: 0; }
.section-title { font-size: 2rem; text-align: center; margin-bottom: 2rem; }

/*
 * Botones — 2 estados (lleno / línea) que se invierten entre sí en :hover,
 * y 2 tamaños (grande por defecto, --sm compacto), según buttons.png.
 * --btn-color define el color de acento; --btn-ink el color del texto sobre
 * el relleno. Los modificadores de color solo cambian --btn-color.
 */
.btn {
  --btn-color: var(--color-primary);
  --btn-ink: var(--color-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  /* padding vertical asimétrico: el texto en mayúsculas (sin descendentes) dentro
     del em-square de la fuente visualmente "flota" hacia arriba aunque line-height
     sea 1, porque el propio glifo no ocupa el em-square de forma simétrica.
     Se compensa con un poco más de padding abajo que arriba. */
  padding: 1.28em 2.75em 1.36em;
  border-radius: 999px;
  border: 2px solid transparent;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .8rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.btn--sm { padding: .87em 2.1em .93em; font-size: .72rem; letter-spacing: .14em; }

/* Lleno -> en hover pasa a línea */
.btn--primary {
  background: var(--btn-color);
  border-color: var(--btn-color);
  color: var(--btn-ink);
}
.btn--primary:hover {
  background: transparent;
  border-color: var(--btn-color);
  color: var(--color-text);
}

/* Línea -> en hover pasa a lleno */
.btn--outline {
  --btn-color: var(--color-pink);
  background: transparent;
  border-color: var(--btn-color);
  color: var(--btn-color);
}
.btn--outline:hover {
  background: var(--btn-color);
  color: var(--btn-ink);
}

.btn--accent-purple { --btn-color: var(--color-purple); }
.btn--accent-pink { --btn-color: var(--color-pink); }
.btn--accent-copper { --btn-color: var(--color-copper); --btn-ink: var(--color-night); }

.badge {
  display: inline-block;
  background: var(--color-bg-card);
  border: 1px solid var(--color-copper);
  color: var(--color-copper);
  font-size: .7rem;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: .45em .8em .35em;
  border-radius: 999px;
  margin: 0 .3em .3em 0;
}
.badge--pink { border-color: var(--color-pink); color: var(--color-pink-light); }
.badge-list--services .badge--service {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  background: transparent;
  border: none;
  color: var(--color-text);
  text-transform: none;
  letter-spacing: normal;
  font-size: .85rem;
  padding: .3em 0;
  margin: 0 1.2em .5em 0;
}
.badge-list--services .badge__check { color: var(--color-pink); flex-shrink: 0; }
.badge-list { display: flex; flex-wrap: wrap; }

/* ---------- Stars ---------- */
.complices-stars { display: inline-flex; gap: 2px; }
.complices-stars .star { color: var(--color-copper); opacity: .3; font-size: 1rem; }
.complices-stars .star--full,
.complices-stars .star--half { opacity: 1; color: var(--color-pink); }

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: transparent;
  transition: background .3s ease;
}
.site-header.is-scrolled,
.site-header.is-open { background: rgba(16,19,26,.97); box-shadow: 0 2px 12px rgba(0,0,0,.4); }
.site-header__inner {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 2rem;
  padding: 1.75rem 1.5rem;
}
.site-header__logo-text { font-family: var(--font-display); font-size: 1.5rem; color: var(--color-pink); }
.site-header__logo {
  position: absolute;
  left: 50px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
}
.site-header__logo img { height: 55px; width: auto; }
.site-header__logo-mono {
  display: none;
  position: absolute; inset: 0;
  height: 55px; width: 100%;
  background-color: #f5d7be;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: left center; mask-position: left center;
  /* Es puramente decorativo (encima del <a> real del logo, que queda
     invisible pero sigue ahí) — sin esto, al estar posicionado encima
     intercepta el clic y el link a portada deja de funcionar. */
  pointer-events: none;
}
/* Cabecera transparente (arriba, sin abrir el menú móvil): logo en un solo
   color. Con fondo (scrolleada o menú móvil abierto): logo normal a color. */
.site-header:not(.is-scrolled):not(.is-open) .site-header__logo img { opacity: 0; }
.site-header:not(.is-scrolled):not(.is-open) .site-header__logo-mono { display: block; }
.site-header__nav { grid-column: 2; justify-self: center; }
.site-header__contact { grid-column: 3; justify-self: end; }
.site-header__toggle { grid-column: 3; justify-self: end; }
.primary-menu { display: flex; align-items: center; gap: 1.96rem; flex-wrap: wrap; }
.primary-menu li { display: flex; align-items: center; gap: 1.96rem; }
.primary-menu li:not(:last-child)::after { content: '•'; color: var(--color-text); }
.primary-menu a {
  display: inline-block;
  padding: .7em .35em;
  margin: -.7em -.35em;
  text-transform: uppercase;
  font-size: .85rem;
  letter-spacing: .06em;
  transition: color .3s ease, transform .35s cubic-bezier(.34,1.56,.64,1), text-shadow .3s ease;
}
.primary-menu a:hover {
  color: var(--color-pink);
  transform: translateY(-4px) scale(1.1);
  text-shadow: 0 0 8px rgba(242,127,171,.85), 0 0 20px rgba(242,127,171,.5);
}
.site-header__contact { display: flex; flex-direction: column; align-items: flex-end; gap: .2rem; }
.site-header__phone { font-family: var(--font-display); font-weight: 700; color: var(--color-text); }
.site-header__schedule {
  background: var(--color-secondary);
  color: var(--color-text);
  font-size: .7rem;
  padding: .2em .8em;
  border-radius: 999px;
  text-transform: uppercase;
}
.site-header__cta {
  position: absolute;
  right: 50px;
  top: 50%;
  transform: translateY(-50%);
}
.site-header__toggle { display: none; background: none; border: 0; cursor: pointer; }
.site-header__toggle span { display: block; width: 24px; height: 2px; background: var(--color-text); margin: 5px 0; }

/* ---------- Hero home ---------- */
.hero-home {
  position: relative;
  min-height: 90vh;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  text-align: left;
  padding: 2rem max(1.5rem, calc((100% - var(--container)) / 2 + 1.5rem)) 5rem;
  background: linear-gradient(160deg, var(--color-night), var(--color-bg-card));
}
.hero-home__overlay { position: absolute; inset: 0; z-index: 2; background: linear-gradient(90deg, rgba(24,28,36,.95) 0%, rgba(16,19,26,.9) 33%, rgba(98,71,115,.25) 100%); }
.hero-home__content { position: relative; z-index: 1; max-width: 640px; padding: 2rem; }
.hero-home__content h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); color: var(--color-text); }
.hero-home__content p { font-size: 1.1rem; margin-bottom: 2rem; color: var(--color-text); }
.hero-home__content .btn { box-shadow: 0 8px 24px rgba(0,0,0,.45); }

/* ---------- Hero home: carrusel de "Portada" ---------- */
.hero-home--slider { overflow: hidden; }
.hero-slides { position: absolute; inset: 0; z-index: 0; }
.hero-slide {
  position: absolute; inset: 0;
  overflow: hidden;
  background-size: cover; background-position: center;
  filter: contrast(1.3) saturate(1.15);
  z-index: 1;
  /* El cruce real entre foto y foto: la que entra sube de opacidad mientras
     la que sale baja, ambas al mismo tiempo — un crossfade de verdad, no un
     corte seco. El mosaico (abajo) es un efecto decorativo que corre EN
     PARALELO sobre esta transición, no el mecanismo que la reemplaza.
     El zoom (Ken Burns) usa `transition`, no `animation`: así el regreso a
     escala 1 al desactivarse también queda animado en vez de resetearse de
     golpe (eso era lo que causaba el salto antes). */
  opacity: 0;
  transform: scale(1);
  transition: opacity 1.5s ease, transform 8.5s ease-out;
}
.hero-slide.is-active { opacity: 1; transform: scale(1.04); }

/* Piezas oscuras que se desvanecen en orden aleatorio (retraso fijo por
   posición, calculado en el servidor) mientras la foto ya está cruzando por
   debajo — le da textura de "mosaico armándose" sin depender de recortar la
   imagen en sí ni de tapar/destapar de golpe. */
.hero-slide__mosaic { position: absolute; inset: 0; display: grid; }
.hero-tile {
  display: block;
  background: var(--color-night);
  opacity: 1;
  transition: opacity .8s ease;
}
.hero-slide.is-active .hero-tile {
  opacity: 0;
}
.hero-slide__scrim { display: none; }

.hero-content-slides { position: relative; z-index: 3; width: 100%; }
.hero-content-slide {
  position: absolute; inset: 0;
  display: flex; align-items: flex-end; justify-content: flex-start;
  text-align: left;
  padding: 2rem max(1.5rem, calc((100% - var(--container)) / 2 + 1.5rem)) 5rem;
  pointer-events: none;
}
.hero-content-slide.is-active { pointer-events: auto; }
.hero-home .btn--primary { --btn-color: var(--color-pink); }

.hero-slide__badges { display: flex; flex-wrap: wrap; gap: .6em; margin-bottom: 1rem; }
.hero-slide__badge {
  display: inline-block;
  background: var(--color-copper); color: var(--color-night);
  font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700;
  padding: .4em 1.1em; border-radius: 999px;
}
.hero-slide__badge--vip { background: var(--color-copper); color: var(--color-night); }

/* Coreografía: badge -> título -> descripción -> botón entran en cascada;
   al salir lo hacen en orden inverso (botón primero, badge al final), para
   que se sienta como una salida y no solo la reversa exacta de la entrada. */
.hero-content-slide .hero-slide__badge,
.hero-content-slide .hero-home__content h1,
.hero-content-slide .hero-home__content p {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
}
/* El botón necesita, además de entrar/salir en cascada, conservar la misma
   transición suave de color al pasar el mouse que tienen todos los botones
   del sitio — si solo se declara opacity/transform aquí, esa lista de
   transiciones REEMPLAZA por completo la del .btn base (no se combinan), y
   el hover queda "de corte" en vez de animado. */
.hero-content-slide .hero-home__content .btn {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease, background-color .25s ease, color .25s ease, border-color .25s ease;
}
.hero-content-slide.is-active .hero-slide__badge,
.hero-content-slide.is-active .hero-home__content h1,
.hero-content-slide.is-active .hero-home__content p,
.hero-content-slide.is-active .hero-home__content .btn {
  opacity: 1;
  transform: translateY(0);
}
.hero-content-slide.is-active .hero-slide__badge { transition-delay: .1s; }
.hero-content-slide.is-active .hero-home__content h1 { transition-delay: .25s; }
.hero-content-slide.is-active .hero-home__content p { transition-delay: .4s; }
/* El orden de los delays sigue el orden de las transiciones declaradas en
   .hero-content-slide .hero-home__content .btn: opacity, transform,
   background-color, color, border-color. Las primeras dos (entrada en
   cascada) sí esperan .55s; las de color del hover van en 0s siempre, para
   que el botón responda al instante al pasar el mouse una vez visible. */
.hero-content-slide.is-active .hero-home__content .btn { transition-delay: .55s, .55s, 0s, 0s, 0s; }
.hero-content-slide:not(.is-active) .hero-slide__badge { transition-delay: .45s; }
.hero-content-slide:not(.is-active) .hero-home__content h1 { transition-delay: .3s; }
.hero-content-slide:not(.is-active) .hero-home__content p { transition-delay: .15s; }
.hero-content-slide:not(.is-active) .hero-home__content .btn { transition-delay: 0s; }

/* ---------- Page hero (internal) ---------- */
.page-hero {
  position: relative;
  min-height: 40vh;
  margin-top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-size: cover;
  background-position: center;
  background-color: var(--color-night);
}
.page-hero__overlay { position: absolute; inset: 0; background: rgba(16,19,26,.75); }
.page-hero__content { position: relative; z-index: 1; padding: 6rem 1.5rem 2rem; }
.page-hero__title { font-size: clamp(2rem, 5vw, 3.5rem); color: var(--color-text); }
.complices-breadcrumb { display: flex; justify-content: center; gap: .5rem; flex-wrap: wrap; }
.crumb-pill {
  background: var(--color-pink);
  color: var(--color-night);
  display: inline-block;
  padding: .35em 1em .25em;
  border-radius: 999px;
  font-size: .8rem;
  line-height: 1;
  text-transform: uppercase;
}
.crumb-pill--current { background: var(--color-purple); color: var(--color-text); }

/* ---------- Filter bar ---------- */
.filter-bar { background: var(--color-bg-card); padding: 1.5rem; }
.home-models-band {
  background: var(--color-bg-card);
}
/* Especificidad reforzada (2 clases) para ganarle a la regla compartida
   .models-grid-section, .fresh-section {max-width...} que viene después
   en la hoja de estilos. */
.models-grid-section.home-models-band,
.fresh-section.home-models-band {
  max-width: none;
  margin: 0;
  padding: 0;
}
.home-models-band--dark { background: var(--color-night); }
.home-models-band__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 3rem 1.5rem;
}
.filter-bar__form {
  max-width: var(--container);
  margin: 0 auto;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
/* Estilo base compartido: fallback nativo (sin JS) + trigger del select propio */
.filter-bar__form select,
.comment-form-rating select,
.custom-select__trigger {
  flex: 1;
  width: 100%;
  min-width: 160px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: var(--color-bg-card);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F27FAB' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>");
  background-repeat: no-repeat;
  background-position: right 1.2em center;
  background-size: 14px;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: .9rem;
  text-align: left;
  border: 2px solid var(--color-purple-dark);
  border-radius: 999px;
  padding: .84em 2.6em .84em 1.3em;
  cursor: pointer;
  transition: border-color .2s ease;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.filter-bar__form select:hover,
.filter-bar__form select:focus,
.comment-form-rating select:hover,
.comment-form-rating select:focus,
.custom-select__trigger:hover,
.custom-select.is-open .custom-select__trigger {
  border-color: var(--color-pink);
  outline: none;
}
.filter-bar__form select option {
  background: var(--color-bg-card);
  color: var(--color-text);
  font-family: var(--font-body);
}

.filter-bar__search {
  flex: 1;
  min-width: 160px;
  background-color: var(--color-bg-card);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: .9rem;
  border: 2px solid var(--color-purple-dark);
  border-radius: 999px;
  padding: .84em 1.3em;
  transition: border-color .2s ease;
}
.filter-bar__search::placeholder { color: var(--color-text); opacity: .6; }
.filter-bar__search:hover,
.filter-bar__search:focus {
  border-color: var(--color-pink);
  outline: none;
}

/* ---------- Select propio (JS) ---------- */
.custom-select { position: relative; flex: 1; min-width: 160px; }
.custom-select__native { display: none; }
.custom-select__panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  right: 0;
  margin: 0;
  background: var(--color-bg-card);
  border: 2px solid var(--color-purple-dark);
  border-radius: 16px;
  /* más espacio a la derecha para que el scroll quede metido hacia adentro
     y no se monte sobre la esquina redondeada */
  padding: .5rem 1.73rem .5rem .5rem;
  box-shadow: 0 16px 32px rgba(0,0,0,.5);
  z-index: 60;
  max-height: 260px;
  overflow-y: auto;
  display: none;
  scrollbar-width: thin;
  scrollbar-color: var(--color-purple) transparent;
}
.custom-select.is-open .custom-select__panel { display: block; }

/* Scrollbar del desplegable: sin fondo de pista, solo el thumb y las flechas,
   coloreados con la paleta (Chrome/Edge/Safari). */
.custom-select__panel::-webkit-scrollbar { width: 9px; }
.custom-select__panel::-webkit-scrollbar-track { background: transparent; }
.custom-select__panel::-webkit-scrollbar-thumb {
  background-color: var(--color-purple);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.custom-select__panel::-webkit-scrollbar-thumb:hover { background-color: var(--color-pink); }
.custom-select__panel::-webkit-scrollbar-button,
.custom-select__panel::-webkit-scrollbar-button:single-button,
.custom-select__panel::-webkit-scrollbar-button:vertical:start,
.custom-select__panel::-webkit-scrollbar-button:vertical:end {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}
.custom-select__option {
  padding: .65em 1.1em;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: .9rem;
  color: var(--color-text);
  cursor: pointer;
  transition: color .15s ease;
}
.custom-select__option:hover,
.custom-select__option.is-active {
  background: transparent;
  color: var(--color-pink);
}
.custom-select__option[aria-selected="true"]:not(:hover) {
  color: var(--color-pink);
}

/* ---------- Grid ---------- */
.models-grid-section, .fresh-section, .blog-preview-section, .blog-listing {
  max-width: var(--container);
  margin: 0 auto;
  padding: 3rem 1.5rem;
}
.models-grid, .blog-listing__grid, .blog-preview-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}
.blog-preview-grid { grid-template-columns: repeat(3, 1fr); }
.section-cta { display: block; width: max-content; margin: 2rem auto 0; }

/* Blog: listado con sidebar derecha (la home mantiene su propia tira de posts sin este layout) */
.blog-listing__layout { display: grid; grid-template-columns: 1fr 332px; gap: 2.5rem; align-items: start; }
.blog-listing__main { min-width: 0; }
.blog-listing__grid { grid-template-columns: 1fr; gap: 2rem; }
.blog-listing__sidebar { display: flex; flex-direction: column; gap: 1.5rem; }
/* Post individual: ya viene dentro de .blog-listing__main, que ya limita el ancho —
   se anula el propio max-width/margin-auto de .comments-wrapper para no competir
   con el grid de layout + sidebar. */
.blog-listing__main .comments-wrapper { max-width: none; margin: 0; padding: 2.5rem 0 3rem; }
@media (max-width: 900px) {
  .blog-listing__layout { grid-template-columns: 1fr; }
}

.model-card {
  position: relative;
  background: var(--color-bg);
  border-radius: var(--radius);
  overflow: hidden;
}
.model-card__media { position: relative; display: block; aspect-ratio: 3/4; background: var(--color-night); overflow: hidden; }
.model-card__media img { width: 100%; height: 100%; object-fit: cover; }
.model-card__placeholder { width: 100%; height: 100%; background: linear-gradient(160deg, var(--color-purple-dark), var(--color-night)); }
.model-card__rating { display: inline-flex; margin-bottom: .4em; }
.model-card__badge {
  position: absolute; top: .6em; right: .6em;
  background: var(--color-copper); color: var(--color-night);
  font-size: .7rem; text-transform: uppercase; padding: .2em .6em; border-radius: 4px;
}

/* La info y los parámetros suben juntos, como un solo bloque, montándose
   sobre la foto en hover — SIN cambiar el alto total de la tarjeta.
   --params-h la calcula JS (initModelCardReveal) con la altura real del
   panel de parámetros, para que ambos se muevan exactamente lo mismo. */
.model-card__body {
  position: relative;
  background: var(--color-bg);
  padding: 1rem;
  transition: transform .35s ease;
}
/* Solo en /modelos/ (archivo del CPT), no en el home */
.post-type-archive-modelo .model-card__body,
.post-type-archive-modelo .model-card--featured .model-card__body { background: #181c24; }
.model-card__params {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, #624773, #7d5ea7);
  color: var(--color-text);
  transform: translateY(100%);
  transition: transform .35s ease;
}
.model-card__params-grid { padding: 1rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: .6em 1em; }
.model-card:hover .model-card__body { transform: translateY(calc(-1 * var(--params-h, 0px) - 1px)); }
.model-card:hover .model-card__params { transform: translateY(0); }
.model-card__param-item { display: flex; flex-direction: column; gap: .15em; }
.model-card__param-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; opacity: .75; }
.model-card__param-value { font-size: .85rem; font-weight: 700; }

/* Tarjeta "Destacada": borde rosado sobre toda la tarjeta, solo la foto se ve
   por defecto (a todo el alto de la tarjeta) y la info aparece en hover,
   igual que en el resto de tarjetas. */
.model-card--featured {
  border: 2px solid var(--color-pink);
  display: flex;
  flex-direction: column;
  transition: transform .35s ease;
}
.model-card--featured:hover { transform: scale(1.04); }
.model-card--featured .model-card__media {
  flex: 1 1 auto;
  aspect-ratio: auto;
}
.model-card--featured .model-card__body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--color-bg);
  opacity: 0;
  transition: opacity .3s ease, transform .35s ease;
}
.model-card--featured:hover .model-card__body { opacity: 1; }

.model-card__name { font-size: 1.1rem; margin-bottom: .2em; }
.model-card__age { color: var(--color-copper); font-family: var(--font-body); font-weight: 400; }
.model-card__city { color: #8b8f9a; font-size: .85rem; margin: 0 0 .5em; }

.model-card--upsell { display: flex; align-items: center; justify-content: center; text-align: center; background: linear-gradient(160deg, var(--color-primary), var(--color-purple-dark)); }
.model-card__upsell-inner { padding: 2rem 1.5rem; }
.model-card__upsell-inner h3 { font-size: 1.1rem; color: var(--color-text); }

.pagination { display: flex; justify-content: center; gap: .5rem; margin-top: 2rem; }
.pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 36px; height: 36px; border-radius: 50%;
  background: var(--color-bg-card); color: var(--color-text);
}
.pagination .page-numbers.current { background: var(--color-primary); }

/* ---------- Fresh grid ---------- */
.fresh-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.fresh-grid__item { position: relative; aspect-ratio: 3/4; overflow: hidden; }
.fresh-grid__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.fresh-grid__item:hover img { transform: scale(1.05); }
.fresh-grid__item span {
  position: absolute; bottom: .5em; left: .5em; z-index: 1;
  background: rgba(16,19,26,.7); padding: .2em .6em; border-radius: 4px; font-size: .85rem;
}

/* ---------- Testimonials ---------- */
.testimonial-section { padding: 4rem 1.5rem; text-align: center; }
.testimonial-slider { position: relative; max-width: 560px; margin: 0 auto; }
.testimonial-slide { display: none; }
.testimonial-slide.is-active { display: block; }
.testimonial-slide__avatar { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; margin: 0 auto 1rem; }
.testimonial-slide blockquote { font-family: var(--font-quote); font-style: italic; font-size: 1.2rem; margin: 0 0 1rem; }
.testimonial-slide cite { display: block; margin-top: .5rem; color: var(--color-copper); font-style: normal; }
.testimonial-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: var(--color-pink); font-size: 1.5rem; cursor: pointer;
}
.testimonial-nav--prev { left: -2rem; }
.testimonial-nav--next { right: -2rem; }

/* ---------- Ad banner ---------- */
.ad-banner { max-width: var(--container); margin: 0 auto 3rem; padding: 0 1.5rem; }
.ad-banner__link {
  display: flex; align-items: center; justify-content: center; gap: 1rem;
  background: var(--color-bg-card); border: 1px dashed var(--color-copper);
  border-radius: var(--radius); padding: 1.5rem; text-align: center;
}

/* ---------- Blog cards ---------- */
.blog-card { background: var(--color-bg-card); border-radius: var(--radius); overflow: hidden; }
.blog-card__media { position: relative; display: block; aspect-ratio: 16/10; overflow: hidden; }
.blog-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.blog-card__media:hover img { transform: scale(1.06); }
.blog-card__date {
  position: absolute; top: .8em; left: .8em;
  background: var(--color-pink); color: var(--color-night);
  padding: .3em .8em; border-radius: 4px; font-size: .8rem; font-weight: 700;
}
.blog-card__body { padding: 1.2rem; }
.blog-card__title { font-size: 1.2rem; margin-bottom: .5rem; }
.blog-card__title a { transition: color .25s ease; }
.blog-card__title a:hover { color: var(--color-pink); }
.blog-card__excerpt { font-size: .9rem; color: #c3c6cf; margin-bottom: 1rem; }
.blog-card__meta { display: flex; gap: 1rem; font-size: .8rem; color: #8b8f9a; align-items: center; }
.blog-card__meta img { border-radius: 50%; vertical-align: middle; margin-right: .3em; }
/* El avatar es <img>, que por el reset global (img{display:block}) se caía a
   su propia línea en vez de quedar junto al nombre — se fuerza fila con
   flex para que la foto quede a la izquierda y el nombre centrado a su lado. */
.blog-card__meta .meta-author { display: flex; align-items: center; gap: .5em; }
.blog-card__meta .meta-author img { margin-right: 0; }

/* Variante de tarjeta solo para el listado del blog (home.php) — la tira de
   posts del home usa la tarjeta original de arriba, sin tocar. */
.blog-card--v2 { background: transparent; overflow: visible; }
.blog-card--v2 .blog-card__media { border-radius: var(--radius); aspect-ratio: 16/9; }
.blog-card--v2 .blog-card__body {
  width: 80%;
  margin: -20% auto 0;
  position: relative;
  background: var(--color-bg-card);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius);
  padding: 2.5rem;
  box-shadow: 0 12px 30px rgba(0,0,0,.4);
}
.blog-card--v2 .blog-card__date-badge {
  display: inline-block;
  background: var(--color-pink); color: var(--color-night);
  padding: .3em .9em; border-radius: 4px; font-size: .8rem; font-weight: 700;
  margin-bottom: 1rem;
}
.blog-card--v2 .blog-card__meta { flex-wrap: wrap; }
.blog-card--v2 .blog-card__meta span { display: flex; align-items: center; gap: .4em; }
.blog-card--v2 .blog-card__meta svg { flex-shrink: 0; }
.blog-card--v2 .blog-card__meta a { color: inherit; }
.blog-card--v2 .blog-card__meta a:hover { color: var(--color-pink); }

/* ---------- Model action bar ---------- */
.model-action-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  background: transparent; padding: 1rem 1.5rem;
  max-width: var(--container); margin: 2rem auto 0;
}
.model-action-bar__name { font-family: var(--font-display); font-size: 1.3rem; display: flex; align-items: center; gap: .75rem; }
.model-action-bar__phone {
  font-weight: 700;
  color: var(--color-copper);
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: .5em;
}
.model-action-bar__whatsapp-icon { color: var(--color-pink); flex-shrink: 0; width: 36px; height: 36px; }
.model-action-bar__name .complices-stars .star { font-size: 2rem; }

/* ---------- Model profile ---------- */
.model-profile {
  max-width: var(--container); margin: 0 auto; padding: 3rem 1.5rem;
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 2rem;
}
.model-profile__video video, .model-profile__video iframe { width: 100%; aspect-ratio: 16/9; border-radius: var(--radius); }
.model-profile__hero-image { display: block; }
.model-profile__hero-image img { display: block; width: 100%; height: auto; border-radius: var(--radius); }
.model-profile__gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: .5rem; margin: 1rem 0; }
.model-profile__gallery img { aspect-ratio: 1; object-fit: cover; border-radius: 4px; }
.model-profile__gallery .gallery-thumb { display: block; border-radius: 4px; outline: 2px solid transparent; outline-offset: 2px; transition: outline-color .15s ease; cursor: pointer; }
.model-profile__gallery .gallery-thumb:hover,
.model-profile__gallery .gallery-thumb.is-active { outline-color: var(--color-pink); }
.model-profile__contacts { background: transparent; padding: 0; margin-top: 1.5rem; }
.model-profile__contacts h3 { padding-bottom: .6em; border-bottom: 1px solid rgba(255,255,255,.1); }
.model-profile__contacts ul li { padding: .6em 0; border-bottom: 1px solid rgba(255,255,255,.1); }
.model-profile__whatsapp-icon { display: inline-flex; margin-top: 1rem; color: var(--color-pink); transition: color .2s ease; }
.model-profile__whatsapp-icon:hover { color: var(--color-text); }

.profile-box {
  background: var(--color-bg-card);
  border: 1px solid rgba(173,123,67,.25);
  border-radius: var(--radius);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}
.profile-params-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 1.5rem; }
.profile-params-grid__item {
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  padding: .4em 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.profile-params-grid__item .param-label { color: var(--color-text); }
.profile-params-grid__item .param-value { color: var(--color-copper); text-align: right; }

.profile-languages { display: flex; flex-direction: column; gap: 1rem; }
.lang-item__header { display: flex; justify-content: space-between; font-size: .85rem; margin-bottom: .4em; }
.lang-item__name { color: var(--color-text); }
.lang-item__percent { color: var(--color-copper); font-weight: 700; }
.lang-item__track { width: 100%; height: 8px; background: var(--color-bg); border-radius: 999px; overflow: hidden; }
.lang-item__fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--color-purple), var(--color-pink));
}
@media (max-width: 480px) {
  .profile-params-grid { grid-template-columns: 1fr; }
}

.profile-rates-list { display: flex; flex-direction: column; }
.profile-rates-list__item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: .6em 0;
  border-bottom: 1px dashed rgba(255,255,255,.1);
}
.profile-rates-list__item:last-child { border-bottom: none; }
.profile-rates-list__item .rate-concept { color: var(--color-text); }
.profile-rates-list__item .rate-price { color: var(--color-copper); font-weight: 700; white-space: nowrap; }

/* ---------- Comments / reviews ---------- */
.comments-area, .comments-wrapper { max-width: var(--container); margin: 0 auto; padding: 0 1.5rem 3rem; }

.reviews-tabs__nav {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.reviews-tabs__btn {
  background: none;
  border: none;
  padding: .75em 0;
  margin-bottom: -1px;
  color: var(--color-text);
  opacity: .55;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .85rem;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: opacity .15s ease, border-color .15s ease, color .15s ease;
}
.reviews-tabs__btn:hover { opacity: .85; }
.reviews-tabs__btn.is-active { opacity: 1; color: var(--color-pink); border-bottom-color: var(--color-pink); }
.reviews-tabs .reviews-tabs__panel { display: none; }
.reviews-tabs .reviews-tabs__panel.is-active { display: block; }
.comment-list { margin-top: 1.5rem; }
.comment-list li { border-bottom: 1px solid rgba(255,255,255,.08); padding: 1.2rem 0; }
.comment-form-rating, .comment-form-rating .custom-select { max-width: 240px; }
.comment-form-rating label { display: block; margin-bottom: .5em; }
.comment-form p { margin-bottom: 1rem; }
.comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea {
  width: 100%; background: var(--color-bg); color: var(--color-text);
  border: 1px solid var(--color-purple-dark); border-radius: 999px; padding: .6em 1.3em;
}
/* Los campos altos (textarea) no llevan la píldora completa — se redondea
   un porcentaje de su propio tamaño para no volverlos una cápsula, sin
   tocar su ancho/alto real. */
.comment-form textarea { border-radius: 20px; }

/* ---------- Single post ----------
   Nombrada "blog-post-article" (no "single-post") a propósito: WordPress ya
   agrega "single-post" como clase automática del <body> en esta vista, y un
   selector .single-post aquí también apuntaría al <body>, aplastando todo el
   layout de la página a este ancho. */
.blog-post-article { padding-bottom: 3rem; }
.blog-post-article__meta { display: flex; gap: 1.5rem; color: #8b8f9a; font-size: .85rem; margin-bottom: 2rem; align-items: center; }
.blog-post-article__meta .meta-author { display: flex; align-items: center; gap: .5em; }
.blog-post-article__meta .meta-author img { border-radius: 50%; }
.blog-post-article__content blockquote { font-family: var(--font-quote); font-style: italic; font-size: 1.3rem; border-left: 3px solid var(--color-pink); padding-left: 1.5rem; margin: 2rem 0; }
.blog-post-article__content img { border-radius: var(--radius); }
/* Los resets globales de <ul> (sin viñetas/margen, para menús/badges) y de
   h2-h4 (sin margen superior, para otros componentes) aplastaban el
   contenido del post — se restauran los saltos normales solo aquí adentro. */
.blog-post-article__content p { margin: 0 0 1.2em; }
.blog-post-article__content h2,
.blog-post-article__content h3,
.blog-post-article__content h4 { margin: 1.8em 0 .75em; }
.blog-post-article__content ul,
.blog-post-article__content ol { list-style: disc; margin: 0 0 1.2em; padding-left: 1.4em; }
.blog-post-article__content ol { list-style: decimal; }
.blog-post-article__content li { margin-bottom: .5em; color: var(--color-gray); }
.blog-post-article__content li::marker { color: color-mix(in srgb, var(--color-pink) 55%, black); }
.blog-post-article__content > *:first-child { margin-top: 0; }
.blog-post-article__tags { margin-top: 2rem; }
.related-posts { margin-top: 3.5rem; }
.related-posts .section-title { text-align: left; font-size: 1.5rem; }
.related-posts .meta-comments { display: none; }
.related-posts .blog-card__meta { margin-top: .75rem; }
.related-posts .blog-card__excerpt { display: none; }

/* CTA destacado de entradas del blog (metabox propio, opcional, varios por post) */
.post-cta-list { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; margin: 2rem 0; }
.post-cta {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .75rem;
  padding: 1.05em 1.8em 1.15em;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--color-pink), var(--color-purple));
  color: var(--color-night);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1;
  letter-spacing: .02em;
  box-shadow: 0 10px 26px rgba(0,0,0,.45);
  transition: transform .25s ease, box-shadow .25s ease;
  overflow: hidden;
}
.post-cta::before {
  content: '';
  position: absolute; top: 0; left: -60%;
  width: 40%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-20deg);
  animation: post-cta-shine 3.5s ease-in-out infinite;
}
.post-cta:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(0,0,0,.55); }
.post-cta__arrow { display: flex; transition: transform .25s ease; flex-shrink: 0; }
.post-cta:hover .post-cta__arrow { transform: translateX(6px); }
@keyframes post-cta-shine {
  0% { left: -60%; }
  50% { left: 130%; }
  100% { left: 130%; }
}

/* ---------- Footer ---------- */
.site-footer { background: var(--color-night); margin-top: 4rem; padding: 3rem 1.5rem 1.5rem; }
.site-footer__columns {
  max-width: var(--container); margin: 0 auto;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 2rem;
}
.site-footer__col h3 { font-size: 1rem; color: var(--color-pink); text-transform: uppercase; letter-spacing: .05em; }
.site-footer__col img.custom-logo { height: 71.5px; width: auto; margin-bottom: .5rem; }
.site-footer__col p { font-size: .7rem; }
.footer-new-models li { margin-bottom: .6em; }
.footer-new-models li a { display: flex; align-items: center; gap: .6em; transition: transform .25s ease; }
.footer-new-models li a:hover { transform: translateX(5px); }
.footer-new-models img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0; transition: transform .25s ease, box-shadow .25s ease; }
.footer-new-models li a:hover img { transform: scale(1.12); box-shadow: 0 0 0 2px var(--color-pink); }
.footer-new-models span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; transition: color .25s ease; }
.footer-new-models li a:hover span { color: var(--color-pink); }
.footer-contacts li { margin-bottom: .5em; }
.footer-telegram-link { display: inline-flex; align-items: center; gap: .4em; color: inherit; transition: color .2s ease; }
.footer-telegram-link:hover { color: var(--color-pink); }
.site-footer__bottom {
  max-width: var(--container); margin: 2rem auto 0; padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,.08);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
  font-size: .85rem; color: #8b8f9a;
}
.site-footer__social { display: flex; gap: 1rem; }
.site-footer__bottom span { font-size: .7rem; }
.site-footer__bottom span a { transition: color .2s ease; }
.site-footer__bottom span a:hover { color: var(--color-pink); }
.site-footer__social a:hover { color: var(--color-pink); }

/* ---------- 404 / page ---------- */
.page-content { max-width: 860px; margin: 0 auto; padding: 4rem 1.5rem; text-align: center; }

/* 404: mismo fondo (foto al azar de modelos/waifus/hospedajes/posts) y mismo
   degradado horizontal que el hero "Portada" del home, pero sin carrusel ni
   mosaico — solo la imagen quieta con el filtro/degradado. */
.error-404 {
  position: relative;
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  overflow: hidden;
  padding: 4rem max(1.5rem, calc((100% - var(--container)) / 2 + 1.5rem));
  background: linear-gradient(160deg, var(--color-night), var(--color-bg-card));
}
.error-404__bg {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
  filter: contrast(1.3) saturate(1.15);
  opacity: 0;
  transition: opacity 1.5s ease;
}
.error-404__bg.is-active { opacity: 1; }
.error-404__overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(127,21,23,.95) 0%, rgba(124,22,53,.9) 33%, rgba(98,71,115,.25) 100%);
}
.error-404__content { position: relative; z-index: 2; max-width: 560px; }
.error-404__code { display: block; font-family: var(--font-display); font-size: clamp(4.5rem, 12vw, 8rem); line-height: 1; color: var(--color-text); }
.error-404__title { font-size: clamp(1.4rem, 3vw, 2rem); color: var(--color-text); margin: .5rem 0 .75rem; }
.error-404__subtitle { font-size: 1.05rem; color: var(--color-text); opacity: .85; margin-bottom: 1.5rem; }
.error-404__search { margin-bottom: 2rem; max-width: 420px; }
.error-404__content .btn { box-shadow: 0 8px 24px rgba(0,0,0,.45); }

.search-form { display: flex; gap: .75rem; flex-wrap: wrap; }
.search-form__field {
  flex: 1 1 220px; background: var(--color-bg); color: var(--color-text);
  border: 1px solid var(--color-purple-dark); border-radius: 999px;
  padding: .7em 1.3em; font-size: 1rem;
}
.search-form__field::placeholder { color: #8b8f9a; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .models-grid, .blog-listing__grid { grid-template-columns: repeat(2, 1fr); }
  .blog-preview-grid { grid-template-columns: 1fr; }
  .fresh-grid { grid-template-columns: repeat(2, 1fr); }
  .model-profile { grid-template-columns: 1fr; }
  .site-footer__columns { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .site-header__nav { position: absolute; top: 100%; left: 0; right: 0; background: var(--color-bg); display: none; padding: 1rem; }
  .site-header.is-open .site-header__nav { display: block; }
  .primary-menu { flex-direction: column; align-items: flex-start; }
  .primary-menu li::after { display: none; }
  .site-header__toggle { display: block; }
  .site-header__contact { display: none; }
  .site-header__cta { display: none; }
  .models-grid, .blog-listing__grid, .fresh-grid { grid-template-columns: 1fr; }
  .site-footer__columns { grid-template-columns: 1fr; }
  .testimonial-nav--prev { left: 0; }
  .testimonial-nav--next { right: 0; }
}

/* ---------- Waifus ---------- */
.waifu-card { background: var(--color-bg-card); border-radius: var(--radius); overflow: hidden; }
.waifu-card__media { position: relative; display: block; aspect-ratio: 3/4; background: var(--color-night); overflow: hidden; }
.waifu-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.waifu-card:hover .waifu-card__media img { transform: scale(1.04); }
.waifu-card__placeholder { width: 100%; height: 100%; background: linear-gradient(160deg, var(--color-purple-dark), var(--color-night)); }
.waifu-card__body { padding: 1rem; }
.waifu-card__name { font-size: 1.1rem; margin-bottom: .3em; }
.waifu-card__excerpt { color: #8b8f9a; font-size: .85rem; margin: 0; }
.waifu-card__series { margin-bottom: .5em; }
.waifu-profile__series { margin-bottom: 1rem; }

/* Página de Waifu: contenido principal + sidebar de recomendadas */
.waifu-page {
  max-width: var(--container);
  margin: 0 auto;
  padding: 3rem 1.5rem 4rem;
  display: grid;
  grid-template-columns: 1fr 332px;
  gap: 2.5rem;
  align-items: start;
}
.waifu-page__main { min-width: 0; }

.waifu-profile {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 2rem;
  align-items: start;
  margin-bottom: 2.5rem;
}
.waifu-profile__photo img {
  width: 160px;
  height: 160px;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid var(--color-purple-dark);
}
.waifu-profile__main { min-width: 0; }
.waifu-profile__description h3 { font-size: 1.1rem; color: var(--color-pink); text-transform: uppercase; letter-spacing: .05em; margin-bottom: .75rem; }
.waifu-profile__description { margin-bottom: 1.5rem; }
.waifu-social { display: flex; flex-wrap: wrap; gap: .75rem; }

.waifu-categories-section { max-width: var(--container); margin: 0 auto; padding: 3rem 1.5rem; text-align: center; }
.waifu-categories { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; }

/* Galería: crece con más fotos manteniéndose centrada (3 por fila),
   en vez de pegarse a la izquierda cuando hay pocas. */
.waifu-gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.2rem;
}
.waifu-gallery__item {
  position: relative;
  display: block;
  flex: 0 1 338px;
  max-width: 100%;
  aspect-ratio: 3/4;
  border-radius: var(--radius);
  overflow: hidden;
}
.waifu-gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }

.waifu-sidebar { background: var(--color-bg-card); border-radius: var(--radius); padding: 1.5rem; }
.waifu-sidebar h3 { font-size: 1rem; color: var(--color-pink); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 1.2rem; }
.waifu-sidebar__list { display: flex; flex-direction: column; gap: 1rem; }
.waifu-sidebar__item { display: flex; align-items: center; gap: .75rem; }
.waifu-sidebar__item img,
.waifu-sidebar__placeholder {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.waifu-sidebar__placeholder { background: linear-gradient(160deg, var(--color-purple-dark), var(--color-night)); }
.waifu-sidebar__item span { font-size: .9rem; color: var(--color-text); }
.waifu-sidebar__item:hover span { color: var(--color-pink); }
.waifu-sidebar__empty { font-size: .85rem; color: #8b8f9a; }
.waifu-sidebar__types { margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.1); }
.waifu-sidebar__type-links { display: flex; flex-wrap: wrap; gap: .5rem; }

/* Sidebar del blog: widgets "Recientes" / "Categorías" arriba de las zonas de publicidad */
.blog-sidebar-widget { background: var(--color-bg-card); border-radius: var(--radius); padding: 1.5rem; }
.blog-sidebar-widget__title { font-size: 1rem; color: var(--color-pink); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 1.2rem; }
.blog-sidebar-widget__list { display: flex; flex-direction: column; gap: 1rem; }
.blog-sidebar-widget__item { display: flex; align-items: center; gap: .75rem; }
.blog-sidebar-widget__item img,
.blog-sidebar-widget__placeholder {
  width: 56px; height: 56px; border-radius: 8px; object-fit: cover; flex-shrink: 0;
}
.blog-sidebar-widget__placeholder { background: linear-gradient(160deg, var(--color-purple-dark), var(--color-night)); }
.blog-sidebar-widget__item span { display: flex; flex-direction: column; gap: .2rem; font-size: .9rem; color: var(--color-text); }
.blog-sidebar-widget__item time { font-size: .75rem; color: #8b8f9a; }
.blog-sidebar-widget__item:hover span { color: var(--color-pink); }
.blog-sidebar-widget__empty { font-size: .85rem; color: #8b8f9a; }
.blog-sidebar-widget__cats { display: flex; flex-wrap: wrap; gap: .5rem; }
.blog-sidebar-widget__cats span { opacity: .7; font-size: .85em; }

.waifu-profile__photo { position: relative; width: max-content; }
.waifu-profile__type-badge {
  position: absolute;
  bottom: -.4em;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-copper);
  color: var(--color-night);
  font-size: .65rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 700;
  padding: .25em .8em;
  border-radius: 999px;
  white-space: nowrap;
}
.waifu-profile__type-badge--ia { background: var(--color-pink); }

@media (max-width: 900px) {
  .waifu-page { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .waifu-profile { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .waifu-social { justify-content: center; }
}
.waifu-gallery__item:hover img { transform: scale(1.06); }
.waifu-gallery__link-badge {
  position: absolute;
  left: .6em; right: .6em; bottom: .6em;
  background: var(--color-primary);
  color: var(--color-text);
  text-align: center;
  padding: .5em 1em;
  border-radius: 999px;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease;
}

/* ---------- Hospedajes ---------- */
.hospedaje-card {
  position: relative;
  background: var(--color-bg-card);
  border-radius: var(--radius);
  overflow: hidden;
}
.hospedaje-card__media { position: relative; display: block; aspect-ratio: 4/3; background: var(--color-night); overflow: hidden; }
.hospedaje-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.hospedaje-card:hover .hospedaje-card__media img { transform: scale(1.04); }
.hospedaje-card__placeholder { width: 100%; height: 100%; background: linear-gradient(160deg, var(--color-purple-dark), var(--color-night)); }
.hospedaje-card__badge {
  position: absolute; top: .6em; right: .6em;
  background: var(--color-copper); color: var(--color-night);
  font-size: .7rem; text-transform: uppercase; padding: .2em .6em; border-radius: 4px;
}
.hospedaje-card__body { padding: 1rem; }
.hospedaje-card__category { margin-bottom: .5em; }
.hospedaje-card__name { font-size: 1.1rem; margin-bottom: .2em; }
.hospedaje-card__name--logo { margin-bottom: .5em; }
.hospedaje-card__name--logo a { display: inline-block; }
.hospedaje-card__logo { max-height: 44px; width: auto; max-width: 100%; object-fit: contain; }
.hospedaje-card__location { color: #8b8f9a; font-size: .85rem; margin: 0 0 .4em; }
.hospedaje-card__price { font-size: .85rem; color: var(--color-text); margin: 0 0 .5em; }
.hospedaje-card__price strong { color: var(--color-copper); }
.hospedaje-card__amenities { display: flex; flex-wrap: wrap; gap: .4em; }

.hospedaje-card--featured { border: 2px solid var(--color-pink); }

.hospedaje-card--upsell { display: flex; align-items: center; justify-content: center; text-align: center; background: linear-gradient(160deg, var(--color-primary), var(--color-purple-dark)); }
.hospedaje-card__upsell-inner { padding: 2rem 1.5rem; }
.hospedaje-card__upsell-inner h3 { font-size: 1.1rem; color: var(--color-text); }

/* ---------- Hospedaje action bar ---------- */
.hospedaje-action-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  background: transparent; padding: 1rem 1.5rem;
  max-width: var(--container); margin: 2rem auto 0;
}
.hospedaje-action-bar__name { font-family: var(--font-display); font-size: 1.3rem; display: flex; align-items: center; }
.hospedaje-action-bar__logo { max-height: 56px; width: auto; object-fit: contain; }
.hospedaje-action-bar__phone {
  font-weight: 700;
  color: var(--color-copper);
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: .5em;
}
.hospedaje-action-bar__whatsapp-icon { color: var(--color-pink); flex-shrink: 0; width: 36px; height: 36px; }

/* ---------- Hospedaje single page ---------- */
.hospedaje-page {
  max-width: var(--container); margin: 0 auto; padding: 3rem 1.5rem;
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 2rem;
}
.hospedaje-page__main { min-width: 0; }
.hospedaje-page__hero-image img { display: block; width: 100%; height: auto; border-radius: var(--radius); margin-bottom: 1.5rem; }
.hospedaje-page__video { margin-bottom: 1.5rem; }
.hospedaje-page__video iframe, .hospedaje-page__video video { width: 100%; aspect-ratio: 16/9; border-radius: var(--radius); }
.hospedaje-page__gallery {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: .5rem;
  margin-bottom: 1.5rem;
}
.hospedaje-page__gallery img { aspect-ratio: 1; object-fit: cover; border-radius: 4px; }
.hospedaje-page__gallery .gallery-thumb { display: block; border-radius: 4px; outline: 2px solid transparent; outline-offset: 2px; transition: outline-color .15s ease; cursor: pointer; }
.hospedaje-page__gallery .gallery-thumb:hover,
.hospedaje-page__gallery .gallery-thumb.is-active { outline-color: var(--color-pink); }

.hospedaje-map { position: relative; width: 100%; aspect-ratio: 16/9; border-radius: var(--radius); overflow: hidden; margin-top: 1rem; }
.hospedaje-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.hospedaje-contact-info li { padding: .6em 0; border-bottom: 1px solid rgba(255,255,255,.1); }
.hospedaje-contact-info li:last-child { border-bottom: none; }
.hospedaje-contact-buttons { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }

@media (max-width: 900px) {
  .hospedaje-page { grid-template-columns: 1fr; }
}

/* ---------- Página de Contacto ---------- */
.contact-page {
  max-width: var(--container); margin: 0 auto; padding: 3rem 1.5rem 4rem;
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 2.5rem;
  align-items: start;
}
.contact-page__main { min-width: 0; }
.contact-form p { margin-bottom: 1.2rem; }
.contact-form label { display: block; margin-bottom: .4em; font-size: .9rem; color: var(--color-text); }
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form select,
.contact-form textarea {
  width: 100%; background: var(--color-bg-card); color: var(--color-text);
  border: 1px solid var(--color-purple-dark); border-radius: 999px; padding: .7em 1.3em;
  font-family: var(--font-body); font-size: .95rem;
}
.contact-form textarea { resize: vertical; border-radius: 20px; }
.contact-form input:hover, .contact-form input:focus,
.contact-form select:hover, .contact-form select:focus,
.contact-form textarea:hover, .contact-form textarea:focus { border-color: var(--color-pink); outline: none; }
.contact-form__honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.contact-form__success {
  background: rgba(125,94,167,.15); border: 1px solid var(--color-purple);
  border-radius: var(--radius); padding: 1.5rem; color: var(--color-text);
}
.contact-form__errors {
  background: rgba(127,19,15,.2); border: 1px solid var(--color-secondary);
  border-radius: var(--radius); padding: 1rem 1.5rem; margin-bottom: 1.5rem;
}
.contact-form__errors ul { list-style: disc; padding-left: 1.2em; }
.contact-form__errors li { margin-bottom: .3em; }
.contact-info-list li { padding: .6em 0; border-bottom: 1px solid rgba(255,255,255,.1); }
.contact-info-list li:last-child { border-bottom: none; }
.contact-telegram-link { display: inline-flex; align-items: center; gap: .4em; color: var(--color-text); transition: color .2s ease; }
.contact-telegram-link:hover { color: var(--color-pink); }
.contact-buttons { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }

@media (max-width: 900px) {
  .contact-page { grid-template-columns: 1fr; }
}

/* ---------- Página de enlace de descarga (sin header/footer del sitio) ---------- */
.gate-body { background: var(--color-bg); min-height: 100vh; display: flex; justify-content: center; padding: 3rem 1rem; }
.gate-layout { display: flex; justify-content: center; align-items: flex-start; gap: 2rem; width: 100%; max-width: 1180px; }
.gate-sidebar { flex: 0 0 160px; display: flex; justify-content: center; }
.gate-page { flex: 1 1 auto; min-width: 0; max-width: 700px; padding: 1rem 1.5rem; text-align: center; }
.gate-page__title { font-size: clamp(1.6rem, 4vw, 2.4rem); color: var(--color-pink); margin-bottom: 2rem; }
.gate-page__step { color: var(--color-text); opacity: .7; font-size: .9rem; margin-top: -1.5rem; margin-bottom: 1.5rem; }
.gate-page__ads { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; margin: 1.5rem 0; }
.gate-ad { width: 100%; display: flex; justify-content: center; position: relative; }
.gate-ad--mobile { display: none; }
.gate-ad-overlay { position: absolute; inset: 0; z-index: 999999; cursor: pointer; }

@media (max-width: 1200px) {
  .gate-sidebar { display: none; }
}
.gate-page__box { background: var(--color-bg-card); border-radius: var(--radius); padding: 2.5rem 2rem; }
.gate-page__msg { color: var(--color-text); margin-bottom: 1rem; }
.gate-page__countdown { font-family: var(--font-display); font-size: 3.5rem; color: var(--color-pink); margin-bottom: 1.5rem; }
#gate-button:disabled { opacity: .4; cursor: not-allowed; }
#gate-button.is-ready { animation: gate-pulse 1.2s ease-in-out infinite; }
@keyframes gate-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
.gate-page__error { color: var(--color-pink); margin-top: 1rem; min-height: 1em; }

@media (max-width: 640px) {
  .gate-ad--desktop { display: none; }
  .gate-ad--mobile { display: flex; }
}
.waifu-gallery__item:hover .waifu-gallery__link-badge { opacity: 1; transform: translateY(0); }

/* ---------- Zonas de publicidad (sistema propio, códigos vía wp-admin) ---------- */
.ad-zone-section { max-width: var(--container); margin: 0 auto; padding: 1.5rem; }
/* margin-left/right:0 anula el "margin:0 auto" heredado de .ad-zone-section:
   en un sidebar flex-column (blog-listing__sidebar) esos auto-márgenes
   activan el comportamiento especial de flexbox donde el item se encoge a
   su contenido en vez de estirarse (align-items:stretch), dejando el
   anuncio más angosto de lo que debería. Sin esos auto-márgenes, sí estira
   a los 332px de la columna y el <300px del anuncio queda centrado adentro. */
.ad-zone-section--sidebar { max-width: none; margin-left: 0; margin-right: 0; padding: 0 0 1.5rem; }
/* El sidebar de Waifu es exactamente 300px (columna del grid) con 1.5rem de
   padding propio — el anuncio cuadrado (300px) no cabía en el content-box
   resultante (252px) y se salía. Se compensa con margen negativo para que
   la zona de anuncio use el ancho completo de la columna, sin tocar el
   padding general del sidebar (que sí sirve para el resto del contenido). */
.waifu-sidebar .ad-zone-section--sidebar { margin-left: -1.5rem; margin-right: -1.5rem; }
.ad-zone-section--sidebar.ad-zone-section--desktop-only,
.ad-zone-section--sidebar.ad-zone-section--mobile-only { margin-top: 1.5rem; }
.ad-zone { width: 100%; min-width: 0; margin: 0 auto; display: flex; justify-content: center; overflow: hidden; }
.ad-zone__placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem;
  width: 100%; border: 2px dashed color-mix(in srgb, var(--color-pink) 50%, transparent);
  border-radius: var(--radius); background: color-mix(in srgb, var(--color-pink) 6%, transparent);
  color: var(--color-text); opacity: .65; font-size: .8rem; text-align: center; padding: .5rem 1rem; box-sizing: border-box;
}
.ad-zone__placeholder-size { font-size: .7rem; opacity: .8; }

.ad-zone-section--mobile-only { display: none; }
@media (max-width: 640px) {
  .ad-zone-section--desktop-only { display: none; }
  .ad-zone-section--mobile-only { display: block; }
}