/* ==========================================================================
   WALKING PLANETS — hoja de estilos base para WordPress / Elementor
   --------------------------------------------------------------------------
   Encolar en el hijo del tema ANTES que el CSS de Elementor personalizado.
   Todas las clases están pensadas para pegarse en el campo
   "Avanzado → Clases CSS" de cada contenedor/widget de Elementor.
   Nada aquí depende de jQuery ni de plugins.
   ========================================================================== */

/* ---------- 1. TOKENS ---------- */
:root{
  /* color */
  --wp-navy:#0E3457;          /* fondo base de toda la web */
  --wp-navy-panel:#164067;    /* tarjetas y paneles sobre navy */
  --wp-navy-soft:#1B4C79;     /* fondo de los desplegables de categoría */
  --wp-cyan:#00B2D8;          /* acento principal / CTA */
  --wp-cyan-ink:#0B6FA4;      /* mismo acento legible sobre blanco */
  --wp-yellow:#FFE500;        /* acento secundario, subrayados, cifras */
  --wp-white:#FFFFFF;
  --wp-ink:#2E4457;           /* texto largo sobre blanco */
  --wp-ink-soft:#3A5068;      /* texto secundario sobre blanco */
  --wp-muted:#8296A8;         /* metadatos, deshabilitado */
  --wp-line-dark:rgba(255,255,255,.16);   /* separadores sobre navy */
  --wp-line-light:rgba(14,52,87,.14);      /* separadores sobre blanco */

  /* tipografía */
  --wp-display:'Anton',Impact,sans-serif;   /* titulares, SIEMPRE uppercase */
  --wp-body:'Manrope',system-ui,sans-serif; /* textos */
  --wp-mono:'Space Mono',monospace;         /* kickers, etiquetas, datos */

  /* ritmo vertical */
  --wp-section-y:110px;
  --wp-section-y-sm:90px;
  --wp-gutter:40px;
  --wp-gutter-mobile:18px;
  --wp-maxw:1440px;
  --wp-maxw-ultra:1760px;

  /* movimiento */
  --wp-ease:cubic-bezier(.16,.84,.3,1);
  --wp-reveal:.5s var(--wp-ease);   /* §26 (2026-09-09): era 1s — el cliente: "tardan mucho en cargar los títulos" */
}

/* ---------- 2. RESET MÍNIMO ---------- */
.wp-page{background:var(--wp-navy);color:var(--wp-white);font-family:var(--wp-body);-webkit-font-smoothing:antialiased;text-wrap:pretty;overflow-x:clip}
/* OJO: overflow-x:clip, NUNCA hidden. `hidden` rompe position:sticky. */
.wp-page a{color:var(--wp-cyan);text-decoration:none}
.wp-page a:hover{color:var(--wp-yellow)}
.wp-page input,.wp-page textarea,.wp-page select,.wp-page button{font-family:inherit;max-width:100%;box-sizing:border-box}
.wp-page input,.wp-page textarea{width:100%;min-width:0}

/* ---------- 3. SECCIONES Y CONTENEDOR ---------- */
.wp-section{padding:var(--wp-section-y) var(--wp-gutter)}
.wp-section--light{background:var(--wp-white);color:var(--wp-navy)}
.wp-section--cyan{background:var(--wp-cyan);color:var(--wp-navy)}
.wp-section--yellow{background:var(--wp-yellow);color:var(--wp-navy)}
.wp-shell{max-width:var(--wp-maxw);margin-inline:auto}

/* ---------- 4. TIPOGRAFÍA ---------- */
.wp-h1{margin:0;font-family:var(--wp-display);font-weight:400;text-transform:uppercase;
  font-size:clamp(46px,7.6vw,148px);line-height:.86;letter-spacing:-.005em}
.wp-h1--xl{font-size:clamp(54px,9.2vw,178px);line-height:.85}   /* home */
.wp-h2{margin:0;font-family:var(--wp-display);font-weight:400;text-transform:uppercase;
  font-size:clamp(38px,5.2vw,96px);line-height:.9}
.wp-h2--xl{font-size:clamp(46px,7.6vw,148px);line-height:.86}   /* manifiestos a sangre */
.wp-h2--sm{font-size:clamp(28px,3.4vw,54px);line-height:.98}
.wp-h3{margin:0;font-family:var(--wp-display);font-weight:400;text-transform:uppercase;
  font-size:28px;line-height:1}
.wp-kicker{display:flex;align-items:center;gap:14px;width:max-content;max-width:100%;
  font-family:var(--wp-mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--wp-cyan)}
.wp-kicker--yellow{color:var(--wp-yellow)}
.wp-kicker--ink{color:var(--wp-cyan-ink)}
.wp-kicker__rule{width:34px;height:2px;background:currentColor;display:block;flex:0 0 auto}
.wp-lead{margin:0;font-size:21px;line-height:1.55}
.wp-body{margin:0;font-size:17.5px;line-height:1.7}
.wp-meta{font-family:var(--wp-mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase}

/* ---------- 5. BOTONES ---------- */
.wp-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;cursor:pointer;
  font-family:var(--wp-mono);font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  padding:17px 26px;border-radius:2px;transition:background .25s ease,color .25s ease,border-color .25s ease}
.wp-btn--primary{background:var(--wp-cyan);color:var(--wp-navy)}
.wp-btn--primary:hover{background:var(--wp-yellow);color:var(--wp-navy)}
.wp-btn--ghost{background:none;border:1px solid rgba(255,255,255,.6);color:var(--wp-white)}
.wp-btn--ghost:hover{background:var(--wp-white);color:var(--wp-navy)}
.wp-btn--dark{background:var(--wp-navy);color:var(--wp-white)}
.wp-btn--dark:hover{background:var(--wp-cyan);color:var(--wp-navy)}
.wp-btn--lg{padding:19px 32px;font-size:13px}

/* ---------- 6. CABECERA ---------- */
.wp-header{position:sticky;top:0;z-index:60;background:rgba(14,52,87,.9);backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.12);transition:background .3s ease,box-shadow .3s ease}
.wp-header.is-scrolled{background:rgba(14,52,87,.94);box-shadow:0 10px 40px rgba(0,0,0,.35)}
.wp-header__bar{display:flex;align-items:center;gap:32px;padding:14px var(--wp-gutter)}
.wp-header__logo img{height:48px;width:auto;display:block;transition:height .45s var(--wp-ease)}   /* 2026-09-09 logo hi-res: era 56px (encargo logo clean = 48px) */
.wp-header.is-scrolled .wp-header__logo img{height:40px}
.wp-nav{display:flex;align-items:center;gap:26px;font-family:var(--wp-mono);font-size:12.5px;
  letter-spacing:.16em;text-transform:uppercase}
.wp-nav>a,.wp-nav .wp-navitem-mega__head{color:var(--wp-white);white-space:nowrap}
/* 2026-09-10 (regresión de S2, cazada en la pasada de hover): al pasar la cabecera del mega menú
   de <button> a <a> empezó a alcanzarle `.wp-page a{color:var(--wp-cyan)}` (0,1,1), que le gana
   a `.wp-navitem-mega__head` (0,1,0) — «Tours+» salía CIAN en reposo en las 33 páginas, o sea
   con el aspecto de estar siempre en hover. Se sube a `.wp-nav .wp-navitem-mega__head` (0,2,0),
   que gana sin `!important`. Un <button> no cogía esa regla; un <a> sí: cambiar de etiqueta
   cambia a qué reglas queda expuesto el elemento. */   /* §21 (2026-09-09): a 1236px los rótulos se partían en dos líneas */
/* 2026-09-10 (S1, Scarlet 10:19 «el all experience se sobrepone»): el selector era `.wp-nav a`,
   y los 8 enlaces del mega menú TAMBIÉN son `<a>` dentro de `.wp-nav` — heredaban el `nowrap`
   pensado para los rótulos de primer nivel y sus títulos no podían partirse. Medido a 1440px:
   «GO BEYOND BARCELONA» ocupaba 259px en una columna de 195px y «ALL EXPERIENCES →» 184px en
   una celda de 159px: el texto se salía de su casilla y pisaba la de al lado. Por eso el
   selector pasa a hijo directo (`>`) y el color del panel se declara aparte, abajo. */
.wp-nav .wp-megamenu a{color:var(--wp-white)}
.wp-nav a:hover,.wp-nav a[aria-current="page"]{color:var(--wp-cyan)}
.wp-header__right{margin-left:auto;display:flex;align-items:center;gap:18px}
.wp-lang{display:flex;gap:10px;font-family:var(--wp-mono);font-size:11.5px;letter-spacing:.12em}
.wp-lang span{padding:4px 8px;color:rgba(255,255,255,.55)}
.wp-lang .is-active{background:var(--wp-white);color:var(--wp-navy);border-radius:2px}
.wp-burger{display:none;align-items:center;gap:9px;background:none;border:1px solid rgba(255,255,255,.4);
  color:var(--wp-white);font-family:var(--wp-mono);font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;padding:11px 14px;cursor:pointer}
.wp-drawer{display:none;border-top:1px solid rgba(255,255,255,.14);background:var(--wp-navy);
  padding:6px var(--wp-gutter-mobile) 20px;flex-direction:column}
.wp-drawer.is-open{display:flex}
.wp-drawer a{display:flex;align-items:center;min-height:44px;padding:15px 0;
  border-bottom:1px solid rgba(255,255,255,.12);color:var(--wp-white);
  font-family:var(--wp-display);font-size:24px;text-transform:uppercase}
.wp-drawer a:hover{color:var(--wp-cyan)}

/* ---------- 7. HERO CINEMATOGRÁFICO ---------- */
/* QA móvil (2026-08-19, @frontend): en Safari iOS `100vh` cuenta con la barra de URL
   RETRAÍDA — mientras está desplegada (estado normal al cargar) el hero mide más que la
   pantalla real y la fila de CTAs del hero queda por debajo del borde inferior, inalcanzable
   sin hacer scroll. `100svh` (small viewport height) siempre corresponde al viewport MÁS
   PEQUEÑO posible, que es el que importa aquí. Se usa `dvh` a propósito NO: `dvh` sigue a la
   barra en tiempo real y el hero cambiaría de alto durante el scroll — peor que el problema
   que arregla. Declaración doble: `vh` primero como fallback de navegadores sin soporte de
   `svh` (Safari <15.4, navegadores muy antiguos), `svh` después la sobreescribe donde hay
   soporte — no rompe nada, en desktop sin barra dinámica ambas dan el mismo resultado. */
.wp-hero{position:relative;height:calc(100vh - 86px);height:calc(100svh - 86px);min-height:640px;overflow:hidden;background:var(--wp-navy)}
.wp-hero__media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform-origin:52% 46%;animation:wpHeroIn 2.6s var(--wp-ease) both,wpKenBurns 26s 2.6s ease-in-out infinite alternate}
.wp-hero__scrim{position:absolute;inset:0;background:linear-gradient(180deg,
  rgba(14,52,87,.42) 0%,rgba(14,52,87,.06) 34%,rgba(14,52,87,.34) 72%,rgba(14,52,87,.86) 100%)}
.wp-hero__bars{position:absolute;inset:0;z-index:5;pointer-events:none;overflow:hidden}
.wp-hero__bar-top,.wp-hero__bar-bottom{position:absolute;left:0;right:0;height:26vh;background:var(--wp-navy)}
.wp-hero__bar-top{top:0;animation:wpBarTop 1.5s .35s var(--wp-ease) both}
.wp-hero__bar-bottom{bottom:0;animation:wpBarBottom 1.5s .35s var(--wp-ease) both}
.wp-hero__curtain{position:absolute;inset:0;z-index:6;background:var(--wp-navy);pointer-events:none;
  animation:wpCurtain .9s .25s ease-out both}
.wp-hero__copy{position:relative;z-index:7;height:100%;display:flex;flex-direction:column;
  justify-content:flex-end;padding:0 var(--wp-gutter) 44px;will-change:transform}
/* entrada del titular: una .wp-line por línea, con máscara */
.wp-line{display:block;overflow:hidden;padding-bottom:.04em}
.wp-line>span{display:block;animation:wpLineUp 1.15s var(--wp-ease) both}
.wp-line:nth-child(1)>span{animation-delay:1.05s}
.wp-line:nth-child(2)>span{animation-delay:1.2s}
.wp-line:nth-child(3)>span{animation-delay:1.38s}
.wp-fade-1{animation:wpFadeUp .9s 1.55s var(--wp-ease) both}
.wp-fade-2{animation:wpFadeUp 1s 1.75s var(--wp-ease) both}

/* ---------- 8. FRANJAS Y MARQUESINAS ---------- */
.wp-marquee{overflow:hidden;white-space:nowrap;padding:20px 0}
.wp-marquee--cyan{background:var(--wp-cyan);color:var(--wp-navy)}
.wp-marquee--light{border-top:1px solid var(--wp-line-light);border-bottom:1px solid var(--wp-line-light);padding:26px 0}
/* Bucle sin costura y de verdad infinito. Dos condiciones, no una:
   A) El desplazamiento debe valer EXACTAMENTE el ancho de una copia.
      Con N copias iguales y gap:0, eso es translateX(-100%/N).
      Si pones gap entre copias, el desplazamiento se queda corto justo ese hueco
      y se ve el salto.
   B) (N-1) x ancho_de_copia debe superar el ancho de pantalla más grande que
      quieras soportar, o al final del ciclo se ve un hueco vacío antes de
      "saltar". Con 2 copias esto falla en cualquier monitor ancho.
      Por eso el sistema usa 6 copias: aguanta hasta ~6000px de viewport.
   C) La separación entre frases y entre copias debe ser la MISMA, o el ojo
      lee el empalme como un vacío. Por eso los separadores llevan margin
      y las copias no llevan padding extra. */
.wp-marquee__track{display:flex;width:max-content;gap:0;animation:wpMarquee 46s linear infinite;
  font-family:var(--wp-display);font-size:30px;text-transform:uppercase;letter-spacing:.02em}
.wp-marquee__track>*{flex:0 0 auto}
.wp-marquee__sep{margin:0 26px;color:var(--wp-white)}
.wp-marquee--light .wp-marquee__track{animation-duration:54s;font-size:26px;color:var(--wp-navy);opacity:.75}
.wp-marquee--light .wp-marquee__track>*{padding-right:26px}
.wp-marquee:hover .wp-marquee__track{animation-play-state:paused}
.wp-trustbar{background:var(--wp-white);color:var(--wp-navy);padding:26px var(--wp-gutter)}
.wp-trustbar__inner{max-width:var(--wp-maxw);margin-inline:auto;display:flex;flex-wrap:wrap;
  gap:26px 48px;align-items:center;justify-content:space-between}
.wp-trustbar img{height:42px;width:auto}

/* ---------- 9. ACORDEÓN DE CATEGORÍAS (home) ---------- */
.wp-cat{border-top:1px solid var(--wp-line-dark)}
.wp-cat:last-child{border-bottom:1px solid var(--wp-line-dark)}
.wp-cat__head{width:100%;text-align:left;border:0;cursor:pointer;color:var(--wp-white);
  padding:38px var(--wp-gutter);display:flex;align-items:center;gap:30px;
  background-size:cover;background-position:center 40%;transition:background-image .5s}
/* el degradado casi opaco se aclara en hover para revelar la foto */
.wp-cat__num{font-family:var(--wp-mono);font-size:12px;letter-spacing:.14em;color:rgba(255,255,255,.55);width:38px}
.wp-cat__title{font-family:var(--wp-display);font-size:clamp(30px,4.2vw,66px);text-transform:uppercase;line-height:.95}
.wp-cat__note{font-family:var(--wp-mono);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.72);margin-left:auto;text-align:right}
.wp-cat__plus{font-family:var(--wp-display);font-size:30px;color:var(--wp-cyan);width:30px;text-align:center}
.wp-cat__panel{display:none;padding:8px var(--wp-gutter) 46px;background:var(--wp-navy-soft);
  grid-template-columns:1fr 1fr 1fr;gap:34px}
.wp-cat.is-open .wp-cat__panel{display:grid}

/* ---------- 10. TARJETAS DE EXPERIENCIA ---------- */
.wp-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.wp-card{display:block;color:var(--wp-white);transition:opacity .45s ease}
/* Filtro por intención: lo que no casa se atenúa Y se va al final, para que en
   pantallas grandes las coincidencias queden siempre arriba y a la vista. */
.wp-card{order:0}
.wp-card.is-dimmed{opacity:.16;order:1}
.wp-card__media{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--wp-navy-panel)}
.wp-card__media>img,.wp-card__media>video{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;transition:transform .7s var(--wp-ease)}
.wp-card:hover .wp-card__media>img{transform:scale(1.06)}
.wp-card__badges{position:absolute;inset:auto 0 0 0;padding:18px;display:flex;justify-content:space-between;
  align-items:flex-end;background:linear-gradient(rgba(14,52,87,0),rgba(14,52,87,.9));
  font-family:var(--wp-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.wp-card__title{margin:16px 0 8px;font-family:var(--wp-display);font-weight:400;font-size:28px;
  text-transform:uppercase;line-height:1}
.wp-card__text{margin:0 0 10px;font-size:15.5px;line-height:1.5;color:rgba(255,255,255,.65)}
.wp-card__price{font-family:var(--wp-mono);font-size:12.5px;letter-spacing:.1em;color:var(--wp-cyan)}
.wp-chips{display:flex;flex-wrap:wrap;gap:12px;margin:46px 0 40px}
.wp-chip{border:0;cursor:pointer;font-family:var(--wp-mono);font-size:12.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;padding:15px 22px;border-radius:2px;
  background:var(--wp-white);color:var(--wp-navy);transition:background .25s ease}
.wp-chip.is-active{background:var(--wp-cyan)}

/* ---------- 11. CARRUSEL DE REELS ---------- */
.wp-reels{display:flex;gap:20px;overflow-x:auto;padding:10px var(--wp-gutter) 30px;scroll-snap-type:x mandatory}
.wp-reel{flex:0 0 300px;scroll-snap-align:start;position:relative;aspect-ratio:9/16;
  overflow:hidden;background:var(--wp-navy)}
.wp-reel video,.wp-reel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.wp-reel__caption{position:absolute;inset:0;padding:18px;display:flex;flex-direction:column;
  justify-content:flex-end;background:linear-gradient(rgba(14,52,87,.05),rgba(14,52,87,.8))}

/* ---------- 12. FICHA DE TOUR ---------- */
.wp-tour-grid{display:grid;grid-template-columns:1.55fr .95fr;gap:64px;align-items:start}
.wp-sticky{position:sticky;top:100px}
.wp-timeline__row{display:grid;grid-template-columns:120px 1fr;gap:26px;padding:24px 0;border-top:1px solid var(--wp-line-dark)}
.wp-facts{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;background:var(--wp-line-dark)}
.wp-facts>div{background:var(--wp-navy);padding:26px 28px}
.wp-faq__q{width:100%;background:none;border:0;cursor:pointer;color:var(--wp-white);text-align:left;
  padding:26px 0;display:flex;gap:24px;align-items:center;border-top:1px solid rgba(255,255,255,.18);
  /* 2026-09-10 (pasada móvil): `white-space:normal` EXPLÍCITO. Un <button> hereda `nowrap` del
     navegador, no de ninguna hoja nuestra — por eso no salía en ningún grep. Con una pregunta
     larga («What is the difference with the four-stop tour?», 366px de una sola línea dentro de
     un botón de 354) el texto empujaba y **la página entera cogía scroll horizontal en móvil**:
     medido 417px de documento en una ventana de 390 en tapas-3 y 421 en tapas-4. */
  white-space:normal}
/* El hueco fijo de 24px se lo queda el "+"; el texto tiene que poder encoger y partir palabras
   largas. Esto ya existía en page-tour.css, pero acotado a `:has(.wp-ask)` — y las fichas que
   desbordaban eran justo las OTRAS, las de e-frame, que no tienen `.wp-ask`. Se generaliza:
   ninguna variante de ficha puede quedarse fuera de una regla que evita scroll horizontal. */
.wp-faq__q > span:first-child{min-width:0;overflow-wrap:break-word}
.wp-faq__q > span:last-child{flex:0 0 auto}
.wp-faq__a{display:none;margin:0 0 28px;font-size:17.5px;line-height:1.6;color:rgba(255,255,255,.75);max-width:70ch}
.wp-faq.is-open .wp-faq__a{display:block}
.wp-bookbar{position:fixed;bottom:0;left:0;right:0;z-index:80;background:rgba(14,52,87,.96);
  backdrop-filter:blur(12px);border-top:1px solid rgba(255,255,255,.16);
  padding:14px var(--wp-gutter);display:flex;align-items:center;gap:20px;justify-content:space-between}

/* ---------- 13. BARRA DE PROGRESO DE SCROLL ---------- */
.wp-progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--wp-cyan);
  z-index:90;pointer-events:none;transition:width .1s linear}

/* ---------- 14. REVELADO AL HACER SCROLL ---------- */
.wp-reveal{opacity:0;transform:translateY(26px);
  transition:opacity var(--wp-reveal),transform .55s var(--wp-ease)}   /* §26: transform era 1.1s */
.wp-reveal.is-in{opacity:1;transform:none}

/* ---------- 15. KEYFRAMES ---------- */
@keyframes wpKenBurns{from{transform:scale(1) translateY(0)}to{transform:scale(1.12) translateY(-1.5%)}}
@keyframes wpHeroIn{from{transform:scale(1.42) translateY(2%);filter:brightness(.82) saturate(.92)}
  to{transform:scale(1) translateY(0);filter:brightness(1.08) saturate(1.12)}}
@keyframes wpCurtain{0%{opacity:1}100%{opacity:0;visibility:hidden}}
@keyframes wpBarTop{from{transform:translateY(0)}to{transform:translateY(-100%)}}
@keyframes wpBarBottom{from{transform:translateY(0)}to{transform:translateY(100%)}}
@keyframes wpLineUp{from{transform:translateY(112%) skewY(4deg)}to{transform:translateY(0) skewY(0)}}
@keyframes wpFadeUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:translateY(0)}}
@keyframes wpMarquee{from{transform:translateX(0)}to{transform:translateX(-16.6667%)}} /* = 1/6: seis copias */
@keyframes wpPulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.55)}
  70%{box-shadow:0 0 0 22px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
@keyframes wpRuleIn{from{width:0}to{width:34px}}

/* ---------- 16. RESPONSIVE ----------
   Breakpoints reales del diseño. En Elementor: Móvil 767, Tablet 1024,
   pero el CSS manda a 860 porque es donde el menú deja de caber.        */
@media (min-width:600px) and (max-width:860px){
  .wp-cards,.wp-cat__panel{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* §21 (2026-09-09): el nav de escritorio no cabía en portátiles (a 1236px los rótulos se
   partían en dos líneas). El corte pasa de 860 a 1180px; el bloque de 860px se queda para
   lo estrictamente móvil (lang, paddings, rejillas a 1 columna). */
@media (max-width:1180px){
  .wp-nav{display:none}
  .wp-burger{display:flex}
}
@media (max-width:860px){
  .wp-nav{display:none}
  .wp-burger{display:flex}
  .wp-lang{display:none}
  .wp-header__bar{padding:12px 16px;gap:12px}
  .wp-header__logo img{height:38px}
  .wp-section,.wp-cat__head,.wp-cat__panel,.wp-hero__copy,.wp-reels,.wp-trustbar,.wp-bookbar{
    padding-left:var(--wp-gutter-mobile);padding-right:var(--wp-gutter-mobile)}
  .wp-cards,.wp-cat__panel,.wp-tour-grid,.wp-facts,.wp-timeline__row{grid-template-columns:minmax(0,1fr)}
  .wp-sticky{position:static}
  .wp-card__media{aspect-ratio:3/4}
  .wp-cat__note{display:none}
  .wp-header a,.wp-header button,.wp-drawer a,footer a{min-height:44px}
  h1,h2,.wp-h1,.wp-h2{hyphens:auto}

  /* QA móvil (2026-08-19, @frontend) — mínimo de texto 11,5px (auditoría DESIGN-TOKENS):
     badges de tarjeta ("1h15 · skip the line" etc, 09-reels/07-tours-filterable-grid). */
  .wp-card__badges{font-size:11.5px}

  /* Zona de toque (auditoría 2026-08-19): la regla de arriba (`footer a{min-height:44px}`)
     ya cubre el ALTO de los 4 enlaces legales del footer, pero no el ANCHO — "Terms"/"Privacy"
     miden ~39px de ancho, por debajo de los 44px de WCAG 2.5.8. `.wp-footer__legal-links` ya
     lleva `gap:18px`, así que basta con un poco de padding horizontal en el propio enlace. */
  .wp-footer__legal-links a{padding:0 4px}

  /* "Send us your reel →" (09-reels.php) — único uso de `a.wp-meta` en todo el sitio (verificado
     por grep), así que escalarlo con display:block no afecta a ningún otro `.wp-meta` (labels,
     no-enlaces) del sitio. De 17px de alto a ~44px con padding vertical. */
  a.wp-meta{display:inline-block;padding:14px 0}
}
@media (min-width:1800px){
  .wp-header__bar,.wp-hero__copy,.wp-shell--wide{max-width:var(--wp-maxw-ultra);margin-inline:auto}
  .wp-reels{padding-left:max(var(--wp-gutter),calc((100vw - var(--wp-maxw-ultra)) / 2))}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001s !important;transition-duration:.001s !important}
}

/* ==========================================================================
   RONDA 1 · 2026-09-17 — Estrellas rellenas a un PORCENTAJE (punto 9)
   --------------------------------------------------------------------------
   El cliente: «cambiar reviews de Google a 4.9 porque esta en 5 y no es real».
   Con estrellas enteras, un 4.9 escrito quedaba junto a cinco estrellas
   llenas, es decir un 5 dibujado. Aqui se rellenan al 98%.

   COMO: las cinco vacias hacen de fondo y encima se superpone la misma fila
   de cinco llenas, recortada por ancho. El corte cae en el punto exacto del
   porcentaje sin depender del ancho de la fuente ni del letter-spacing.

   ESPECIFICIDAD: `.wp-stars__on` y `.wp-stars__off` viven en `page-home.css`
   (0,1,0) y solo dan color; estas reglas usan 0,2,0 para no depender del
   orden en que el tema encole las hojas.

   No se toca `.wp-stars` a secas: las estrellas por unidades siguen
   existiendo (tarjetas de resena) y tienen que verse igual que siempre.
   ========================================================================== */
.wp-stars.wp-stars--partial{
  position:relative;
  display:inline-block;
  white-space:nowrap;
}
.wp-stars.wp-stars--partial .wp-stars__off{
  display:block;
}
.wp-stars.wp-stars--partial .wp-stars__on{
  position:absolute;
  top:0;
  left:0;
  display:block;
  overflow:hidden;
  /* El ancho lo pone el PHP como estilo en linea (el porcentaje es un dato,
     no una decision de diseno). Sin el, el bloque no se veria: de ahi el 0. */
  width:0;
  white-space:nowrap;
  pointer-events:none;
}

/* Enlace a la resena en Google desde el nombre del autor (punto 9).
   Solo existe cuando la resena tiene URL; mientras el perfil no exista, el
   nombre se pinta sin enlace y esta regla no llega a aplicarse a nada. */
.wp-review-quote__author-link{
  color:inherit;
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
  text-decoration-color:currentColor;
}
.wp-review-quote__author-link:hover,
.wp-review-quote__author-link:focus-visible{
  text-decoration-thickness:2px;
}

/* --------------------------------------------------------------------------
   Cabecera de valoracion SIN sello (ronda 1 · 2026-09-17, punto 3)
   --------------------------------------------------------------------------
   `.wp-rating` (page-home.css:794) es un grid de TRES columnas —
   `auto auto 1fr`— porque tenia nota + sello Travellers' Choice + enlace.
   Retirado el sello quedan dos hijos: sin esto, el enlace se sienta en la
   segunda columna `auto`, pegado a la nota, en vez de empujarse a la derecha.

   Especificidad 0,2,0 para ganarle a `.wp-rating` (0,1,0) sin depender del
   orden de encolado. El bloque movil se repite aqui por el mismo motivo: la
   regla de `page-home.css` dentro de su @media tambien es 0,1,0, asi que sin
   esta copia la version de escritorio se impondria tambien en el movil.
   -------------------------------------------------------------------------- */
.wp-rating.wp-rating--nobadge{
  grid-template-columns:auto 1fr;
}
@media (max-width:860px){
  .wp-rating.wp-rating--nobadge{
    grid-template-columns:minmax(0,1fr);
    gap:22px;
    text-align:left;
  }
}