/* =============================================================================
   MURILLO 360 · Hoja de estilos del sitio
   Generada a partir del sistema de diseno (ds.css) y del mockup del portal.
   No editar a mano sin necesidad: es la fuente visual aprobada.
   ============================================================================= */

/* ==========================================================================
   MURILLO 360 · SISTEMA DE DISEÑO v1.0
   Experiencias de alta montaña — Murillo, Tolima
   Paleta y tono extraídos de la identidad real de marca (fichas de producto).
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. EL ATRIBUTO hidden MANDA
   --------------------------------------------------------------------------
   El navegador oculta [hidden] con una regla de display, así que cualquier
   `display:` propio le gana y el elemento se sigue viendo. Ya pasó dos veces:
   el aviso de pico y placa quedó abierto sin poder cerrarse, y el formulario
   del carrito aparecía en el paso donde no iba.

   El !important es a propósito y es el único de la hoja: cuando el código dice
   que algo está oculto, tiene que estarlo, sin depender de qué clase lleve.
   -------------------------------------------------------------------------- */
[hidden]{display:none !important}

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root{
  /* Marca */
  --bosque-900:#101806;
  --bosque-800:#1A2609;
  --bosque-700:#243310;
  --bosque-600:#46601E;   /* verde del logotipo */
  --bosque-500:#55742A;
  --musgo:#557425;
  --hoja:#7FA046;
  --hoja-luz:#A9C46A;
  --paramo:#E2EAD2;

  --dorado:#F2B10A;
  --dorado-luz:#FFD24A;
  --terracota:#D9662F;    /* naranja de titulares */
  --terracota-luz:#F08B50;

  --crema:#F6F1E4;
  --hueso:#FCFAF4;
  --papel:#FFFFFF;
  --tinta:#16241B;
  --tinta-70:#4A5A50;
  --tinta-50:#78877D;
  --tinta-30:#A9B4AC;
  --borde:#E4DECD;
  --borde-fuerte:#D2C9B2;

  /* Semántico */
  --ok:#2F8F5B;
  --alerta:#D9662F;
  --info:#2C6E8F;

  /* Superficies */
  --surf:var(--hueso);
  --surf-alt:var(--crema);
  --surf-dark:var(--bosque-800);

  /* Gradientes */
  --g-bosque:linear-gradient(135deg,#46601E,#1A2609);
  --g-dorado:linear-gradient(135deg,#FFD24A,#F2B10A);
  --g-terra:linear-gradient(135deg,#F08B50,#D9662F);
  --g-veil:linear-gradient(180deg,rgba(11,26,17,0) 0%,rgba(11,26,17,.18) 38%,rgba(11,26,17,.72) 72%,rgba(11,26,17,.94) 100%);
  --g-veil-soft:linear-gradient(180deg,rgba(11,26,17,.55) 0%,rgba(11,26,17,.12) 45%,rgba(11,26,17,.68) 100%);

  /* Tipografía */
  --f-display:"Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --f-body:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --f-serif:Georgia,"Times New Roman",serif;
  --f-script:"Segoe Script","Bradley Hand","Brush Script MT",cursive;

  /* Radios */
  --r-xs:8px; --r-sm:12px; --r-md:18px; --r-lg:26px; --r-xl:36px; --r-full:999px;

  /* Sombras */
  --sh-1:0 1px 2px rgba(22,36,27,.06),0 2px 8px rgba(22,36,27,.05);
  --sh-2:0 4px 12px rgba(22,36,27,.07),0 12px 32px -8px rgba(22,36,27,.12);
  --sh-3:0 12px 28px rgba(22,36,27,.10),0 32px 64px -16px rgba(22,36,27,.20);
  --sh-4:0 40px 90px -30px rgba(11,26,17,.45);

  /* Movimiento */
  --e:cubic-bezier(.22,1,.36,1);
  --e-in:cubic-bezier(.4,0,.2,1);

  /* Layout */
  --nav-h:76px;
  --gutter:clamp(20px,4vw,56px);
}

/* --------------------------------------------------------------------------
   2. RESET / BASE
   -------------------------------------------------------------------------- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--f-body);
  background:var(--surf);
  color:var(--tinta);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden}
img,svg,video{display:block;max-width:100%}
img,video{height:auto}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
::selection{background:var(--terracota);color:#fff}
:focus-visible{outline:2px solid var(--musgo);outline-offset:3px;border-radius:4px}

::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--crema)}
::-webkit-scrollbar-thumb{background:var(--borde-fuerte);border-radius:10px}
::-webkit-scrollbar-thumb:hover{background:var(--tinta-30)}

/* --------------------------------------------------------------------------
   3. LAYOUT
   -------------------------------------------------------------------------- */
.wrap{width:min(1320px,100% - var(--gutter)*2);margin-inline:auto}
.wrap-nar{width:min(940px,100% - var(--gutter)*2);margin-inline:auto}
.sec{padding:clamp(64px,8vw,124px) 0;position:relative}
.sec-tight{padding:clamp(44px,5vw,72px) 0}
.grid{display:grid;gap:22px}
.flex{display:flex}
.between{display:flex;align-items:center;justify-content:space-between;gap:20px}
.stack-sm{display:flex;flex-direction:column;gap:8px}

/* --------------------------------------------------------------------------
   4. TIPOGRAFÍA
   -------------------------------------------------------------------------- */
h1,h2,h3,h4,h5{font-family:var(--f-display);font-weight:800;line-height:1.06;letter-spacing:-.032em}
.t-hero{font-size:clamp(2.9rem,7.4vw,6.2rem);line-height:.98;letter-spacing:-.042em}
.t-1{font-size:clamp(2.1rem,4.6vw,3.9rem);letter-spacing:-.038em}
.t-2{font-size:clamp(1.6rem,2.9vw,2.5rem);letter-spacing:-.032em}
.t-3{font-size:clamp(1.18rem,1.7vw,1.48rem);letter-spacing:-.024em;line-height:1.2}
.t-4{font-size:1.02rem;letter-spacing:-.018em;line-height:1.28}

.lead{font-size:clamp(1.02rem,1.25vw,1.18rem);color:var(--tinta-70);max-width:62ch;line-height:1.68}
.small{font-size:.86rem;color:var(--tinta-70)}
.tiny{font-size:.76rem;color:var(--tinta-50)}
.script{font-family:var(--f-script);font-weight:400;letter-spacing:0}
.serif{font-family:var(--f-serif)}

.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:.7rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:var(--musgo);
}
.eyebrow::before{content:"";width:26px;height:1.5px;background:var(--dorado);flex:none}
.eyebrow.on-dark{color:var(--hoja-luz)}
.eyebrow.centered::before{display:none}

.txt-dorado{color:var(--dorado)}
.txt-terra{color:var(--terracota)}
.txt-musgo{color:var(--musgo)}
.txt-mut{color:var(--tinta-70)}

/* Título con foto detrás del texto (recorte) */
.on-dark{color:var(--hueso)}
.on-dark .lead,.on-dark .small{color:rgba(252,250,244,.76)}
.on-dark .tiny{color:rgba(252,250,244,.58)}

/* --------------------------------------------------------------------------
   5. BOTONES
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 28px;border-radius:var(--r-full);
  font-weight:700;font-size:.94rem;letter-spacing:-.01em;white-space:nowrap;
  transition:transform .35s var(--e),box-shadow .35s var(--e),background .25s,color .25s,border-color .25s;
  position:relative;border:1.5px solid transparent;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn svg{width:18px;height:18px;flex:none}

.btn-primary{background:var(--bosque-600);color:var(--hueso);box-shadow:0 8px 22px -10px rgba(27,58,38,.7)}
.btn-primary:hover{background:var(--bosque-700);box-shadow:0 16px 34px -12px rgba(27,58,38,.8)}

.btn-terra{background:var(--g-terra);color:#fff;box-shadow:0 8px 24px -10px rgba(217,102,47,.7)}
.btn-terra:hover{box-shadow:0 16px 36px -12px rgba(217,102,47,.85)}

.btn-dorado{background:var(--g-dorado);color:var(--bosque-800);box-shadow:0 8px 24px -10px rgba(199,154,62,.7)}
.btn-dorado:hover{box-shadow:0 16px 36px -12px rgba(199,154,62,.85)}

.btn-ghost{border-color:var(--borde-fuerte);color:var(--tinta);background:transparent}
.btn-ghost:hover{border-color:var(--bosque-600);background:var(--paramo)}

.btn-glass{border-color:rgba(255,255,255,.34);color:#fff;background:rgba(255,255,255,.1);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.btn-glass:hover{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.6)}

.btn-sm{padding:9px 18px;font-size:.82rem}
.btn-lg{padding:17px 36px;font-size:1rem}
.btn-block{width:100%}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}

/* Icon button */
.ibtn{
  width:44px;height:44px;border-radius:var(--r-full);display:grid;place-items:center;
  border:1.5px solid var(--borde);transition:.3s var(--e);color:var(--tinta);background:var(--papel);
}
.ibtn:hover{border-color:var(--bosque-600);background:var(--paramo);transform:scale(1.06)}
.ibtn svg{width:19px;height:19px}
.ibtn.on-glass{border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.12);color:#fff;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.ibtn.on-glass:hover{background:rgba(255,255,255,.24)}

/* --------------------------------------------------------------------------
   6. PÍLDORAS / ETIQUETAS
   -------------------------------------------------------------------------- */
.pill{
  display:inline-flex;align-items:center;gap:7px;padding:7px 15px;border-radius:var(--r-full);
  font-size:.78rem;font-weight:600;background:var(--paramo);color:var(--bosque-700);
  border:1px solid rgba(27,58,38,.1);white-space:nowrap;
}
.pill svg{width:14px;height:14px}
.pill-dorado{background:rgba(233,196,106,.24);color:#7A5A18;border-color:rgba(199,154,62,.35)}
.pill-terra{background:rgba(240,139,80,.16);color:#9C3F14;border-color:rgba(217,102,47,.3)}
.pill-glass{background:rgba(255,255,255,.16);color:#fff;border-color:rgba(255,255,255,.28);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.pill-solid{background:var(--bosque-600);color:var(--hueso);border-color:transparent}

.badge-nuevo{background:var(--g-terra);color:#fff;font-size:.66rem;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;padding:5px 11px;border-radius:var(--r-full)}

/* Chips seleccionables (filtros / modalidades) */
.chip{
  display:inline-flex;align-items:center;gap:9px;padding:11px 20px;border-radius:var(--r-full);
  border:1.5px solid var(--borde);background:var(--papel);font-size:.88rem;font-weight:600;
  color:var(--tinta-70);transition:.3s var(--e);cursor:pointer;
}
.chip:hover{border-color:var(--musgo);color:var(--tinta);transform:translateY(-2px)}
.chip[aria-pressed="true"],.chip.is-on{
  background:var(--bosque-600);border-color:var(--bosque-600);color:var(--hueso);
  box-shadow:0 8px 20px -10px rgba(27,58,38,.8);
}
.chip svg{width:17px;height:17px}

/* --------------------------------------------------------------------------
   7. TARJETAS
   -------------------------------------------------------------------------- */
.card{
  background:var(--papel);border:1px solid var(--borde);border-radius:var(--r-lg);
  overflow:hidden;transition:transform .5s var(--e),box-shadow .5s var(--e),border-color .3s;
  display:flex;flex-direction:column;position:relative;
}
.card:hover{transform:translateY(-6px);box-shadow:var(--sh-3);border-color:var(--borde-fuerte)}
.card-media{position:relative;overflow:hidden;aspect-ratio:4/3;background:var(--paramo)}
.card-media img,.card-media video{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--e)}
.card:hover .card-media img,.card:hover .card-media video{transform:scale(1.07)}
.card-media .veil{position:absolute;inset:0;background:var(--g-veil-soft);opacity:.55}
.card-media .top-l{position:absolute;top:14px;left:14px;display:flex;gap:7px;flex-wrap:wrap}
.card-media .top-r{position:absolute;top:14px;right:14px}
.card-media .bot-l{position:absolute;bottom:14px;left:14px;right:14px;display:flex;gap:8px;align-items:flex-end;justify-content:space-between}
.card-body{padding:22px;display:flex;flex-direction:column;flex:1;gap:11px}
.card-foot{margin-top:auto;padding-top:16px;border-top:1px solid var(--borde);
  display:flex;align-items:center;justify-content:space-between;gap:14px}

/* Meta inline (duración, altitud, dificultad) */
.metas{display:flex;flex-wrap:wrap;gap:14px;font-size:.79rem;color:var(--tinta-50)}
.metas span{display:inline-flex;align-items:center;gap:6px}
.metas svg{width:15px;height:15px;opacity:.75;flex:none}

/* Precio */
.precio{display:flex;flex-direction:column;line-height:1.1}
.precio .desde{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-50);font-weight:700}
.precio .val{font-family:var(--f-display);font-size:1.32rem;font-weight:800;letter-spacing:-.03em;color:var(--bosque-700)}
.precio .val small{font-size:.62rem;font-weight:700;color:var(--tinta-50);letter-spacing:.06em}

/* Rating */
.rating{display:inline-flex;align-items:center;gap:6px;font-size:.82rem;font-weight:700}
.rating .st{color:var(--dorado);letter-spacing:1px}
.rating .n{color:var(--tinta-50);font-weight:500;font-size:.76rem}

/* --------------------------------------------------------------------------
   8. NAVEGACIÓN
   -------------------------------------------------------------------------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:120;
  transition:background .4s var(--e),box-shadow .4s var(--e),padding .4s var(--e),border-color .4s;
  padding:16px 0;border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(252,250,244,.86);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);
  border-bottom-color:var(--borde);padding:9px 0;box-shadow:0 4px 24px -12px rgba(22,36,27,.18);
}
.nav .wrap{display:flex;align-items:center;gap:26px}

.logo{display:flex;align-items:center;gap:11px;flex:none}
.logo-mark{width:42px;height:42px;flex:none;transition:transform .5s var(--e)}
.logo:hover .logo-mark{transform:rotate(-6deg) scale(1.06)}
.logo-txt b{display:block;font-family:var(--f-display);font-size:1.14rem;font-weight:800;letter-spacing:-.03em;line-height:1}
.logo-txt b i{font-style:normal;color:var(--musgo)}
.logo-txt span{display:block;font-size:.53rem;letter-spacing:.26em;text-transform:uppercase;color:var(--tinta-50);margin-top:3px;font-weight:600}

.nav-links{display:flex;gap:2px;margin-left:auto}
.nav-links a{
  font-size:.88rem;font-weight:600;color:var(--tinta-70);padding:9px 15px;border-radius:var(--r-full);
  transition:.28s var(--e);position:relative;
}
.nav-links a:hover{color:var(--tinta);background:rgba(27,58,38,.06)}
.nav-links a.is-active{color:var(--bosque-600)}
.nav-links a.is-active::after{
  content:"";position:absolute;left:15px;right:15px;bottom:3px;height:2px;background:var(--dorado);border-radius:2px;
}
.nav-act{display:flex;align-items:center;gap:9px;flex:none}

/* Nav sobre hero oscuro */
.nav:not(.is-stuck).over-dark .nav-links a{color:rgba(252,250,244,.82)}
.nav:not(.is-stuck).over-dark .nav-links a:hover{color:#fff;background:rgba(255,255,255,.12)}
.nav:not(.is-stuck).over-dark .logo-txt b{color:var(--hueso)}
.nav:not(.is-stuck).over-dark .logo-txt span{color:rgba(252,250,244,.6)}
.nav:not(.is-stuck).over-dark .ibtn{border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.12);color:#fff;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.nav:not(.is-stuck).over-dark .btn-ghost{border-color:rgba(255,255,255,.4);color:#fff}
.nav:not(.is-stuck).over-dark .logo-mark .mk-txt{fill:var(--hueso)}

.cart-btn{position:relative}
.cart-count{
  position:absolute;top:-4px;right:-4px;min-width:21px;height:21px;padding:0 6px;border-radius:var(--r-full);
  background:var(--terracota);color:#fff;font-size:11px;font-weight:800;display:grid;place-items:center;
  border:2px solid var(--hueso);transform:scale(0);transition:transform .45s var(--e);
}
.cart-count.is-on{transform:scale(1)}
.burger{display:none}
.burger span{display:block;width:18px;height:2px;background:currentColor;border-radius:2px;transition:.3s}
.burger span+span{margin-top:4px}

/* --------------------------------------------------------------------------
   9. REVEAL / ANIMACIÓN DE ENTRADA
   -------------------------------------------------------------------------- */
.rv{opacity:0;transform:translateY(30px);transition:opacity .85s var(--e),transform .85s var(--e)}
.rv.is-in{opacity:1;transform:none}
.rv[data-d="1"]{transition-delay:.08s}
.rv[data-d="2"]{transition-delay:.16s}
.rv[data-d="3"]{transition-delay:.24s}
.rv[data-d="4"]{transition-delay:.32s}
.rv[data-d="5"]{transition-delay:.40s}
.rv[data-d="6"]{transition-delay:.48s}
.rv[data-d="7"]{transition-delay:.56s}
.rv[data-d="8"]{transition-delay:.64s}

/* --------------------------------------------------------------------------
   10. CARRITO (drawer)
   -------------------------------------------------------------------------- */
.scrim{
  position:fixed;inset:0;background:rgba(11,26,17,.55);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);z-index:200;
  opacity:0;visibility:hidden;transition:opacity .45s var(--e),visibility .45s;
}
.scrim.is-on{opacity:1;visibility:visible}

.drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(438px,100vw);z-index:210;
  background:var(--hueso);border-left:1px solid var(--borde);display:flex;flex-direction:column;
  transform:translateX(102%);transition:transform .55s var(--e);box-shadow:var(--sh-4);
}
.drawer.is-on{transform:none}
.drawer-head{padding:22px 24px;border-bottom:1px solid var(--borde);display:flex;align-items:center;justify-content:space-between;gap:14px}
.drawer-head .t-3{margin-bottom:2px}
.drawer-body{flex:1;overflow-y:auto;padding:18px 20px}
.drawer-foot{padding:20px 24px;border-top:1px solid var(--borde);background:var(--crema)}

.cart-empty{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:14px;padding:40px 20px;color:var(--tinta-50)}
.cart-empty svg{width:76px;height:76px;opacity:.28}

.ci{
  display:flex;gap:14px;padding:14px;border:1px solid var(--borde);border-radius:var(--r-md);
  background:var(--papel);margin-bottom:11px;animation:ci-in .45s var(--e);
}
@keyframes ci-in{from{opacity:0;transform:translateX(24px)}}
.ci-th{width:62px;height:62px;border-radius:var(--r-sm);object-fit:cover;flex:none;background:var(--paramo)}
.ci-info{flex:1;min-width:0}
.ci-info h4{font-size:.9rem;font-weight:700;letter-spacing:-.02em;line-height:1.25;margin-bottom:3px}
.ci-info .cat{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-50);font-weight:700}
.ci-bot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px}
.qty{display:flex;align-items:center;gap:2px;border:1px solid var(--borde);border-radius:var(--r-full);padding:3px;background:var(--hueso)}
.qty button{width:26px;height:26px;border-radius:var(--r-full);display:grid;place-items:center;color:var(--tinta-70);transition:.25s;font-size:16px;line-height:1}
.qty button:hover{background:var(--paramo);color:var(--bosque-600)}
.qty span{min-width:24px;text-align:center;font-size:.84rem;font-weight:800}
.ci-price{font-weight:800;font-size:.95rem;font-family:var(--f-display);letter-spacing:-.02em}
.ci-rm{font-size:.72rem;color:var(--tinta-50);text-decoration:underline;transition:.25s}
.ci-rm:hover{color:var(--terracota)}

.sum-line{display:flex;justify-content:space-between;font-size:.88rem;color:var(--tinta-70);margin-bottom:9px}
.sum-line.total{
  font-family:var(--f-display);font-size:1.28rem;font-weight:800;color:var(--tinta);letter-spacing:-.03em;
  padding-top:13px;margin-top:6px;border-top:1px solid var(--borde-fuerte);
}
.trust{display:flex;justify-content:center;gap:18px;margin-top:14px;font-size:.7rem;color:var(--tinta-50)}
.trust span{display:inline-flex;align-items:center;gap:5px}
.trust svg{width:13px;height:13px}

/* --------------------------------------------------------------------------
   11. CHATBOT "KUMA"
   -------------------------------------------------------------------------- */
.kuma-fab{
  position:fixed;right:24px;bottom:24px;z-index:190;width:62px;height:62px;border-radius:var(--r-full);
  background:var(--g-bosque);display:grid;place-items:center;
  box-shadow:0 14px 38px -10px rgba(15,36,23,.75);transition:transform .45s var(--e);
}
.kuma-fab:hover{transform:scale(1.08) rotate(5deg)}
.kuma-fab svg{width:30px;height:30px}
.kuma-fab::before{
  content:"";position:absolute;inset:-5px;border-radius:var(--r-full);
  border:1.5px solid rgba(47,107,67,.5);animation:kuma-ring 2.8s ease-out infinite;
}
@keyframes kuma-ring{0%{transform:scale(.92);opacity:.9}100%{transform:scale(1.32);opacity:0}}
.kuma-fab .dot{position:absolute;top:0;right:0;width:15px;height:15px;border-radius:var(--r-full);
  background:var(--terracota);border:2.5px solid var(--hueso)}
.kuma-fab.is-hidden{transform:scale(0);pointer-events:none}

.kuma{
  position:fixed;right:24px;bottom:24px;z-index:195;
  width:min(400px,calc(100vw - 32px));height:min(628px,calc(100svh - 48px));
  background:var(--hueso);border:1px solid var(--borde);border-radius:var(--r-lg);
  display:flex;flex-direction:column;overflow:hidden;box-shadow:var(--sh-4);
  transform:translateY(24px) scale(.94);opacity:0;visibility:hidden;transform-origin:bottom right;
  transition:transform .5s var(--e),opacity .4s var(--e),visibility .5s;
}
.kuma.is-on{transform:none;opacity:1;visibility:visible}
.kuma-head{
  padding:16px 18px;display:flex;align-items:center;gap:12px;
  background:var(--g-bosque);color:var(--hueso);
}
.kuma-av{width:44px;height:44px;border-radius:var(--r-full);background:rgba(255,255,255,.14);
  display:grid;place-items:center;flex:none;position:relative;border:1px solid rgba(255,255,255,.2)}
.kuma-av svg{width:26px;height:26px}
.kuma-av::after{content:"";position:absolute;bottom:0;right:0;width:12px;height:12px;border-radius:var(--r-full);
  background:#4ADE80;border:2.5px solid #243310}
.kuma-head b{display:block;font-family:var(--f-display);font-size:.98rem;letter-spacing:-.02em;line-height:1.2}
.kuma-head small{font-size:.72rem;color:#8FD9A8}
.kuma-head .ibtn{margin-left:auto;border-color:rgba(255,255,255,.24);background:rgba(255,255,255,.1);color:#fff;width:36px;height:36px}
.kuma-head .ibtn:hover{background:rgba(255,255,255,.2)}

.kuma-msgs{flex:1;overflow-y:auto;padding:20px 18px;display:flex;flex-direction:column;gap:12px;background:var(--crema)}
.msg{max-width:86%;padding:12px 16px;border-radius:var(--r-md);font-size:.875rem;line-height:1.56;animation:msg-in .45s var(--e)}
@keyframes msg-in{from{opacity:0;transform:translateY(10px)}}
.msg-bot{background:var(--papel);border:1px solid var(--borde);border-bottom-left-radius:5px;align-self:flex-start;box-shadow:var(--sh-1)}
.msg-me{background:var(--bosque-600);color:var(--hueso);border-bottom-right-radius:5px;align-self:flex-end;font-weight:500}
.msg strong{color:var(--musgo);font-weight:700}
.msg-me strong{color:var(--hoja-luz)}
.msg ul{margin:9px 0 2px;display:flex;flex-direction:column;gap:6px}
.msg li{font-size:.83rem;color:var(--tinta-70);padding-left:16px;position:relative;line-height:1.45}
.msg li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;background:var(--dorado)}
.msg .m-price{font-family:var(--f-display);font-weight:800;color:var(--bosque-600)}

.typing{display:flex;gap:5px;padding:15px 18px;background:var(--papel);border:1px solid var(--borde);
  border-radius:var(--r-md);border-bottom-left-radius:5px;align-self:flex-start;width:fit-content}
.typing i{width:7px;height:7px;border-radius:50%;background:var(--tinta-30);animation:tp 1.3s infinite}
.typing i:nth-child(2){animation-delay:.16s}
.typing i:nth-child(3){animation-delay:.32s}
@keyframes tp{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-6px);opacity:1}}

.msg-acts{display:flex;gap:7px;margin-top:12px;flex-wrap:wrap}
.msg-acts button{
  font-size:.76rem;font-weight:700;padding:8px 14px;border-radius:var(--r-sm);
  background:var(--bosque-600);color:var(--hueso);transition:.3s var(--e);
}
.msg-acts button:hover{background:var(--musgo);transform:translateY(-2px)}
.msg-acts button.alt{background:transparent;border:1.5px solid var(--borde-fuerte);color:var(--tinta-70)}
.msg-acts button.alt:hover{border-color:var(--musgo);color:var(--musgo);background:transparent}

.kuma-qr{display:flex;gap:7px;flex-wrap:wrap;padding:12px 18px 4px;background:var(--crema)}
.kuma-qr button{
  font-size:.78rem;font-weight:600;padding:8px 15px;border-radius:var(--r-full);
  border:1.5px solid var(--borde-fuerte);color:var(--musgo);background:var(--papel);transition:.3s var(--e);
}
.kuma-qr button:hover{background:var(--paramo);border-color:var(--musgo);transform:translateY(-2px)}

.kuma-in{display:flex;gap:9px;padding:14px 14px 6px;border-top:1px solid var(--borde);background:var(--hueso)}
.kuma-nota{
  margin:0;padding:0 16px 12px;background:var(--hueso);
  font-size:.68rem;line-height:1.45;color:var(--tinta-50);text-align:center;
}
.kuma-nota a{color:var(--musgo);text-decoration:underline;text-underline-offset:2px}
.kuma-in input{
  flex:1;background:var(--crema);border:1.5px solid var(--borde);border-radius:var(--r-full);
  padding:12px 18px;font-size:.88rem;outline:none;transition:.3s;min-width:0;
}
.kuma-in input:focus{border-color:var(--musgo);background:var(--papel);box-shadow:0 0 0 3px rgba(47,107,67,.1)}
.kuma-in button{width:44px;height:44px;border-radius:var(--r-full);background:var(--bosque-600);
  display:grid;place-items:center;flex:none;transition:.3s var(--e);color:var(--hueso)}
.kuma-in button:hover{background:var(--musgo);transform:scale(1.07)}
.kuma-in button svg{width:19px;height:19px}

/* --------------------------------------------------------------------------
   12. TOAST
   -------------------------------------------------------------------------- */
.toast{
  position:fixed;left:50%;bottom:30px;transform:translate(-50%,150%);z-index:300;
  background:var(--bosque-700);color:var(--hueso);border-radius:var(--r-full);
  padding:13px 24px;font-size:.88rem;font-weight:600;display:flex;align-items:center;gap:11px;
  box-shadow:var(--sh-4);transition:transform .55s var(--e);max-width:calc(100vw - 32px);
}
.toast.is-on{transform:translate(-50%,0)}
.toast svg{width:18px;height:18px;color:#7BE0A0;flex:none}

/* --------------------------------------------------------------------------
   13. FOOTER
   -------------------------------------------------------------------------- */
.foot{background:var(--bosque-800);color:var(--hueso);padding:76px 0 30px;position:relative;overflow:hidden}
.foot::before{
  content:"";position:absolute;inset:0;opacity:.05;pointer-events:none;
  background:radial-gradient(70% 50% at 20% 0%,#7FA046,transparent 60%),radial-gradient(60% 50% at 90% 100%,#F2B10A,transparent 60%);
}
.foot-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.2fr;gap:44px;margin-bottom:52px;position:relative}
.foot h5{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--hoja-luz);margin-bottom:16px;font-weight:700}
.foot-grid a{display:block;color:rgba(252,250,244,.7);font-size:.88rem;padding:5px 0;transition:.25s var(--e)}
.foot-grid a:hover{color:var(--dorado-luz);transform:translateX(4px)}
.foot-bot{display:flex;justify-content:space-between;gap:20px;padding-top:26px;
  border-top:1px solid rgba(252,250,244,.12);font-size:.78rem;color:rgba(252,250,244,.5);flex-wrap:wrap;position:relative}
.foot .logo-txt b{color:var(--hueso)}
.foot .logo-txt b i{color:var(--hoja-luz)}
.foot .logo-txt span{color:rgba(252,250,244,.5)}

/* --------------------------------------------------------------------------
   14. UTILIDADES
   -------------------------------------------------------------------------- */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.nowrap{white-space:nowrap}
.center{text-align:center}
.mt-a{margin-top:auto}
.hr{height:1px;background:var(--borde);border:0;margin:0}
.dot-sep{color:var(--tinta-30);margin:0 8px}

/* Grano sutil sobre fotos grandes (textura editorial) */
.grain::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.035;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   15. RESPONSIVE
   -------------------------------------------------------------------------- */
@media(max-width:1080px){
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:860px){
  .nav-links{display:none}
  .burger{display:grid;place-items:center}
  .nav-act{margin-left:auto}
}
@media(max-width:560px){
  /* En móvil la barra conserva marca, carrito y menú. El resto de acciones
     pasa al menú desplegable para no comprimir el área táctil. */
  .hide-sm{display:none!important}
}
@media(max-width:480px){
  /* En pantallas estrechas la barra debe caber sin comprimir el CTA:
     la firma de marca se reduce a la marca gráfica y el nombre. */
  .nav .wrap{gap:12px}
  .logo-mark{width:36px;height:36px}
  .logo-txt span{display:none}
  .logo-txt b{font-size:1.02rem}
}
@media(max-width:640px){
  :root{--gutter:18px}
  .foot-grid{grid-template-columns:1fr;gap:32px}
  .kuma{right:8px;bottom:8px;width:calc(100vw - 16px);height:calc(100svh - 16px);border-radius:var(--r-md)}
  .kuma-fab{right:16px;bottom:16px;width:56px;height:56px}
  .drawer{width:100vw}
  .toast{bottom:88px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
}


/* =============================================================================
   ESTILOS DE PAGINA (portal)
   ============================================================================= */

/* ==========================================================================
   MOCKUP 1 · EL PORTAL — descubrimiento, catálogo, mapa y pasaporte
   ========================================================================== */

/* ---------- HERO ---------- */
.hero{position:relative;padding:calc(var(--nav-h) + 46px) 0 0}
.hero-bg{position:absolute;inset:0;z-index:-2;overflow:hidden;background:
  radial-gradient(110% 70% at 78% 8%,rgba(220,232,208,.85),transparent 62%),
  radial-gradient(80% 60% at 8% 92%,rgba(233,196,106,.20),transparent 60%),
  linear-gradient(180deg,var(--hueso),var(--crema));}
.hero-bg img,.hero-bg video{position:absolute;right:-8%;top:-14%;width:74%;opacity:.10;filter:blur(3px) saturate(.85);transform:scale(1.12)}
.hero-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(30px,5vw,72px);align-items:center;padding-bottom:clamp(40px,6vw,80px)}

.hero h1{margin:20px 0 20px}
.hero h1 .l{display:block;overflow:hidden}
.hero h1 .l i{display:block;font-style:normal;transform:translateY(104%);animation:rise 1.05s var(--e) forwards}
.hero h1 .l:nth-child(2) i{animation-delay:.10s}
.hero h1 .l:nth-child(3) i{animation-delay:.20s}
@keyframes rise{to{transform:none}}
.hero h1 em{font-family:var(--f-script);font-style:normal;color:var(--terracota);letter-spacing:0;
  font-size:.94em;display:inline-block;padding-right:.1em}
.hero-facts{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}

/* Collage */
.collage{position:relative;height:clamp(390px,44vw,540px)}
.collage figure{position:absolute;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-3);
  border:5px solid var(--papel);background:var(--paramo)}
.collage figure img,.collage figure video{width:100%;height:100%;object-fit:cover}
.collage .c1{width:56%;height:66%;left:0;top:4%;animation:float 9s ease-in-out infinite}
.collage .c2{width:44%;height:46%;right:2%;top:0;animation:float 11s ease-in-out infinite reverse}
.collage .c3{width:50%;height:44%;right:6%;bottom:0;animation:float 10s ease-in-out infinite .6s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.collage .tagfloat{
  position:absolute;background:var(--papel);border-radius:var(--r-full);padding:9px 16px;
  box-shadow:var(--sh-2);font-size:.78rem;font-weight:700;display:flex;align-items:center;gap:8px;z-index:3;
}
.collage .tagfloat svg{width:15px;height:15px;color:var(--musgo)}
.collage .t1{left:36%;top:2%}
.collage .t2{left:2%;bottom:12%}

/* ---------- BUSCADOR ---------- */
.searchwrap{position:relative;z-index:6;margin-bottom:-58px}
.search{
  background:var(--papel);border:1px solid var(--borde);border-radius:var(--r-xl);
  box-shadow:var(--sh-3);padding:14px;display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1.1fr auto;gap:6px;align-items:center;
}
.sfield{padding:12px 18px;border-radius:var(--r-lg);transition:background .3s;cursor:pointer;position:relative}
.sfield:hover{background:var(--crema)}
.sfield+.sfield{box-shadow:-1px 0 0 var(--borde)}
.sfield label{display:block;font-size:.66rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-50);margin-bottom:3px}
.sfield input,.sfield select{
  width:100%;border:0;background:transparent;outline:none;font-size:.94rem;font-weight:600;color:var(--tinta);
  padding:0;cursor:pointer;appearance:none;
}
.sfield input::placeholder{color:var(--tinta-30);font-weight:500}
.search .btn{height:100%;min-height:58px;padding-inline:30px}
.sugg{
  position:absolute;top:calc(100% + 10px);left:0;width:min(420px,86vw);background:var(--papel);
  border:1px solid var(--borde);border-radius:var(--r-md);box-shadow:var(--sh-3);padding:8px;z-index:20;
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:.3s var(--e);
}
.sugg.is-on{opacity:1;visibility:visible;transform:none}
.sugg b{display:block;font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-50);padding:10px 12px 6px}
.sugg button{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border-radius:var(--r-sm);
  text-align:left;transition:.2s;font-size:.88rem}
.sugg button:hover{background:var(--crema)}
.sugg button img,.sugg button video{width:38px;height:38px;border-radius:9px;object-fit:cover;flex:none}
.sugg button span{display:block;font-size:.72rem;color:var(--tinta-50);font-weight:500}
.sugg button strong{font-weight:700;letter-spacing:-.01em}

/* ---------- BANDA DE CONFIANZA ---------- */
.trustband{background:var(--bosque-800);color:var(--hueso);padding:98px 0 34px}
.trustband .row{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.tb{display:flex;gap:14px;align-items:flex-start}
.tb svg{width:24px;height:24px;color:var(--hoja-luz);flex:none;margin-top:2px}
.tb b{display:block;font-family:var(--f-display);font-size:1.3rem;letter-spacing:-.03em;line-height:1.1}
.tb span{font-size:.8rem;color:rgba(252,250,244,.62);line-height:1.4;display:block;margin-top:3px}

/* ---------- MODALIDADES ---------- */
.modos{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:38px}
.modo{
  border:1.5px solid var(--borde);border-radius:var(--r-lg);padding:26px 22px;background:var(--papel);
  text-align:left;transition:.4s var(--e);cursor:pointer;position:relative;overflow:hidden;
}
.modo::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--g-dorado);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--e)}
.modo:hover{transform:translateY(-6px);box-shadow:var(--sh-2);border-color:var(--borde-fuerte)}
.modo.is-on{border-color:var(--bosque-600);background:var(--paramo)}
.modo.is-on::after{transform:scaleX(1)}
.modo .ic{width:52px;height:52px;border-radius:16px;background:var(--paramo);display:grid;place-items:center;margin-bottom:16px;transition:.4s var(--e)}
.modo .ic svg{width:26px;height:26px;color:var(--bosque-600)}
.modo.is-on .ic{background:var(--bosque-600)}
.modo.is-on .ic svg{color:var(--hueso)}
.modo b{display:block;font-family:var(--f-display);font-size:1.08rem;letter-spacing:-.025em;margin-bottom:5px}
.modo span{font-size:.82rem;color:var(--tinta-70);line-height:1.45;display:block}
.modo .n{position:absolute;top:20px;right:20px;font-size:.7rem;font-weight:800;color:var(--tinta-30)}

/* ---------- Tarjeta de modalidad con foto ----------
   La foto ocupa la tarjeta entera y el texto va encima, sobre un degradado que
   nace del borde inferior. Sin degradado el nombre desaparece en cuanto la foto
   tiene cielo claro, que en la montaña es casi siempre. */
.modo.con-foto{
  /* 292px, el mismo alto que el kiosco. Con la foto, el icono, el titulo,
     la descripcion y el precio, 230 apretaba el texto contra el borde. */
  padding:0;border:0;min-height:292px;display:flex;align-items:flex-end;
  background:var(--bosque-800,#12301C);
}
.modo-img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .7s var(--e);
}
.modo.con-foto:hover .modo-img{transform:scale(1.06)}
.modo.con-foto::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,
    rgba(10,26,15,.86) 0%, rgba(10,26,15,.5) 38%, rgba(10,26,15,.06) 72%);
}
.modo.con-foto .modo-txt{position:relative;z-index:2;padding:22px;display:block;width:100%}
.modo.con-foto b{color:var(--hueso);font-size:1.14rem;margin-bottom:4px}
.modo.con-foto .modo-txt span.d{color:rgba(252,250,244,.82);font-size:.82rem;line-height:1.45;display:block}

/* El icono, también sobre la foto.
   Antes solo salía en la variante SIN imagen. En el kiosco va siempre y ahí se
   ve por qué: la silueta se reconoce de lejos, antes que la palabra. La misma
   tarjeta en la web tiene que verse igual, que es lo que el cliente compara. */
.modo.con-foto .ic{
  width:46px;height:46px;border-radius:14px;margin-bottom:14px;
  background:rgba(252,250,244,.16);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  display:grid;place-items:center;
}
.modo.con-foto .ic svg{width:24px;height:24px;color:var(--hueso)}

/* Desde cuánto arranca esa modalidad. Es lo primero que pregunta cualquiera, y
   tenerlo aquí ahorra entrar a las cuatro tarjetas para compararlas. */
.modo-precio{display:block;margin-top:10px;font-size:.76rem;color:rgba(252,250,244,.72)}
.modo-precio .v{
  font-family:var(--f-display);font-size:1.02rem;font-weight:800;
  letter-spacing:-.02em;color:var(--dorado-luz);margin-left:3px;
}
.modo.con-foto .n{
  z-index:2;color:var(--hueso);background:rgba(10,26,15,.42);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);border-radius:99px;padding:4px 11px;top:16px;right:16px;
}
.modo.con-foto:hover{border-color:transparent}
.modo.con-foto.is-on{outline:2px solid var(--dorado);outline-offset:-2px}

/* Sin foto la tarjeta es la de siempre; solo se agrupa el texto. */
.modo .modo-txt{display:block}

@media(max-width:900px){
  .modo.con-foto{min-height:190px}
}
/* ---------- CATÁLOGO ---------- */
.filtros{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:28px}
.filtros .sep{width:1px;height:26px;background:var(--borde);margin-inline:6px}
.cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card.is-hidden{display:none}

/* Paginador del catálogo. La regla con [hidden] va explícita porque la de
   display de aquí abajo le ganaría a la del navegador y el bloque se vería
   aunque sobre una sola página. */
.paginas{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:34px;flex-wrap:wrap}
.paginas[hidden]{display:none}
.pag-b{
  min-width:42px;height:42px;padding:0 13px;border-radius:12px;
  border:1px solid var(--borde);background:var(--hueso);color:var(--tinta);
  font:inherit;font-size:.94rem;font-weight:700;font-variant-numeric:tabular-nums;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  cursor:pointer;transition:.2s var(--e);
}
.pag-b:hover:not(:disabled){border-color:var(--dorado);color:var(--musgo);transform:translateY(-1px)}
.pag-b:focus-visible{outline:2px solid var(--dorado);outline-offset:2px}
.pag-b[aria-current="true"]{background:var(--musgo);border-color:var(--musgo);color:var(--hueso)}
.pag-b:disabled{opacity:.38;cursor:default}
.pag-b svg{width:15px;height:15px}
.pag-info{font-size:.82rem;color:var(--tinta-50);margin-left:6px}
@media(max-width:620px){
  .pag-info{width:100%;text-align:center;margin:6px 0 0}
}
.dif{display:inline-flex;gap:3px;align-items:center}
.dif i{width:5px;height:5px;border-radius:50%;background:var(--borde-fuerte)}
.dif i.on{background:var(--terracota)}
.card-media .insignia{
  position:absolute;left:0;bottom:0;right:0;padding:10px 14px;background:linear-gradient(0deg,rgba(11,26,17,.86),transparent);
  color:#fff;font-size:.72rem;font-weight:700;display:flex;align-items:center;gap:7px;
}
.card-media .insignia svg{width:14px;height:14px;color:var(--dorado-luz)}
.add-btn{display:inline-flex;align-items:center;gap:8px;padding:11px 20px;border-radius:var(--r-full);
  background:var(--bosque-600);color:var(--hueso);font-weight:700;font-size:.84rem;transition:.32s var(--e)}
.add-btn:hover{background:var(--musgo);transform:scale(1.04)}
.add-btn.done{background:var(--ok)}
/* La tarjeta que no vende —el restaurante, que vende platos; el hostal, que
   dice «desde»— lleva un enlace a su ficha en lugar del botón de comprar. Se ve
   distinto a propósito: si fuera el mismo botón verde seguiría prometiendo una
   compra que ahí no se puede hacer. */
.add-btn-ver{background:transparent;color:var(--tinta-70);
  border:1.5px solid var(--borde-fuerte)}
.add-btn-ver:hover{background:var(--paramo);color:var(--tinta);border-color:var(--musgo);transform:none}
.add-btn svg{width:16px;height:16px;flex:none}
/* El rótulo no se parte en dos renglones. «Ver la carta» caía como «Ver la /
   carta» y dejaba el botón con el doble de alto que el de al lado; en ruso y en
   portugués, que son más largos, se vería peor. */
.add-btn{white-space:nowrap}
.card-foot .precio{min-width:0}
.no-res{grid-column:1/-1;text-align:center;padding:60px 20px;color:var(--tinta-50)}

/* ---------- MAPA ---------- */
.mapa{background:var(--bosque-800);color:var(--hueso);position:relative;overflow:hidden}
.mapa .eyebrow{color:var(--hoja-luz)}
.mapa h2{color:var(--hueso)}
.mapa-grid{display:grid;grid-template-columns:1.45fr .55fr;gap:30px;margin-top:40px;align-items:start}
.mapa-canvas{position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid rgba(252,250,244,.14);
  background:linear-gradient(160deg,#123020,#101806);aspect-ratio:16/11}
.mapa-canvas svg{width:100%;height:100%;display:block}

/* ---- Mapa real (Leaflet) ----
   El mapa trae sus propios colores, asi que aqui solo se ajusta lo que tiene
   que encajar con la seccion oscura: los controles, el credito y las marcas. */
#mapaReal{width:100%;height:100%;background:#101806}
#mapaReal .leaflet-container{font-family:var(--f-body)}
#mapaReal .leaflet-control-attribution{
  background:rgba(16,24,6,.78);color:rgba(252,250,244,.66);font-size:.66rem;padding:3px 8px}
#mapaReal .leaflet-control-attribution a{color:var(--dorado-luz)}
/* Red de seguridad: la regla global img,svg,video{display:block} deja los
   SVG sin tamano en linea y cualquiera que venga dentro de un control del
   mapa se estira hasta ocupar media esquina. Aqui se acota. */
#mapaReal .leaflet-control svg{display:inline-block;width:auto;height:1em;vertical-align:-.15em}
#mapaReal .leaflet-bar a{
  background:rgba(16,24,6,.9);color:var(--hueso);border-bottom-color:rgba(252,250,244,.16)}
#mapaReal .leaflet-bar a:hover{background:var(--bosque-600)}
#mapaReal .leaflet-control-layers{
  background:rgba(16,24,6,.92);color:var(--hueso);border:1px solid rgba(252,250,244,.18)}
#mapaReal .leaflet-control-layers-toggle{filter:invert(1) hue-rotate(180deg)}

/* Marca de sitio: una foto redonda en vez de un punto, para reconocer el
   lugar de un vistazo. El nombre va al lado, con sombra para que se lea
   tanto sobre el verde del bosque como sobre el gris de la roca. */
.hito-foto{cursor:pointer;white-space:nowrap;background:none;border:0}
.hito-foto img,.hito-foto video{
  width:52px;height:52px;border-radius:var(--r-full);object-fit:cover;display:block;
  border:3px solid var(--dorado-luz);
  box-shadow:0 4px 14px -4px rgba(16,24,6,.75),0 0 0 2px rgba(16,24,6,.35);
  transition:transform .3s var(--e),border-color .3s var(--e)}
/* El nombre sale al pasar por encima o al seleccionar el sitio. Con los diez
   nombres siempre visibles se pisaban unos con otros: en el mapa caben las
   fotos, pero no diez etiquetas. La foto es la que identifica el lugar. */
.hito-foto span{
  position:absolute;left:58px;top:50%;transform:translateY(-50%) translateX(-4px);
  font-size:.74rem;font-weight:700;color:#fff;
  padding:3px 9px;border-radius:100px;
  background:rgba(16,24,6,.88);border:1px solid rgba(252,250,244,.16);
  opacity:0;pointer-events:none;
  transition:opacity .22s var(--e),transform .22s var(--e)}
.hito-foto:hover span,.hito-foto.is-on span{
  opacity:1;transform:translateY(-50%) translateX(0)}
.hito-foto:hover img,.hito-foto.is-on img,.hito-foto:hover img,.hito-foto.is-on video{
  transform:scale(1.12);border-color:var(--terracota-luz)}
.hito-foto.is-on span{color:var(--dorado-luz)}

/* Ficha emergente sobre el mapa */
.hito-popup .leaflet-popup-content-wrapper{
  background:var(--bosque-700,#12240F);color:var(--hueso);
  border:1px solid rgba(252,250,244,.16);border-radius:var(--r-md);
  box-shadow:0 18px 40px -14px rgba(0,0,0,.7)}
.hito-popup .leaflet-popup-content{margin:0;padding:0;width:auto !important}
.hito-popup .leaflet-popup-tip{background:var(--bosque-700,#12240F)}
.hito-popup .leaflet-popup-close-button{color:rgba(252,250,244,.7);padding:6px 8px 0 0}
.hito-popup .leaflet-popup-close-button:hover{color:var(--hueso)}
.hito-pop{padding:0 0 14px}
.hito-pop img,.hito-pop video{
  width:100%;aspect-ratio:16/9;object-fit:cover;display:block;
  border-radius:var(--r-md) var(--r-md) 0 0;margin-bottom:12px}
.hito-pop h4{
  font-family:var(--f-display);font-size:1rem;line-height:1.2;
  color:var(--hueso);margin:0 14px 6px}
.hito-pop p{
  font-size:.8rem;line-height:1.55;color:rgba(252,250,244,.72);
  margin:0 14px 12px;white-space:normal}
.hito-pop .btn{margin:0 14px;width:calc(100% - 28px)}
.hito-pop p.aprox{
  font-size:.72rem;color:var(--dorado-luz);opacity:.85;
  border-left:2px solid rgba(233,196,106,.5);padding-left:8px;margin-bottom:12px}
/* Un mismo sitio puede estar en varias rutas: se avisa antes de los botones,
   para que se entienda por que hay mas de uno. */
.hito-pop p.hito-rutas{
  font-size:.74rem;font-weight:700;color:var(--hoja-luz,#8FD9A8);margin-bottom:10px}
.hito-pop .btn + .btn{margin-top:8px}

/* Sitio con ubicación deducida, no confirmada: borde punteado para que se
   note a simple vista que ese punto todavía puede moverse. */
.hito-foto.es-aprox img,.hito-foto.es-aprox video{border-style:dashed;border-color:rgba(233,196,106,.75)}
.hito-foto.es-aprox span::after{content:" (aprox.)";opacity:.7;font-weight:500}

/* Contador de los hitos que este punto esconde mientras el mapa está lejos.
   Solo se ve cuando hay algo escondido: al acercarse, las marcas salen todas
   y el contador sobra. */
.hito-mas{
  position:absolute;right:-6px;bottom:-4px;z-index:2;
  display:none;place-items:center;
  min-width:23px;height:23px;padding:0 6px;border-radius:100px;
  background:var(--terracota,#C2603A);color:#fff;
  font-size:.7rem;font-weight:800;line-height:1;
  border:2px solid var(--hueso,#FCFAF4);
  box-shadow:0 3px 10px -2px rgba(16,24,6,.7);
  cursor:zoom-in}
.hito-foto.tiene-mas .hito-mas{display:grid}
.hito-mas:hover{background:var(--terracota-luz,#E9744A)}

.mapa-nojs{padding:24px;color:rgba(252,250,244,.72);font-size:.9rem}
.mapa-pend{
  margin-top:14px;font-size:.78rem;line-height:1.6;color:rgba(252,250,244,.52);
  border-left:2px solid rgba(233,196,106,.4);padding-left:12px}
.mapa-pend b{color:rgba(252,250,244,.78)}
.mapa-info{background:rgba(252,250,244,.05);border:1px solid rgba(252,250,244,.14);border-radius:var(--r-lg);
  padding:24px;position:sticky;top:100px}
.mapa-info img,.mapa-info video{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:var(--r-md);margin-bottom:16px}
.mapa-info h3{color:var(--hueso);margin-bottom:8px}
.mapa-info p{font-size:.87rem;color:rgba(252,250,244,.72);line-height:1.6;margin-bottom:16px}
.mapa-info .metas{color:rgba(252,250,244,.55)}
.mapa-info .pill-dorado{background:rgba(233,196,106,.14);color:var(--dorado-luz);border-color:rgba(233,196,106,.42)}
.mapa-leg{display:flex;gap:16px;flex-wrap:wrap;margin-top:18px;font-size:.76rem;color:rgba(252,250,244,.55)}
.mapa-leg span{display:inline-flex;align-items:center;gap:7px}
.mapa-leg i{width:9px;height:9px;border-radius:50%;display:block}

/* ---------- PASAPORTE ---------- */
.pass-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(30px,5vw,64px);align-items:center}
.passport{
  background:linear-gradient(150deg,#46601E,#101806);border-radius:var(--r-lg);padding:34px;color:var(--hueso);
  box-shadow:var(--sh-4);position:relative;overflow:hidden;transform:rotate(-2deg);transition:.6s var(--e);
}
.passport:hover{transform:rotate(0) translateY(-6px)}
.passport::before{content:"";position:absolute;inset:14px;border:1px solid rgba(233,196,106,.28);border-radius:var(--r-md);pointer-events:none}
.passport .pnum{font-size:.7rem;letter-spacing:.24em;color:var(--dorado-luz);text-transform:uppercase}
.passport h3{color:var(--hueso);font-size:1.5rem;margin:8px 0 4px}
.passport .psub{font-size:.8rem;color:rgba(252,250,244,.6);margin-bottom:26px}
.sellos{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:24px}
.sello{aspect-ratio:1;border-radius:50%;border:1.5px dashed rgba(252,250,244,.24);display:grid;place-items:center;
  font-size:.62rem;text-align:center;color:rgba(252,250,244,.4);padding:6px;line-height:1.2;font-weight:600}
.sello.on{border-style:solid;border-color:var(--dorado);background:rgba(233,196,106,.14);color:var(--dorado-luz)}
.sello.on svg{width:18px;height:18px}
.pbar{height:6px;border-radius:6px;background:rgba(252,250,244,.14);overflow:hidden}
.pbar i{display:block;height:100%;width:37.5%;background:var(--g-dorado);border-radius:6px}
.pass-benefits{display:flex;flex-direction:column;gap:14px;margin-top:28px}
.pb{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border:1px solid var(--borde);border-radius:var(--r-md);background:var(--papel);transition:.35s var(--e)}
.pb:hover{border-color:var(--dorado);transform:translateX(5px)}
.pb .num{width:34px;height:34px;border-radius:50%;background:var(--paramo);display:grid;place-items:center;
  font-weight:800;font-size:.82rem;color:var(--bosque-600);flex:none}
.pb b{display:block;font-size:.94rem;letter-spacing:-.02em;margin-bottom:2px}
.pb span{font-size:.83rem;color:var(--tinta-70)}

/* ---------- ECOSISTEMA ---------- */
.eco-tabs{display:flex;gap:8px;margin-bottom:26px}
.eco-panel{display:none}
.eco-panel.is-on{display:grid}
/* Las columnas se crean según lo que haya, con un ancho máximo. Antes eran tres
   fijas: con una sola tarjeta —el hostal es uno y el restaurante también— se
   quedaba encogida en un tercio y los otros dos tercios vacíos. */
.eco-grid{grid-template-columns:repeat(auto-fit,minmax(290px,420px));gap:20px;justify-content:start}
.eco-card{display:flex;gap:16px;padding:16px;border:1px solid var(--borde);border-radius:var(--r-lg);background:var(--papel);transition:.4s var(--e)}
.eco-card:hover{box-shadow:var(--sh-2);transform:translateY(-4px)}
.eco-card img,.eco-card video{width:96px;height:96px;border-radius:var(--r-md);object-fit:cover;flex:none}
.eco-card .b{flex:1;min-width:0;display:flex;flex-direction:column}
.eco-card h4{font-size:1rem;letter-spacing:-.02em;margin-bottom:3px}
.eco-card .servicios{display:flex;flex-wrap:wrap;gap:5px;margin:8px 0 10px}
.eco-card .servicios b{font-size:.68rem;font-weight:600;color:var(--tinta-70);background:var(--crema);
  border:1px solid var(--borde);padding:3px 8px;border-radius:6px}

/* ---------- AGENDA ---------- */
.agenda{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.ag{border:1px solid var(--borde);border-radius:var(--r-lg);padding:22px;background:var(--papel);
  transition:.4s var(--e);display:flex;flex-direction:column;gap:12px}
.ag:hover{border-color:var(--bosque-600);transform:translateY(-5px);box-shadow:var(--sh-2)}
.ag .f{font-family:var(--f-display);font-size:1.5rem;font-weight:800;letter-spacing:-.03em;color:var(--bosque-600);line-height:1}
.ag .f span{display:block;font-family:var(--f-body);font-size:.72rem;font-weight:600;color:var(--tinta-50);letter-spacing:.1em;text-transform:uppercase;margin-top:5px}
.ag h4{font-size:1rem;letter-spacing:-.02em;line-height:1.25}
.ag .cupos{font-size:.76rem;color:var(--terracota);font-weight:700}

/* ---------- OFICINA / QR ---------- */

/* ---------- CTA FINAL ---------- */
.cta{position:relative;overflow:hidden;background:var(--bosque-900);color:var(--hueso);text-align:center}
.cta img,.cta video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.32}
.cta .veil{position:absolute;inset:0;background:radial-gradient(70% 90% at 50% 50%,rgba(11,26,17,.5),rgba(11,26,17,.94))}
.cta .inner{position:relative;z-index:2}
.cta h2{color:var(--hueso);margin-bottom:16px}
.cta .lead{margin:0 auto 32px;color:rgba(252,250,244,.78)}
.cta .btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ---------- RESPONSIVE ---------- */
@media(max-width:1080px){
  .hero-grid{grid-template-columns:1fr;gap:36px}
  .collage{height:400px;max-width:560px}
  .search{grid-template-columns:1fr 1fr;gap:8px}
  .sfield+.sfield{box-shadow:none}
  .search .btn{grid-column:1/-1}
  .trustband .row{grid-template-columns:1fr 1fr;gap:28px}
  .modos{grid-template-columns:1fr 1fr}
  .cat-grid{grid-template-columns:1fr 1fr}
  .mapa-grid{grid-template-columns:1fr}
  /* En una columna el mapa queda muy bajito con la proporcion 16/11 y las
     fotos de los sitios se pisan. Se le da altura fija. */
  .mapa-canvas{aspect-ratio:auto;height:min(72svh,460px)}
  .hito-foto img,.hito-foto video{width:44px;height:44px}
  .hito-foto span{left:52px;font-size:.7rem}
  .mapa-info{position:static}
  .pass-grid{grid-template-columns:1fr}
  .eco-grid{grid-template-columns:1fr}
  .agenda{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .search{grid-template-columns:1fr}
  .modos,.cat-grid,.agenda{grid-template-columns:1fr}
  .trustband .row{grid-template-columns:1fr}
  .collage{height:330px}
  .sellos{grid-template-columns:repeat(4,1fr);gap:8px}
}


/* =============================================================================
   AÑADIDOS DE PRODUCCIÓN
   Menú móvil, formulario de pedido y botón de WhatsApp.
   ============================================================================= */

/* --- Botón WhatsApp --- */
.btn-wa{background:#25D366;color:#04331A;box-shadow:0 8px 24px -10px rgba(37,211,102,.85)}
.btn-wa:hover{background:#1FBF5B;box-shadow:0 16px 34px -12px rgba(37,211,102,1)}
.btn-wa svg{width:18px;height:18px;stroke-width:1.8}

/* --- Menú móvil --- */
.nav-movil{
  display:none;flex-direction:column;gap:2px;padding:10px var(--gutter) 18px;
  background:rgba(252,250,244,.98);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-bottom:1px solid var(--borde);
}
.nav-movil.is-on{display:flex}
.nav-movil a{padding:13px 4px;font-weight:600;font-size:.98rem;border-bottom:1px solid var(--borde)}
.nav-movil a:last-of-type{border-bottom:0}
.nav-movil .btn{border-bottom:0}
.burger.is-on span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger.is-on span:nth-child(2){opacity:0}
.burger.is-on span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* --- Formulario dentro del carrito --- */
.co-campos{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}
/* Sin esto el formulario se ve en el paso del plan: un display: propio le gana
   siempre a la regla del navegador para [hidden]. Es el mismo fallo que dejó
   abierto el aviso de pico y placa. */
.co-campos[hidden]{display:none}
.co-fila{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.co-f label{
  display:block;font-size:.64rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:var(--tinta-50);margin-bottom:5px;
}
.co-f input,.co-f select,.co-f textarea{
  width:100%;border:1.5px solid var(--borde);border-radius:12px;padding:11px 14px;
  font:inherit;font-size:.92rem;background:var(--papel);outline:none;transition:.25s;resize:vertical;
}
.co-f input:focus,.co-f select:focus,.co-f textarea:focus{
  border-color:var(--musgo);box-shadow:0 0 0 3px rgba(47,107,67,.1);
}
/* Por que pedimos el correo. Sin explicarlo, un campo obligatorio mas parece
   un peaje; dicho asi, es la puerta del pasaporte. */
.co-ayuda{
  display:block;margin-top:5px;font-size:.74rem;line-height:1.45;
  color:var(--tinta-50);text-transform:none;letter-spacing:0;font-weight:500;
}
/* Consentimiento de correo. Va desmarcado y se puede enviar el plan sin el:
   marcarlo por defecto invalidaria el consentimiento. */
.co-check{
  display:flex;gap:10px;align-items:flex-start;margin-top:14px;cursor:pointer;
  font-size:.8rem;line-height:1.5;color:var(--tinta-70,var(--tinta-50));
}
.co-check input{
  flex:none;width:17px;height:17px;margin-top:2px;accent-color:var(--musgo);cursor:pointer;
}
.co-check:hover{color:var(--tinta)}
/* El pie solo se come media pantalla cuando está el formulario. En el paso del
   plan lleva el total y un botón: si conserva el 72 % de alto máximo, la lista
   de lo que se lleva —que es lo que se vino a ver— queda arrinconada arriba. */
.drawer-foot{overflow-y:auto}
/* Sin la lista arriba, el pie ES la pantalla: se le deja todo el alto y que se
   desplace él, en vez de recortarlo a media pantalla como cuando compartía
   sitio con el plan. */
.drawer.en-datos .drawer-foot{max-height:none;flex:1}

/* En el paso de los datos el plan desaparece: ya lo revisó y le dio Continuar.
   Dejarlo encogido arriba solo robaba pantalla al formulario y obligaba a
   desplazarse otra vez. El total sigue abajo, que es lo único que hace falta
   recordar mientras escribe. */
.drawer.en-datos .drawer-body{display:none}
.drawer-body{min-height:120px}


.btn-volver{
  display:block;width:100%;margin-top:12px;padding:10px;border:0;background:none;
  font:inherit;font-size:.88rem;font-weight:600;color:var(--tinta-50);
  cursor:pointer;border-radius:10px;transition:.2s var(--e);
}
.btn-volver:hover{color:var(--musgo);background:var(--hueso)}
.btn-volver:focus-visible{outline:2px solid var(--dorado);outline-offset:2px}

/* --- Ficha de experiencia --- */
.ficha-hero{position:relative;aspect-ratio:21/9;overflow:hidden;background:var(--paramo);min-height:280px}
.ficha-hero img,.ficha-hero video{width:100%;height:100%;object-fit:cover}
.ficha-hero .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,26,17,.42),transparent 55%)}
.ficha-volver{
  position:absolute;top:calc(var(--nav-h) + 12px);left:var(--gutter);z-index:3;
  background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:var(--r-full);
  padding:9px 17px;font-size:.85rem;font-weight:800;display:inline-flex;align-items:center;gap:8px;
}
.ficha-volver svg{width:15px;height:15px;transform:rotate(180deg)}
.ficha-grid{display:grid;grid-template-columns:1fr 380px;gap:44px;align-items:start;padding-top:34px}
.ficha-res{position:sticky;top:100px}
.ficha-gal{display:flex;gap:9px;overflow-x:auto;padding-bottom:6px}
.ficha-gal img,.ficha-gal video{
  width:150px;height:108px;object-fit:cover;border-radius:14px;flex:none;cursor:pointer;
  border:2px solid transparent;transition:.3s var(--e);
}
.ficha-gal img:hover,.ficha-gal img.is-on{border-color:var(--bosque-600);transform:translateY(-3px)}

/* La miniatura es un botón: se le quita la piel de botón y se le deja la de la
   foto. El foco SÍ se ve, y con holgura, porque es la única pista de por dónde
   va quien navega con el teclado. */
.ficha-gal-b{
  padding:0;border:0;background:none;line-height:0;flex:none;cursor:zoom-in;
  border-radius:14px;
}
.ficha-gal-b:focus-visible{outline:3px solid var(--bosque-600);outline-offset:3px}
.ficha-gal-b:hover img,.ficha-gal-b:hover video,
.ficha-gal-b.is-on img,.ficha-gal-b.is-on video{
  border-color:var(--bosque-600);transform:translateY(-3px);
}

/* =============================================================================
   VISOR DE LA GALERÍA
   Pantalla completa, fondo oscuro y la foto lo más grande que quepa. Nada más:
   quien lo abre viene a mirar una foto, no a leer una interfaz.
   ========================================================================== */
.visor{
  position:fixed;inset:0;z-index:1200;
  display:flex;align-items:center;justify-content:center;
  background:rgba(11,18,13,.94);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  padding:clamp(12px,4vw,48px);
}
.visor[hidden]{display:none}

.visor-lienzo{
  display:flex;align-items:center;justify-content:center;
  max-width:100%;max-height:100%;
}
.visor-lienzo img,.visor-lienzo video{
  max-width:100%;max-height:86vh;width:auto;height:auto;
  border-radius:14px;box-shadow:0 24px 60px rgba(0,0,0,.5);
}

.visor-x,.visor-nav{
  position:absolute;z-index:2;
  display:flex;align-items:center;justify-content:center;
  border:0;border-radius:50%;cursor:pointer;
  background:rgba(252,250,244,.14);color:var(--hueso);
  transition:background .25s var(--e),transform .25s var(--e);
}
.visor-x:hover,.visor-nav:hover{background:rgba(252,250,244,.28)}
.visor-x:focus-visible,.visor-nav:focus-visible{outline:3px solid var(--hueso);outline-offset:2px}

.visor-x{top:clamp(10px,2.5vw,22px);right:clamp(10px,2.5vw,22px);
  width:46px;height:46px;font-size:1.9rem;line-height:1}
.visor-nav{top:50%;transform:translateY(-50%);width:52px;height:52px;font-size:2.2rem;line-height:1}
.visor-nav:hover{transform:translateY(-50%) scale(1.06)}
.visor-ant{left:clamp(8px,2vw,26px)}
.visor-sig{right:clamp(8px,2vw,26px)}
.visor-nav[hidden]{display:none}

.visor-cuenta{
  position:absolute;bottom:clamp(12px,3vw,26px);left:50%;transform:translateX(-50%);
  margin:0;font-size:.86rem;letter-spacing:.06em;color:rgba(252,250,244,.72);
}

/* En un móvil las flechas estorban más de lo que ayudan: se pasa con el dedo.
   Se dejan visibles pero pequeñas y pegadas al borde. */
@media(max-width:640px){
  .visor-nav{width:40px;height:40px;font-size:1.7rem}
  .visor-lienzo img,.visor-lienzo video{max-height:78vh}
}
.ficha-bloque{padding:30px 0;border-top:1px solid var(--borde)}
.ficha-bloque h2{font-size:1.28rem;letter-spacing:-.028em;margin-bottom:16px;display:flex;align-items:center;gap:10px}
.ficha-bloque h2 svg{width:20px;height:20px;color:var(--dorado)}
/* La carta del restaurante. Precio a la derecha y una guía de puntos para
   recorrer el renglón sin perderse, como en una carta impresa. */
.carta{display:flex;flex-direction:column;gap:26px}
.carta-g{
  font-size:.74rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dorado);margin:0 0 12px;padding-bottom:8px;border-bottom:1px solid var(--borde);
}
.carta-l{list-style:none;display:flex;flex-direction:column;gap:13px;margin:0;padding:0}
.carta-l li{display:flex;align-items:baseline;gap:10px}
.carta-n{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.carta-n b{font-size:1rem;font-weight:700;letter-spacing:-.015em}
.carta-n small{font-size:.82rem;color:var(--tinta-50);line-height:1.4}
.carta-l li::after{
  content:"";flex:1;order:1;align-self:flex-end;margin-bottom:5px;min-width:22px;
  border-bottom:1px dotted var(--borde-fuerte);
}
.carta-p{
  order:2;font-size:1rem;font-weight:800;letter-spacing:-.02em;white-space:nowrap;
  font-variant-numeric:tabular-nums;color:var(--musgo);
}
.carta-add{
  order:3;flex:none;width:36px;height:36px;border-radius:11px;cursor:pointer;
  border:1px solid var(--borde);background:var(--hueso);color:var(--musgo);
  display:inline-flex;align-items:center;justify-content:center;transition:.2s var(--e);
}
.carta-add svg{width:17px;height:17px}
.carta-add:hover{background:var(--musgo);border-color:var(--musgo);color:var(--hueso)}
.carta-add:focus-visible{outline:2px solid var(--dorado);outline-offset:2px}
.carta-add.done{background:var(--ok,#2E6B3E);border-color:var(--ok,#2E6B3E);color:#fff}
/* Al añadirlo, el botón se rellena con «En tu plan»; en un círculo de 36 px no
   cabe el texto, así que se deja solo la marca de verificación. */
.carta-add.done{font-size:0}
.carta-add.done svg{width:17px;height:17px}
@media(max-width:480px){
  .carta-l li{flex-wrap:wrap}
  .carta-l li::after{display:none}
  .carta-p{order:0;margin-left:auto}
}

/* -----------------------------------------------------------------------------
   CAPA DE BÚSQUEDA
   -------------------------------------------------------------------------- */
.buscando{
  position:fixed;inset:0;z-index:300;display:grid;place-items:center;
  /* El color plano va PRIMERO y color-mix() después: un navegador que no
     entienda color-mix descarta esa línea y se queda con la de arriba.
     Sin el respaldo, esa capa se quedaba SIN FONDO —no gris, ninguno— y
     el aro y los pasos flotaban ilegibles encima del catálogo.
     #101806 es --bosque-900; el 0.88 es el mismo 88% de la mezcla. */
  background:rgba(16,24,6,.88);
  background:color-mix(in srgb,var(--bosque-900) 88%,transparent);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  animation:bu-entra .28s var(--e) both;
}
@keyframes bu-entra{from{opacity:0}to{opacity:1}}
/* La forma es la del mockup del planificador: un aro girando y una lista de
   pasos que se van marcando. Los textos sí cambian, porque aquí se filtra un
   catálogo y no se arma un viaje: prometer que se calculan traslados o cupos
   sería decir algo que la página no hace. */
.bu-caja{display:flex;flex-direction:column;align-items:center;padding:0 28px;text-align:center}
.bu-aro{
  width:78px;height:78px;border-radius:50%;margin-bottom:26px;
  border:3px solid rgba(252,250,244,.22);border-top-color:var(--dorado);
  animation:bu-gira 1s linear infinite;
}
@keyframes bu-gira{to{transform:rotate(360deg)}}
.bu-tit{
  margin:0 0 8px;color:var(--hueso);font-family:var(--f-display,inherit);
  font-size:clamp(1.2rem,3vw,1.6rem);font-weight:700;letter-spacing:-.025em;
}
.bu-sub{margin:0;font-size:.9rem;color:rgba(252,250,244,.62);max-width:34ch;line-height:1.55}
.bu-pasos{
  max-width:400px;margin:26px auto 0;text-align:left;
  display:flex;flex-direction:column;gap:12px;
}
.bu-paso{
  display:flex;align-items:center;gap:12px;font-size:.9rem;line-height:1.4;
  color:rgba(252,250,244,.4);transition:.4s var(--e);
}
.bu-paso .d{
  width:20px;height:20px;border-radius:50%;flex:none;display:grid;place-items:center;
  border:1.5px solid rgba(252,250,244,.32);color:transparent;transition:.4s var(--e);
}
.bu-paso .d svg{width:12px;height:12px}
.bu-paso.on{color:var(--hueso)}
.bu-paso.on .d{background:var(--ok,#2E6B3E);border-color:var(--ok,#2E6B3E);color:#fff}
@media(prefers-reduced-motion:reduce){
  .bu-aro{animation:none;border-top-color:rgba(252,250,244,.22)}
}

/* Tipos de habitación dentro de la ficha del hostal. */
.habs{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
.hab{
  display:flex;gap:0;border:1px solid var(--borde);border-radius:var(--r-md);
  overflow:hidden;background:var(--hueso);transition:.25s var(--e);
}
.hab:hover{border-color:var(--dorado);box-shadow:0 10px 28px -18px rgba(31,38,23,.35)}
.hab img,.hab video{width:104px;flex:none;object-fit:cover;align-self:stretch}
.hab-b{display:flex;flex-direction:column;gap:6px;padding:13px 15px;min-width:0;flex:1}
.hab-b h3{font-size:1.02rem;letter-spacing:-.02em;margin:0}
.hab-t{font-size:.76rem;color:var(--tinta-50);margin:0}
.hab-d{list-style:none;display:flex;flex-wrap:wrap;gap:5px;margin:2px 0 0;padding:0}
.hab-d li{
  font-size:.7rem;line-height:1.3;padding:3px 8px;border-radius:99px;
  background:var(--crema);border:1px solid var(--borde);color:var(--tinta-70);
}
.hab-p{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:8px}
.hab-p b{font-size:1.05rem;letter-spacing:-.02em;display:block}
.hab-p small{font-size:.66rem;color:var(--tinta-50);display:block;line-height:1.2}
.btn-sm{padding:8px 15px;font-size:.83rem}
@media(max-width:420px){
  .hab img,.hab video{width:78px}
  .hab-b{padding:11px 12px}
}

/* Lo que hace única la experiencia: la razón para escogerla, no la lista de
   servicios. Por eso va en tarjetas y no en viñetas. */
.lista-dest{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px}
.lista-dest span{display:flex;gap:10px;align-items:flex-start;padding:13px 15px;border-radius:14px;
  border:1px solid var(--borde);background:var(--crema);font-size:.94rem;line-height:1.45}
.lista-dest svg{width:18px;height:18px;flex:none;margin-top:2px;color:var(--dorado)}

/* Requisitos de la ficha. Se separan de «qué incluye» con un fondo propio:
   son condiciones que impiden hacer la actividad, no beneficios. */
.lista-req{list-style:none;display:flex;flex-direction:column;gap:9px}
.lista-req li{position:relative;padding:11px 15px 11px 40px;border-radius:12px;
  background:var(--crema);border:1px solid var(--borde);font-size:.95rem}
.lista-req li::before{content:"";position:absolute;left:16px;top:50%;width:9px;height:9px;
  margin-top:-4px;border-radius:50%;background:var(--dorado)}
.ficha-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:11px;margin:22px 0}
.ficha-fact{border:1px solid var(--borde);border-radius:15px;padding:14px 16px;display:flex;gap:12px;align-items:center}
.ficha-fact svg{width:20px;height:20px;color:var(--musgo);flex:none}
.ficha-fact b{display:block;font-size:.9rem;letter-spacing:-.02em;line-height:1.2}
.ficha-fact span{font-size:.68rem;color:var(--tinta-50);letter-spacing:.08em;text-transform:uppercase;font-weight:700}
.itin{position:relative;padding-left:28px}
.itin::before{content:"";position:absolute;left:7px;top:12px;bottom:12px;width:2px;
  background:linear-gradient(var(--hoja),var(--borde));border-radius:2px}
.itin li{position:relative;padding:10px 0;font-size:.95rem;line-height:1.5}
.itin li::before{content:"";position:absolute;left:-25px;top:17px;width:12px;height:12px;border-radius:50%;
  background:var(--papel);border:2.5px solid var(--hoja)}
.itin li:first-child::before,.itin li:last-child::before{border-color:var(--bosque-600);background:var(--bosque-600)}
.incl{display:flex;flex-direction:column;gap:12px}
.incl li{display:flex;gap:12px;font-size:.95rem;line-height:1.5}
.incl li svg{width:19px;height:19px;color:var(--ok);flex:none;margin-top:3px}
.res-box{background:var(--papel);border:1px solid var(--borde);border-radius:20px;padding:26px;box-shadow:var(--sh-3)}
.res-precio{display:flex;align-items:baseline;gap:8px;margin-bottom:4px}
.res-precio b{font-family:var(--f-display);font-size:2rem;font-weight:800;letter-spacing:-.04em}
.res-precio span{font-size:.84rem;color:var(--tinta-50)}

/* Las tres garantías bajo los botones de reserva.
   icono() no escribe width ni height: el tamaño lo pone siempre el CSS del
   componente que lo usa, y a este bloque se le olvidó. Sin regla, el SVG solo
   obedecía al max-width:100% general y crecía hasta llenar el ancho de la
   columna: el escudo salía del alto de un párrafo entero y el texto quedaba
   arriba a la derecha, como flotando. Pasaba en las diecinueve fichas. */
.res-tr svg{width:17px;height:17px;flex:none;margin-top:2px;color:var(--bosque-600)}
.vars{display:flex;flex-direction:column;gap:9px;margin:16px 0}
.var{display:flex;gap:12px;align-items:center;width:100%;text-align:left;padding:13px;
  border:1.5px solid var(--borde);border-radius:14px;background:var(--papel);cursor:pointer;transition:.28s var(--e)}
.var:hover{border-color:var(--musgo)}
.var.is-on{border-color:var(--bosque-600);background:var(--paramo)}
.var b{display:block;font-size:.92rem;letter-spacing:-.02em}
.var small{font-size:.76rem;color:var(--tinta-70)}
.var .pr{margin-left:auto;font-family:var(--f-display);font-weight:800;font-size:.98rem;letter-spacing:-.03em}

/* --- Pasaporte --- */
.pp-card{background:linear-gradient(150deg,#1F4229,#0E2116);border-radius:24px;padding:32px;
  color:var(--hueso);box-shadow:var(--sh-4);border:1px solid rgba(233,196,106,.24)}
.pp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:22px 0}
.pp-sello{aspect-ratio:1;border-radius:50%;border:1.5px dashed rgba(252,250,244,.26);display:grid;
  place-items:center;padding:6px;text-align:center;font-size:.58rem;line-height:1.15;font-weight:700;
  color:rgba(252,250,244,.42)}
.pp-sello.is-on{border-style:solid;border-color:var(--dorado);background:rgba(233,196,106,.16);color:var(--dorado-luz)}
.pp-sello.is-on svg{width:19px;height:19px}
/* =============================================================================
   ESTAMPILLAS DEL PASAPORTE
   Cada ruta completada deja una estampilla con el emblema de Murillo 360, como
   el sello de tinta de un pasaporte de verdad. El borde dentado se hace con un
   degradado radial repetido: son perforaciones, no una imagen, asi que se ve
   nitido en cualquier pantalla y no pesa nada.
   ========================================================================== */
.pp-grid{grid-template-columns:repeat(4,1fr)}
.estampilla{
  position:relative;aspect-ratio:1;border-radius:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  padding:8px 5px;text-align:center;overflow:hidden;
  background:rgba(252,250,244,.05);
  /* Perforaciones del borde: cuatro tiras de semicirculos, una por lado, que se
     recortan entre si. Con intersect solo queda lo que las cuatro dejan pasar,
     que es el rectangulo dentado. */
  -webkit-mask:
    repeating-radial-gradient(circle at 50% 0,#0000 0 3px,#000 3.5px 7px) 0 0/14px 100%,
    repeating-radial-gradient(circle at 50% 100%,#0000 0 3px,#000 3.5px 7px) 0 100%/14px 100%,
    repeating-radial-gradient(circle at 0 50%,#0000 0 3px,#000 3.5px 7px) 0 0/100% 14px,
    repeating-radial-gradient(circle at 100% 50%,#0000 0 3px,#000 3.5px 7px) 100% 0/100% 14px;
  -webkit-mask-composite:source-in,source-in,source-in;
  mask:
    repeating-radial-gradient(circle at 50% 0,#0000 0 3px,#000 3.5px 7px) 0 0/14px 100%,
    repeating-radial-gradient(circle at 50% 100%,#0000 0 3px,#000 3.5px 7px) 0 100%/14px 100%,
    repeating-radial-gradient(circle at 0 50%,#0000 0 3px,#000 3.5px 7px) 0 0/100% 14px,
    repeating-radial-gradient(circle at 100% 50%,#0000 0 3px,#000 3.5px 7px) 100% 0/100% 14px;
  mask-composite:intersect;
  mask-repeat:repeat-y,repeat-y,repeat-x,repeat-x;
  transition:transform .35s var(--e);
}
/* Sin sellar: hueco troquelado, para que se vea lo que falta. */
.estampilla .por-sellar{
  font-size:.6rem;font-weight:700;letter-spacing:.04em;
  color:rgba(252,250,244,.34);line-height:1.2;
  padding:0 3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;
}
.estampilla:not(.is-on){
  border:1.5px dashed rgba(252,250,244,.2);
  background:repeating-linear-gradient(-45deg,transparent 0 6px,rgba(252,250,244,.03) 6px 12px);
}
/* Sellada: fondo hueso y el emblema en su color, como tinta sobre el papel. */
.estampilla.is-on{
  background:linear-gradient(160deg,#FCFAF4,#F1E9D4);
  box-shadow:0 5px 16px -6px rgba(8,16,6,.6);
}
.estampilla.is-on img,.estampilla.is-on video{
  width:52%;height:auto;display:block;margin-bottom:1px;
  filter:saturate(1.05);
}
.estampilla.is-on b{
  font-size:.56rem;font-weight:800;line-height:1.12;color:var(--bosque-700,#12240F);
  letter-spacing:.01em;max-width:100%;
}
.estampilla.is-on time{
  font-size:.5rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--terracota,#C2603A);
}
.estampilla.is-on:hover{transform:rotate(-2deg) scale(1.05)}

/* Nota de ruta insignia completada, mientras el pasaporte no esté lleno. */
.cert-kumanday{
  display:flex;gap:13px;align-items:flex-start;margin-top:18px;
  border:1px solid var(--borde);border-radius:16px;padding:16px 18px;background:var(--crema);
}
.cert-kumanday svg{width:26px;height:26px;flex:none;color:var(--dorado);margin-top:2px}
.cert-kumanday b{display:block;font-size:.92rem;margin-bottom:3px;color:var(--bosque-700)}
.cert-kumanday span{font-size:.83rem;line-height:1.5;color:var(--tinta-50)}

/* =============================================================================
   INSIGNIA · el premio de llenar el pasaporte
   Un sello lacrado: aro de texto en curva, emblema al centro y fondo oscuro
   para que destaque sobre la página clara. Aparece una sola vez en la vida del
   explorador, asi que se le da su propio peso visual.
   ========================================================================== */
.insignia{
  margin-top:18px;padding:30px 24px 26px;text-align:center;border-radius:22px;
  background:radial-gradient(120% 90% at 50% 0,#1F4229 0%,#0E2116 62%);
  border:1.5px solid rgba(233,196,106,.45);
  box-shadow:0 24px 50px -28px rgba(8,16,6,.9);
  color:var(--hueso);
}
.ins-sello{position:relative;width:150px;height:150px;margin:0 auto 18px}
.ins-sello img,.ins-sello video{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:62px;height:auto;
}
.ins-aro{position:absolute;inset:0;width:100%;height:100%;animation:ins-girar 26s linear infinite}
.ins-borde-ext{fill:none;stroke:var(--dorado,#E9C46A);stroke-width:1.5;opacity:.85}
.ins-borde-int{fill:none;stroke:var(--dorado,#E9C46A);stroke-width:.75;opacity:.45;
  stroke-dasharray:3 5}
.ins-texto{
  font-family:var(--f-body);font-size:11.5px;font-weight:800;letter-spacing:.16em;
  fill:var(--dorado-luz,#F2B10A);
}
@keyframes ins-girar{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.ins-aro{animation:none}}

.ins-eyebrow{
  display:block;font-size:.64rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:var(--dorado-luz);margin-bottom:9px;
}
.insignia h4{color:var(--hueso);margin-bottom:10px}
.insignia .small{color:rgba(252,250,244,.72);margin-bottom:18px}

/* =============================================================================
   ACCESO AL PASAPORTE · correo y codigo de 6 digitos
   El codigo se escribe en una sola casilla ancha con las cifras separadas: se
   lee de un vistazo al compararlo con el correo, que es lo que la gente hace.
   ========================================================================== */
.pp-acceso{
  background:var(--crema);border:1px solid var(--borde);border-radius:20px;
  padding:22px;margin-top:18px;
}
.pp-label{
  display:block;font-size:.66rem;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tinta-50);margin-bottom:8px;
}
.pp-correo,.pp-codigo{
  width:100%;border:1.5px solid var(--borde);border-radius:12px;padding:13px 15px;
  font:inherit;background:var(--papel);outline:none;margin-bottom:12px;
  transition:border-color .25s var(--e);
}
.pp-correo:focus,.pp-codigo:focus{border-color:var(--bosque-600)}
.pp-codigo{
  font-family:var(--f-display);font-size:1.7rem;font-weight:800;
  letter-spacing:.34em;text-align:center;text-indent:.34em;
}
.pp-codigo::placeholder{color:var(--borde-fuerte);font-weight:700}

.pp-aviso{
  font-size:.85rem;line-height:1.5;margin-bottom:14px;padding:11px 14px;border-radius:12px;
  background:var(--paramo);border:1px solid var(--borde-fuerte);color:var(--tinta);
}
.pp-aviso.is-error{background:#FBEDE7;border-color:#E0A78F;color:#8E2F16}

.pp-reenviar{
  background:none;border:0;padding:0;font:inherit;font-size:.8rem;
  color:var(--tinta-70);text-decoration:underline;text-underline-offset:3px;cursor:pointer;
}
.pp-reenviar:hover{color:var(--terracota)}

.pp-salir{display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.pp-salir b{display:block;font-size:.92rem;letter-spacing:-.02em;word-break:break-all}
.pp-salir .tiny{color:var(--tinta-70)}
.pp-salir .btn{flex:none}

/* =============================================================================
   BENEFICIOS · lo ganado y lo que falta
   ========================================================================== */
.ben-lista{display:grid;gap:8px;margin-top:18px}
.ben{
  display:flex;gap:13px;align-items:flex-start;
  border:1px solid var(--borde);border-radius:14px;padding:13px 15px;background:var(--papel);
  transition:border-color .3s var(--e);
}
.ben-n{
  flex:none;width:29px;height:29px;border-radius:50%;display:grid;place-items:center;
  background:var(--crema);color:var(--tinta-50);
  font-size:.82rem;font-weight:800;font-variant-numeric:tabular-nums;
}
.ben-n svg{width:15px;height:15px}
.ben b{display:block;font-size:.9rem;color:var(--bosque-700);margin-bottom:2px}
.ben span{font-size:.8rem;line-height:1.45;color:var(--tinta-50)}
.ben.is-on{border-color:rgba(233,196,106,.75);background:linear-gradient(150deg,#FFFDF6,#F8F1DE)}
.ben.is-on .ben-n{background:var(--g-dorado,var(--dorado));color:#3D2C08}
.ben.is-off{opacity:.55}

@media(max-width:400px){
  .pp-grid{grid-template-columns:repeat(3,1fr)}
  .estampilla.is-on b{font-size:.5rem}
}

.pp-bar{height:7px;border-radius:7px;background:rgba(252,250,244,.16);overflow:hidden;margin-bottom:9px}
.pp-bar i{display:block;height:100%;background:var(--g-dorado);border-radius:7px;transition:width .8s var(--e)}
.pp-pasos{display:flex;flex-direction:column}
.pp-paso{display:flex;gap:16px;padding:18px 0;border-bottom:1px dashed var(--borde)}
.pp-paso:last-child{border:0}
.pp-paso .n{width:32px;height:32px;border-radius:50%;background:var(--bosque-600);color:var(--hueso);
  display:grid;place-items:center;font-size:.82rem;font-weight:800;flex:none}
.pp-paso b{display:block;font-size:.98rem;letter-spacing:-.022em;margin-bottom:3px}
.pp-paso span{font-size:.88rem;color:var(--tinta-70);line-height:1.55}
/* El aviso de las casillas que no se sellan solas. Va en otro tono para que
   no se confunda con la condición de arriba, que sí es un requisito. */
.pp-paso .pp-mano{display:block;margin-top:3px;font-size:.8rem;color:var(--musgo);font-weight:600}

/* --- Ajustes responsivos propios --- */
@media(max-width:1080px){
  .ficha-grid{grid-template-columns:1fr;gap:28px}
  .ficha-res{position:static}
  .ficha-facts{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .ficha-hero{aspect-ratio:4/3}
  .ficha-volver{left:16px}
  .ficha-gal img,.ficha-gal video{width:118px;height:86px}
  .co-fila{grid-template-columns:1fr}
  .drawer.en-datos .drawer-foot{max-height:none}
  .pp-grid{gap:9px}
}


/* =============================================================================
   LOGOTIPO OFICIAL
   Se usa el archivo original de la marca. Como es verde oscuro, sobre fondos
   oscuros va dentro de una placa clara para que contraste.
   ============================================================================= */
.logo-img{width:auto;height:44px;display:block}
.logo-mark{width:auto;height:40px;display:block}
.nav .logo{display:flex;align-items:center;gap:0}
.nav.is-stuck .logo-img{height:38px}
.logo-img,.logo-mark{transition:height .4s var(--e)}

/* Pie del sitio: fondo oscuro -> placa clara detrás del logo */
.foot .logo{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--hueso);padding:12px 18px;border-radius:16px;
  max-width:250px;box-shadow:0 10px 30px -18px rgba(0,0,0,.6);
}
.foot .logo-img{height:40px}

@media(max-width:640px){
  .logo-img{height:36px}
  .nav.is-stuck .logo-img{height:32px}
}


/* =============================================================================
   HERO CINEMATOGRÁFICO
   Fondo a pantalla completa con video o secuencia de fotos en movimiento.
   La barra superior pasa a ser sólida siempre: el logotipo es verde oscuro y
   sobre un fondo oscuro no se leería.
   ============================================================================= */

.nav{
  background:rgba(252,250,244,.94);
  -webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);
  border-bottom-color:var(--borde);
}

.hero-cine{
  position:relative;
  min-height:min(760px,100svh);
  display:flex;align-items:flex-end;
  padding:calc(var(--nav-h) + 40px) 0 0;
  /* Sin overflow:hidden. El recorte del fondo lo hace .cine; si se pone aquí,
     el buscador que sobresale por abajo queda cortado a la mitad. */
  isolation:isolate;
}

/* --- Capas de fondo --- */
.cine{position:absolute;inset:0;z-index:-2;overflow:hidden;background:var(--bosque-900)}

.cine-foto{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  opacity:0;transition:opacity 1.6s ease-in-out;
  will-change:opacity,transform;
}
.cine-foto.is-on{opacity:1}
/* Ken Burns: acercamiento y alejamiento alternados para que no se sienta repetitivo */
.cine-foto.is-on{animation:kb-in 9s ease-out forwards}
.cine-foto.is-on:nth-child(even){animation-name:kb-out}
@keyframes kb-in{
  from{transform:scale(1.0) translate3d(0,0,0)}
  to{transform:scale(1.14) translate3d(-1.2%,-1%,0)}
}
@keyframes kb-out{
  from{transform:scale(1.14) translate3d(1.2%,1%,0)}
  to{transform:scale(1.0) translate3d(0,0,0)}
}

.cine-video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1.4s ease-in-out;
}
.cine-video.is-on{opacity:1}

/* Velo: sin él el texto blanco no se lee sobre las fotos claras */
.cine-veil{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(11,26,17,.62) 0%,rgba(11,26,17,.30) 34%,rgba(11,26,17,.55) 70%,rgba(11,26,17,.88) 100%),
    linear-gradient(90deg,rgba(11,26,17,.55) 0%,rgba(11,26,17,.12) 55%,transparent 100%);
}

/* --- Contenido sobre el fondo --- */
.hero-cine .wrap{position:relative;z-index:2;width:min(1320px,100% - var(--gutter)*2)}
.hero-cine .cine-txt{padding-bottom:clamp(28px,5vw,60px);max-width:56ch}
.hero-cine .eyebrow{color:var(--dorado-luz)}
.hero-cine .eyebrow::before{background:var(--dorado-luz)}
.hero-cine h1{color:var(--hueso);margin:20px 0 18px;text-shadow:0 2px 30px rgba(11,26,17,.5)}
.hero-cine .lead{color:rgba(252,250,244,.88);text-shadow:0 1px 16px rgba(11,26,17,.6)}
.hero-cine .hero-facts{margin-top:26px}
.hero-cine .hero-facts .pill{
  background:rgba(252,250,244,.14);color:var(--hueso);
  border-color:rgba(252,250,244,.26);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}

/* Indicador de secuencia */
.cine-puntos{display:flex;gap:7px;margin-top:26px}
.cine-puntos button{
  width:26px;height:3px;border-radius:3px;background:rgba(252,250,244,.32);
  transition:.4s var(--e);padding:0;
}
.cine-puntos button.is-on{background:var(--dorado-luz);width:44px}

/* El buscador flota sobre el borde inferior del hero */
.hero-cine .searchwrap{margin-bottom:-58px;position:relative;z-index:6}

@media(max-width:860px){
  .hero-cine{min-height:auto;padding-bottom:20px}
  .hero-cine .cine-txt{padding-bottom:24px}
  .cine-veil{background:linear-gradient(180deg,rgba(11,26,17,.55) 0%,rgba(11,26,17,.35) 40%,rgba(11,26,17,.9) 100%)}
}
@media(prefers-reduced-motion:reduce){
  .cine-foto.is-on{animation:none;transform:none}
}


/* =============================================================================
   KUMA · la mascota es la cara del asistente
   ============================================================================= */
.kuma-fab{
  background:var(--hueso);
  padding:0;overflow:visible;
  border:3px solid var(--hueso);
  width:68px;height:68px;
  box-shadow:0 14px 34px -10px rgba(15,36,23,.55);
}
.kuma-fab img,.kuma-fab video{
  width:100%;height:100%;border-radius:50%;display:block;object-fit:cover;
}
.kuma-fab::before{border-color:rgba(70,96,30,.45)}
.kuma-fab .dot{
  top:2px;right:2px;width:15px;height:15px;
  background:#4ADE80;border:2.5px solid var(--hueso);z-index:2;
}

/* Globo de saludo: aparece solo y se retira, para invitar sin molestar */
.kuma-globo{
  position:absolute;right:calc(100% + 12px);top:50%;transform:translateY(-50%) scale(.86);
  background:var(--hueso);color:var(--bosque-700);
  font-size:.82rem;font-weight:700;white-space:nowrap;
  padding:10px 16px;border-radius:100px;
  box-shadow:0 10px 28px -12px rgba(15,36,23,.5);
  border:1px solid var(--borde);
  opacity:0;pointer-events:none;
  transition:opacity .5s var(--e),transform .5s var(--e);
}
.kuma-globo::after{
  content:"";position:absolute;left:100%;top:50%;transform:translateY(-50%);
  border:7px solid transparent;border-left-color:var(--hueso);
}
.kuma-fab.saluda .kuma-globo{opacity:1;transform:translateY(-50%) scale(1)}

/* Avatar dentro de la cabecera del chat */
.kuma-av{background:var(--hueso);overflow:hidden;padding:0;border-color:rgba(252,250,244,.4)}
.kuma-av img,.kuma-av video{width:100%;height:100%;border-radius:50%;display:block;object-fit:cover}

@media(max-width:640px){
  .kuma-fab{width:62px;height:62px}
  .kuma-globo{display:none}
}


/* =============================================================================
   HERO · ajuste de proporciones
   El titular a tamaño completo ocupaba cuatro líneas y empujaba el buscador
   fuera de la pantalla. Se acota el alto y se equilibra la tipografía.
   ============================================================================= */
.hero-cine{
  min-height:min(660px,86svh);
  padding-top:calc(var(--nav-h) + 28px);
}
.hero-cine h1{
  font-size:clamp(2.3rem,4.6vw,4.2rem);
  line-height:1.02;
  max-width:14ch;
  margin:16px 0 16px;
}
.hero-cine .lead{font-size:clamp(.98rem,1.15vw,1.1rem);max-width:48ch}
.hero-cine .cine-txt{padding-bottom:clamp(22px,3.4vw,44px);max-width:none}
.hero-cine .hero-facts{margin-top:20px;gap:9px}
.hero-cine .hero-facts .pill{font-size:.76rem;padding:7px 14px}
.cine-puntos{margin-top:20px}

/* El buscador queda dentro del hero, no colgando por debajo */
.hero-cine .searchwrap{margin-bottom:-46px}

@media(max-width:1080px){
  .hero-cine{min-height:auto;padding-bottom:0}
  .hero-cine h1{max-width:16ch}
}


/* =============================================================================
   KUMA · figura completa
   El personaje flota sin recuadro: se ve la montaña con sus manitos.
   ============================================================================= */
.kuma-fab{
  width:96px;height:96px;
  background:transparent;border:0;box-shadow:none;padding:0;
  display:grid;place-items:end center;overflow:visible;
  filter:drop-shadow(0 10px 18px rgba(15,36,23,.35));
  transition:transform .4s var(--e),filter .4s var(--e);
}
.kuma-fab:hover{transform:translateY(-6px) scale(1.06);filter:drop-shadow(0 16px 24px rgba(15,36,23,.45))}
.kuma-fab:active{transform:translateY(-2px) scale(1.02)}
.kuma-fab img,.kuma-fab video{
  width:100%;height:auto;border-radius:0;object-fit:contain;display:block;
  animation:kuma-flota 4.5s ease-in-out infinite;
}
@keyframes kuma-flota{
  0%,100%{transform:translateY(0) rotate(0)}
  50%{transform:translateY(-5px) rotate(-2deg)}
}
/* El anillo pulsante y el punto verde no encajan con una figura recortada */
.kuma-fab::before{display:none}
.kuma-fab .dot{
  top:auto;bottom:6px;right:6px;width:14px;height:14px;
  background:#4ADE80;border:2.5px solid var(--hueso);z-index:3;
  box-shadow:0 2px 6px rgba(0,0,0,.25);
}

.kuma-globo{
  right:calc(100% + 6px);
  background:var(--hueso);color:var(--bosque-700);
  font-weight:600;
}
.kuma-globo b{color:var(--musgo);font-weight:800}

/* --- Globo en dos fases -----------------------------------------------------
   Kuma saluda al entrar y despues se queda ofreciendo ayuda. Las dos frases
   viven apiladas en la misma celda: el globo mide siempre lo que la mas larga,
   asi que al cambiar el texto no da un salto de ancho ni empuja nada. */
.kuma-globo{display:grid}
.kuma-globo > span{
  grid-area:1/1;
  transition:opacity .45s var(--e),transform .45s var(--e);
}
.kuma-globo .kg-ayuda{opacity:0;transform:translateY(-4px)}
.kuma-fab.pide .kuma-globo .kg-hola{opacity:0;transform:translateY(4px)}
.kuma-fab.pide .kuma-globo .kg-ayuda{opacity:1;transform:none}

/* Avatar de la cabecera del chat: la carita dentro del círculo */
.kuma-av{
  background:var(--hueso);overflow:hidden;padding:0;
  border-color:rgba(252,250,244,.45);position:relative;
}
.kuma-av img,.kuma-av video{
  width:150%;height:auto;position:absolute;
  left:50%;top:14%;transform:translateX(-50%);
  border-radius:0;object-fit:contain;
}

@media(max-width:640px){
  .kuma-fab{width:82px;height:82px}
  .kuma-globo{display:none}
}


/* =============================================================================
   BUSCADOR SOBRE EL HERO · corrección de superposición
   La tarjeta sobresale por debajo del hero, así que necesita quedar por encima
   de la franja siguiente, y esa franja necesita aire suficiente arriba.
   ============================================================================= */
.hero-cine .searchwrap{
  position:relative;
  z-index:8;
  margin-bottom:-56px;
}
.hero-cine .search{
  box-shadow:0 24px 60px -24px rgba(11,26,17,.55), 0 2px 8px rgba(11,26,17,.10);
  border-color:rgba(226,222,205,.9);
}
/* Espacio para que la tarjeta no tape el contenido de la franja de confianza */
.trustband{padding-top:118px}

@media(max-width:1080px){
  .hero-cine .searchwrap{margin-bottom:-40px}
  .trustband{padding-top:96px}
}
@media(max-width:640px){
  .hero-cine .searchwrap{margin-bottom:-24px}
  .trustband{padding-top:70px}
}


/* Aviso de cupo mínimo en la ficha */
.aviso-cupo{
  display:flex;gap:9px;align-items:flex-start;
  background:rgba(242,177,10,.12);border:1px solid rgba(201,143,6,.32);
  border-radius:12px;padding:11px 14px;margin-bottom:18px;
  font-size:.83rem;line-height:1.45;color:#7A5A18;
}
.aviso-cupo svg{width:16px;height:16px;flex:none;margin-top:2px;color:var(--dorado)}
.aviso-cupo b{color:#5F4512}


/* =============================================================================
   PAGINAS LEGALES
   Texto largo para leer, no para escanear: columna estrecha y jerarquia clara.
   ========================================================================== */
.wrap-lectura{max-width:74ch}
.legal-cuerpo{margin-top:30px}
.legal-cuerpo h2{
  font-family:var(--f-display);font-size:1.18rem;line-height:1.25;
  color:var(--bosque-700);margin:34px 0 10px;
}
.legal-cuerpo h2:first-child{margin-top:0}
.legal-cuerpo p{margin-bottom:14px;line-height:1.7}
.legal-cuerpo ul{margin:0 0 16px;padding-left:22px}
.legal-cuerpo li{margin-bottom:7px;line-height:1.65}
.legal-cuerpo b{color:var(--bosque-700)}

/* Aviso de politica sin completar: lo ve el equipo, no el visitante final. */
.aviso-legal{
  margin-top:26px;border-left:3px solid var(--terracota);background:#FDF2EC;
  padding:15px 18px;border-radius:0 12px 12px 0;font-size:.9rem;line-height:1.6;
}
.aviso-legal b{display:block;margin-bottom:4px;color:var(--terracota)}

/* Advertencia ESCNNA: obligatoria por ley para prestadores turisticos. */
.aviso-escnna{
  border:1.5px solid var(--borde);background:var(--crema);
  padding:16px 18px;border-radius:14px;font-size:.88rem;line-height:1.65;margin:16px 0 4px;
}
.aviso-escnna b{display:block;margin-bottom:5px;color:var(--bosque-700)}


/* =============================================================================
   FRANJA DE ENTORNO
   Los dos sitios son identicos por dentro. Sin una marca imposible de ignorar,
   alguien acabara editando el contenido o leyendo pedidos en el equivocado.
   Rayado diagonal, que es como se señala "esto no es lo de verdad".
   ========================================================================== */
.franja-entorno{
  position:fixed;left:0;right:0;bottom:0;z-index:400;
  display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
  padding:7px 16px;font-size:.78rem;line-height:1.4;color:#2A1A05;
  background:repeating-linear-gradient(45deg,#F2B10A 0 14px,#E0A00A 14px 28px);
  box-shadow:0 -3px 14px -4px rgba(16,24,6,.35);
}
.franja-entorno b{font-weight:800;letter-spacing:.02em}
.franja-entorno span{opacity:.85}
.franja-entorno a{color:#2A1A05;font-weight:700;text-decoration:underline}

/* La franja tapa el pie y el asistente: se les hace sitio. */
body.es-pruebas footer,
body.es-local footer{padding-bottom:44px}
body.es-pruebas .kuma-fab,
body.es-local .kuma-fab{bottom:52px}
body.es-pruebas .kuma,
body.es-local .kuma{bottom:52px}

@media(max-width:640px){
  .franja-entorno{font-size:.72rem;padding:6px 12px}
  .franja-entorno span{display:none}
}
@media print{ .franja-entorno{display:none} }

/* Identificacion legal en el pie. El RNT es obligatorio publicarlo para
   prestadores de servicios turisticos, asi que va a la vista y no escondido. */
.foot-legal{
  text-align:center;padding-top:10px;margin-top:10px;
  border-top:1px solid rgba(252,250,244,.10);
  font-size:.74rem;color:rgba(252,250,244,.45);letter-spacing:.02em;
}

/* =============================================================================
   PICO Y PLACA
   ========================================================================== */

/* --- El consultor -------------------------------------------------------- */
.pp-consulta{
  background:var(--papel);border:1px solid var(--borde);border-radius:var(--r-md);
  box-shadow:var(--sh-2);overflow:hidden;max-width:820px;
}
.pp-form{
  display:grid;grid-template-columns:1fr 1fr auto;gap:12px;align-items:end;
  padding:20px;background:var(--crema);border-bottom:1px solid var(--borde);
}
.pp-campo label{
  display:block;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--tinta-50);margin-bottom:6px;font-weight:600;
}
.pp-campo input{
  width:100%;background:var(--papel);border:1.5px solid var(--borde-fuerte);
  border-radius:var(--r-sm);padding:12px 14px;font-size:1rem;outline:none;transition:.25s;
}
.pp-campo input:focus{border-color:var(--musgo);box-shadow:0 0 0 3px rgba(47,107,67,.12)}
#ppPlaca{text-transform:uppercase;letter-spacing:.14em;font-weight:700;font-variant-numeric:tabular-nums}
.pp-form .btn{height:48px;white-space:nowrap}

.pp-vacio{padding:26px 22px;margin:0;color:var(--tinta-70);font-size:.95rem;line-height:1.9}

/* --- El veredicto -------------------------------------------------------- */
.pp-veredicto{display:flex;gap:18px;padding:26px 22px;align-items:flex-start}
.pp-v-icono{
  width:46px;height:46px;border-radius:50%;flex:none;display:grid;place-items:center;color:#fff;
}
.pp-veredicto.es-si   .pp-v-icono{background:var(--ok)}
.pp-veredicto.es-no   .pp-v-icono{background:var(--terracota)}
.pp-veredicto.es-duda .pp-v-icono{background:var(--info)}
.pp-v-icono svg{width:24px;height:24px;stroke-width:2.4}
.pp-v-texto h2{font-size:1.32rem;line-height:1.25;margin:2px 0 8px}
.pp-veredicto.es-si   .pp-v-texto h2{color:var(--ok)}
.pp-veredicto.es-no   .pp-v-texto h2{color:var(--terracota)}
.pp-veredicto.es-duda .pp-v-texto h2{color:var(--info)}
.pp-v-texto p{margin:0 0 6px;color:var(--tinta-70);font-size:.97rem;line-height:1.62}
.pp-v-texto a{color:var(--musgo);text-decoration:underline;text-underline-offset:2px}
.pp-v-nota{font-size:.85rem !important;color:var(--tinta-50) !important}

.pp-aviso-legal{
  display:flex;gap:11px;align-items:flex-start;margin:0;
  padding:15px 22px;background:var(--paramo);border-top:1px solid var(--borde);
  font-size:.79rem;line-height:1.6;color:var(--tinta-70);
}
.pp-aviso-legal svg{width:17px;height:17px;flex:none;color:var(--musgo);margin-top:1px}

/* --- Dígitos autorizados ------------------------------------------------- */
.ppd{
  display:inline-grid;place-items:center;width:29px;height:29px;margin:0 3px 3px 0;
  border-radius:9px;background:var(--bosque-600);color:var(--hueso);
  font-size:.92rem;font-weight:700;font-variant-numeric:tabular-nums;
}
.ppd.es-tuyo{background:var(--dorado);color:#3A2A05;box-shadow:0 0 0 2.5px var(--dorado-luz)}

/* --- Calendario ---------------------------------------------------------- */
.pp-cal{
  display:grid;gap:12px;
  grid-template-columns:repeat(auto-fill,minmax(132px,1fr));
}
.pp-dia{
  background:var(--papel);border:1px solid var(--borde);border-radius:var(--r-sm);
  padding:14px 12px;text-align:center;position:relative;
  border-top:3px solid var(--ok);
}
.pp-dia.es-duda{border-top-color:var(--tinta-30);background:var(--hueso)}
.pp-dia-sem{
  display:block;font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--tinta-50);font-weight:600;
}
.pp-dia-num{display:block;font-size:1.9rem;line-height:1.05;margin:2px 0 0;color:var(--tinta)}
.pp-dia-mes{display:block;font-size:.72rem;color:var(--tinta-50);margin-bottom:9px}
.pp-dia-fest{
  display:block;font-size:.62rem;color:var(--terracota);font-weight:600;
  margin:-6px 0 8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.pp-dia-digs{display:flex;flex-wrap:wrap;justify-content:center;gap:0}
.pp-dia-sin{font-size:.7rem;color:var(--tinta-50);font-style:italic;padding:6px 0}
.pp-adelante{
  display:flex;gap:14px;align-items:flex-start;margin-top:18px;padding:18px 20px;
  background:var(--papel);border:1px solid var(--borde);border-radius:var(--r-md);
}
.pp-adelante > svg{width:20px;height:20px;flex:none;color:var(--musgo);margin-top:2px}
.pp-adelante b{font-size:.92rem}
.pp-adelante p{margin:10px 0 0;font-size:.82rem;color:var(--tinta-50);line-height:1.55}
.pp-adelante-dias{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px}
.pp-adelante-dias span{
  display:inline-flex;align-items:center;gap:7px;padding:5px 10px;border-radius:8px;
  background:var(--crema);font-size:.76rem;color:var(--tinta-70);white-space:nowrap;
}
.pp-adelante-dias span b{
  font-size:.8rem;color:var(--bosque-600);font-variant-numeric:tabular-nums;letter-spacing:.04em;
}
.pp-pie-cal{margin:18px 0 0;font-size:.83rem;color:var(--tinta-50)}
.pp-pie-cal a{color:var(--musgo);text-decoration:underline;text-underline-offset:2px}

/* --- Cómo funciona ------------------------------------------------------- */
.pp-como{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.pp-tarjeta{
  background:var(--papel);border:1px solid var(--borde);border-radius:var(--r-md);
  padding:24px 22px;box-shadow:var(--sh-1);
}
.pp-t-ic{
  width:40px;height:40px;border-radius:12px;background:var(--paramo);
  display:grid;place-items:center;color:var(--bosque-600);margin-bottom:14px;
}
.pp-t-ic svg{width:20px;height:20px}
.pp-tarjeta h3{font-size:1.06rem;margin:0 0 8px}
.pp-tarjeta p{font-size:.9rem;line-height:1.62;color:var(--tinta-70);margin:0}
.pp-t-pie{font-size:.79rem !important;color:var(--tinta-50) !important;margin-top:12px !important}
.pp-reloj,.pp-tramo{width:100%;height:auto;margin:18px 0 0;display:block}

.pp-placas{display:flex;gap:10px;margin:16px 0 0;flex-wrap:wrap}
.pp-placa{
  flex:1 1 120px;background:var(--crema);border:1.5px solid var(--borde-fuerte);
  border-radius:8px;padding:10px 8px;text-align:center;
}
.pp-placa span{
  display:block;font-size:1.02rem;font-weight:700;letter-spacing:.1em;
  color:var(--tinta-30);font-variant-numeric:tabular-nums;
}
.pp-placa span b{color:var(--terracota)}
.pp-placa small{display:block;font-size:.68rem;color:var(--tinta-50);margin-top:4px}

/* --- A quién cobija ------------------------------------------------------ */
.pp-dos{display:grid;gap:34px;grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.pp-h3{display:flex;align-items:center;gap:9px;font-size:1.06rem;margin:0 0 14px}
.pp-h3 svg{width:19px;height:19px;stroke-width:2.4;color:var(--terracota)}
.pp-dos .rv:last-child .pp-h3 svg{color:var(--ok)}
.pp-lista{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.pp-lista li{
  position:relative;padding-left:20px;font-size:.9rem;line-height:1.55;color:var(--tinta-70);
}
.pp-lista li::before{
  content:"";position:absolute;left:0;top:.5em;width:7px;height:7px;border-radius:50%;
  background:var(--terracota);opacity:.55;
}
.pp-lista.es-ok li::before{background:var(--ok)}
.pp-nota-b{
  margin:16px 0 0;padding:12px 14px;background:var(--papel);border-left:3px solid var(--terracota);
  border-radius:0 8px 8px 0;font-size:.83rem;line-height:1.6;color:var(--tinta-70);
}
.pp-avisos{display:grid;gap:9px;margin-top:12px}
.pp-avisos > div{
  display:flex;gap:12px;align-items:baseline;padding:11px 14px;
  background:var(--papel);border:1px solid var(--borde);border-radius:10px;
}
.pp-avisos b{flex:none;min-width:118px;font-size:.86rem;color:var(--bosque-600)}
.pp-avisos span{font-size:.83rem;line-height:1.55;color:var(--tinta-70)}
@media(max-width:520px){
  .pp-avisos > div{flex-direction:column;gap:3px}
  .pp-avisos b{min-width:0}
}

/* --- Rutas --------------------------------------------------------------- */
.pp-rutas{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.pp-ruta{
  background:var(--papel);border:1px solid var(--borde);border-radius:var(--r-md);
  padding:22px;box-shadow:var(--sh-1);
}
.pp-ruta h3{font-size:1.04rem;margin:10px 0 8px}
.pp-ruta p{font-size:.89rem;line-height:1.6;color:var(--tinta-70);margin:0}
.pp-r-chip{
  display:inline-block;font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;
  font-weight:700;padding:4px 10px;border-radius:99px;
  background:rgba(47,143,91,.14);color:#1F6B41;
}
.pp-ruta.es-restringe .pp-r-chip{background:rgba(217,102,47,.15);color:#9C3F14}
.pp-r-alt{margin-top:12px !important;padding-top:12px;border-top:1px dashed var(--borde-fuerte);
  font-size:.85rem !important}

.pp-cta{
  display:flex;gap:22px;align-items:center;flex-wrap:wrap;justify-content:space-between;
  margin-top:26px;padding:26px;border-radius:var(--r-md);background:var(--g-bosque);color:var(--hueso);
}
.pp-cta h3{color:var(--hueso);font-size:1.14rem;margin:0 0 6px}
.pp-cta p{margin:0;font-size:.9rem;line-height:1.6;color:rgba(252,250,244,.76);max-width:56ch}

/* --- Preguntas ----------------------------------------------------------- */
.pp-faq{display:grid;gap:8px}
.pp-faq details{
  background:var(--papel);border:1px solid var(--borde);border-radius:var(--r-sm);overflow:hidden;
}
.pp-faq summary{
  cursor:pointer;padding:15px 18px;font-weight:600;font-size:.95rem;color:var(--tinta);
  list-style:none;display:flex;justify-content:space-between;gap:14px;align-items:center;
}
.pp-faq summary::-webkit-details-marker{display:none}
.pp-faq summary::after{
  content:"+";font-size:1.3rem;font-weight:400;color:var(--tinta-30);flex:none;line-height:1;
}
.pp-faq details[open] summary::after{content:"−";color:var(--musgo)}
.pp-faq summary:hover{background:var(--hueso)}
.pp-faq details p{
  margin:0;padding:0 18px 17px;font-size:.9rem;line-height:1.68;color:var(--tinta-70);
}

.pp-fuente-caja{
  display:flex;gap:14px;align-items:flex-start;margin-top:22px;padding:20px;
  background:var(--papel);border:1px solid var(--borde);border-radius:var(--r-md);
}
.pp-fuente-caja > svg{width:22px;height:22px;flex:none;color:var(--musgo);margin-top:2px}
.pp-fuente-caja b{display:block;margin-bottom:5px;font-size:.95rem}
.pp-fuente-caja p{margin:0;font-size:.87rem;line-height:1.62;color:var(--tinta-70)}
.pp-fuente-caja a{color:var(--musgo);text-decoration:underline;text-underline-offset:2px}

/* --- Aviso al entrar ----------------------------------------------------- */
.pp-fondo{
  position:fixed;inset:0;z-index:1200;background:rgba(10,18,12,.62);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);display:grid;place-items:center;padding:18px;
  animation:pp-entra .25s var(--e);
}
/* El estilo del autor gana SIEMPRE al [hidden] del navegador, aunque tenga la
   misma especificidad. Sin esta línea el aviso no se puede cerrar: el botón
   marca hidden, el navegador obedecería, pero display:grid lo devuelve a la
   pantalla. Y al abrir otra página vuelve a taparlo todo. */
.pp-fondo[hidden]{display:none}
@keyframes pp-entra{from{opacity:0}to{opacity:1}}
.pp-caja{
  position:relative;width:min(430px,100%);max-height:92vh;overflow-y:auto;
  background:var(--papel);border-radius:var(--r-md);box-shadow:var(--sh-4);
  padding:30px 26px 24px;text-align:center;
}
.pp-x{position:absolute;top:11px;right:11px;width:32px;height:32px;border-radius:50%;
  display:grid;place-items:center;color:var(--tinta-50)}
.pp-x:hover{background:var(--crema)}
.pp-x svg{width:17px;height:17px}
.pp-marca{margin:0 auto 15px;display:flex;justify-content:center}
.pp-marca .logo-img{width:auto;height:auto;max-width:168px;max-height:58px}
.pp-caja h3{font-size:1.16rem;margin:0 0 4px}
.pp-dia-txt{font-size:.75rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--tinta-50);margin:0 0 12px}
.pp-frase{font-size:1rem;line-height:1.5;font-weight:600;margin:0 0 6px}
.pp-frase.es-autoriza{color:var(--bosque-600)}
.pp-frase.es-duda{color:var(--info)}
.pp-frase.es-libre{color:var(--ok)}
.pp-digs{display:flex;justify-content:center;flex-wrap:wrap;gap:0;margin:12px 0 6px}
.pp-nota{font-size:.8rem;color:var(--tinta-50);margin:0 0 4px;line-height:1.5}
.pp-msg{font-size:.85rem;color:var(--tinta-70);margin:14px 0 0;line-height:1.6}
.pp-lista-prox{
  list-style:none;padding:14px 0 0;margin:14px 0 0;border-top:1px solid var(--borde);
  display:grid;gap:7px;text-align:left;
}
.pp-lista-prox li{display:flex;justify-content:space-between;align-items:center;gap:12px;
  font-size:.84rem;color:var(--tinta-70)}
.pp-lista-prox li span{text-transform:capitalize}
.pp-lista-prox li b{font-variant-numeric:tabular-nums;letter-spacing:.06em;color:var(--tinta)}
.pp-lista-prox li b.es-duda{color:var(--tinta-30);font-weight:400;font-style:italic;letter-spacing:0}
.pp-caja .btn{margin-top:18px}
.pp-ver-mas{display:block;margin-top:11px;font-size:.8rem;color:var(--musgo);
  text-decoration:underline;text-underline-offset:2px}

/* --- Aviso en la pre-compra ---------------------------------------------- */
.co-pp{
  margin:-4px 0 14px;padding:11px 13px;border-radius:10px;font-size:.82rem;line-height:1.55;
  border-left:3px solid var(--tinta-30);background:var(--crema);color:var(--tinta-70);
}
.co-pp.es-autoriza{border-left-color:var(--bosque-600);background:var(--paramo)}
.co-pp.es-duda{border-left-color:var(--info);background:rgba(44,110,143,.08)}
.co-pp span{display:block;margin-top:4px;font-size:.76rem;color:var(--tinta-50)}
.co-pp a{color:var(--musgo);text-decoration:underline;text-underline-offset:2px}

@media(max-width:640px){
  .pp-form{grid-template-columns:1fr;gap:11px}
  .pp-form .btn{width:100%}
  .pp-veredicto{flex-direction:column;gap:12px;padding:22px 18px}
  .pp-cal{grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:9px}
  .pp-dia-num{font-size:1.55rem}
  .pp-cta{flex-direction:column;align-items:flex-start}
  .pp-cta .btn{width:100%}
}
@media(prefers-reduced-motion:reduce){.pp-fondo{animation:none}}

/* -----------------------------------------------------------------------------
   SUGERENCIA DE SERVICIOS PROPIOS en el carrito
   -------------------------------------------------------------------------- */
/* Vive dentro del área que se desplaza, debajo del plan, así que se separa con
   una línea y no con un fondo propio: ya no es una franja aparte. */
.cart-sugiere{
  margin-top:20px;padding-top:16px;border-top:1px solid var(--borde);
}
.cart-sugiere[hidden]{display:none}
.cs-tit{margin:0;font-family:var(--f-display,inherit);font-size:1rem;font-weight:700;color:var(--tinta)}
.cs-sub{margin:3px 0 12px;font-size:.78rem;line-height:1.5;color:var(--tinta-50)}
.cs-i{
  display:flex;align-items:center;gap:11px;width:100%;padding:9px;margin-bottom:7px;
  background:var(--papel);border:1px solid var(--borde);border-radius:var(--r-sm);
  cursor:pointer;transition:.2s var(--e);text-align:left;
}
.cs-i:last-child{margin-bottom:0}
.cs-i:hover{border-color:var(--musgo);transform:translateY(-1px);box-shadow:var(--sh-1)}
.cs-i img,.cs-th{
  width:46px;height:46px;border-radius:9px;object-fit:cover;flex:none;background:var(--paramo);
}
.cs-txt{flex:1;min-width:0}
.cs-txt b{display:block;font-size:.85rem;font-weight:700;line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cs-txt small{display:block;font-size:.72rem;color:var(--tinta-50);line-height:1.35;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cs-p{font-size:.82rem;font-weight:700;color:var(--bosque-600);flex:none;
  font-variant-numeric:tabular-nums}
.cs-mas{
  width:26px;height:26px;border-radius:50%;background:var(--bosque-600);color:var(--hueso);
  display:grid;place-items:center;font-size:1rem;line-height:1;flex:none;
}

/* -----------------------------------------------------------------------------
   LISTA DEL MAPA
   Todo lo que hay en el territorio, visible sin depender del zoom.
   -------------------------------------------------------------------------- */
/* Una sola fila que se desliza, en vez de una rejilla que se parte.
   Con seis marcas la rejilla cuadraba; con diez dejaba ocho arriba y dos
   sueltas abajo, y cada marca nueva vuelve a descuadrarla. Una tira aguanta
   las que sean y siempre se ve pareja. El degradado del borde derecho avisa
   de que hay más sin necesidad de una flecha. */
.mapa-lista{
  display:flex;gap:10px;margin-top:18px;
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;
  padding-bottom:8px;
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 46px),transparent);
          mask-image:linear-gradient(90deg,#000 calc(100% - 46px),transparent);
}
.mapa-lista::-webkit-scrollbar{height:6px}
.mapa-lista::-webkit-scrollbar-track{background:rgba(252,250,244,.07);border-radius:99px}
.mapa-lista::-webkit-scrollbar-thumb{background:rgba(252,250,244,.26);border-radius:99px}
.mapa-lista::-webkit-scrollbar-thumb:hover{background:var(--dorado)}
.mapa-lista{scrollbar-width:thin;scrollbar-color:rgba(252,250,244,.26) rgba(252,250,244,.07)}

/* La última se queda sin el degradado encima para poder leerla entera. */
.mapa-lista .ml-i:last-child{margin-right:46px}

.ml-i{
  flex:0 0 172px;scroll-snap-align:start;
  display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:10px;
  background:rgba(252,250,244,.06);border:1px solid rgba(252,250,244,.14);
  border-radius:var(--r-md);text-align:left;transition:.25s var(--e);cursor:pointer;
}
.ml-i:hover{background:rgba(252,250,244,.11);border-color:var(--dorado);transform:translateY(-2px)}
.ml-i.is-on{border-color:var(--dorado);background:rgba(242,177,10,.14)}
.ml-i img,.ml-i video{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:9px}
.ml-n{
  font-size:.84rem;font-weight:700;color:var(--hueso);line-height:1.3;
}
.ml-i.is-on .ml-n{color:var(--dorado-luz)}
.ml-t{font-size:.68rem;color:rgba(252,250,244,.6);line-height:1.35}
.ml-i.es-base{border-style:dashed}
@media(max-width:520px){
  .mapa-lista{gap:8px}
  .ml-i{flex-basis:146px}
  .ml-n{font-size:.78rem}
}
/* El nombre no se corta a media palabra por caber en la tarjeta. */
.ml-n{overflow-wrap:anywhere}

/* Marca apartada del montón: se dibuja desplazada de su punto real y un hilo
   fino la conecta con él. Se marca para poder distinguirla de un vistazo. */
/* La marca apartada no lleva ningún adorno propio: la sombra iba en el div, que
   es cuadrado, y dibujaba un recuadro alrededor de una foto redonda. El hilo
   punteado hasta su punto real ya dice todo lo que hay que decir. */

/* =============================================================================
   TARJETA VIP
   Ya no se dibuja con CSS. Son las dos imágenes del diseño —tarjeta-vip-cara.jpg
   y tarjeta-vip-dorso.jpg— con las marcas de los sellos ganados encima.

   Su estilo entero vive en vip_tarjeta_estilo(), en includes/tarjeta-vip.php,
   pegado a la tarjeta: el panel carga su propia hoja y no ésta, así que quien
   pinte la tarjeta se lleva su aspecto puesto sin acordarse de enlazar nada.
   ========================================================================== */


/* Aceptación de las políticas de reserva, en el paso de los datos. */
.co-politicas{
  margin-top:6px;padding:14px 16px;border-radius:12px;
  border:1px solid var(--borde);background:var(--hueso);
}
.cp-tit{
  display:block;font-size:.68rem;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:var(--musgo);margin-bottom:9px;
}
.cp-lista{list-style:none;display:flex;flex-direction:column;gap:7px;margin:0 0 12px;padding:0}
.cp-lista li{
  position:relative;padding-left:17px;font-size:.83rem;line-height:1.5;color:var(--tinta-70);
}
.cp-lista li::before{
  content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;
  border-radius:50%;background:var(--dorado);
}
.cp-lista b{color:var(--tinta);font-weight:700}
.cp-check{padding-top:11px;border-top:1px solid var(--borde)}
/* Cuando falta marcarla, el bloque entero se señala: la casilla sola es
   demasiado pequeña para que se note qué está fallando. */
.co-politicas.falta{border-color:var(--terracota);background:var(--terracota-suave,#FBEAE6)}
.co-politicas.falta .cp-tit{color:var(--terracota)}

/* Servicios sugeridos: la cabecera abre y cierra lo que contiene. */
.cs-i.es-abierto{border-color:var(--musgo);background:var(--crema)}
.cs-i .cs-mas{
  font-size:1.15rem;font-weight:700;line-height:1;color:var(--musgo);
  width:24px;text-align:center;flex:none;
}
.cs-lista{
  display:flex;flex-direction:column;gap:5px;
  margin:-2px 0 9px;padding:9px 9px 9px 16px;
  border-left:2px solid var(--borde-fuerte);
}
.cs-lista[hidden]{display:none}
.cs-op{
  display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;
  background:var(--papel);border:1px solid var(--borde);border-radius:var(--r-sm);
  cursor:pointer;transition:.18s var(--e);text-align:left;
}
.cs-op:hover{border-color:var(--musgo);background:var(--hueso)}
.cs-op-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.cs-op-t b{font-size:.82rem;font-weight:700;line-height:1.25}
.cs-op-t small{font-size:.68rem;color:var(--tinta-50);line-height:1.3}
.cs-op-p{
  font-size:.8rem;font-weight:800;white-space:nowrap;color:var(--musgo);
  font-variant-numeric:tabular-nums;
}

/* Los dos caminos del buscador: buscar o dejar que le armen el viaje. */
.sacciones{display:flex;gap:9px;align-items:center;flex:none}
.sacciones .btn{white-space:nowrap}
@media(max-width:900px){
  .sacciones{width:100%}
  .sacciones .btn{flex:1;justify-content:center}
}

/* =============================================================================
   PLANIFICADOR
   ========================================================================== */
.plan-sec{padding-top:calc(var(--nav-h) + 44px)}

.wz{
  position:relative;border:1px solid var(--borde);border-radius:var(--r-lg);
  background:var(--hueso);box-shadow:var(--sh-1);overflow:hidden;
}
.wz[hidden]{display:none}
.wz-bar{height:3px;width:0;background:var(--dorado);transition:width .5s var(--e)}
.wz-body{padding:clamp(22px,4vw,38px)}
.wz-pane{display:none}
.wz-pane.is-on{display:block;animation:wz-entra .4s var(--e) both}
@keyframes wz-entra{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.wz-q{font-size:clamp(1.3rem,3.2vw,1.9rem);letter-spacing:-.03em;margin:0 0 8px}
.wz-hint{color:var(--tinta-70);line-height:1.6;margin:0 0 22px;max-width:62ch}

.opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:11px;margin-bottom:20px}
.opt{
  display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:15px 16px;
  border:1.5px solid var(--borde);border-radius:var(--r-md);background:var(--papel);
  cursor:pointer;transition:.22s var(--e);text-align:left;
}
.opt:hover{border-color:var(--musgo);transform:translateY(-2px)}
.opt.is-on{border-color:var(--musgo);background:var(--crema);box-shadow:0 0 0 1px var(--musgo) inset}
.opt svg{width:22px;height:22px;color:var(--musgo);margin-bottom:4px}
.opt b{font-size:.98rem;letter-spacing:-.02em}
.opt span{font-size:.76rem;color:var(--tinta-50)}

.wz-campos{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:13px}
.wz-campo label{
  display:block;font-size:.64rem;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:var(--tinta-50);margin-bottom:5px;
}
.wz-campo input,.wz-campo select{
  width:100%;padding:12px 14px;border:1px solid var(--borde);border-radius:12px;
  background:var(--papel);font:inherit;font-size:.95rem;color:var(--tinta);
}
.wz-campo input:focus,.wz-campo select:focus{outline:2px solid var(--dorado);outline-offset:1px}

.wz-rango{margin:22px 0}
.wz-rango .between{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.wz-rango label{font-size:.86rem;font-weight:700}
.wz-rango output{font-size:.86rem;color:var(--musgo);font-weight:700}
.wz-rango input[type=range]{width:100%;accent-color:var(--musgo)}
.wz-escala{display:flex;justify-content:space-between;font-size:.68rem;color:var(--tinta-50);margin-top:4px}

.wz-nav{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:26px}
.wz-nav .btn-ghost svg{transform:rotate(180deg)}

.wz-armando{text-align:center;padding:32px 0}
.wz-armando .bu-aro{margin:0 auto;border-color:var(--borde);border-top-color:var(--musgo)}
.wz-pasos{max-width:400px;margin:26px auto 0;text-align:left;display:flex;flex-direction:column;gap:12px}
.wz-armando .bu-paso{color:var(--tinta-30)}
.wz-armando .bu-paso .d{border-color:var(--borde-fuerte);color:transparent;font-size:.7rem}
.wz-armando .bu-paso.on{color:var(--tinta)}
.wz-armando .bu-paso.on .d{background:var(--ok,#2E6B3E);border-color:var(--ok,#2E6B3E);color:#fff}

.plan[hidden]{display:none}
.plan-vacio{text-align:center;padding:40px 20px;border:1px dashed var(--borde-fuerte);
  border-radius:var(--r-lg)}
.plan-vacio .lead{margin:12px auto 22px;max-width:46ch}

/* =============================================================================
   CALENDARIO DE RANGO
   Un día es pasadía; dos, un viaje con noches.
   ========================================================================== */

/* Sin JavaScript quedan los dos campos de fecha, que funcionan solos. */
.rf-campos{display:flex;align-items:center;gap:6px}
.rf-campos input{min-width:0}
.rf-campos span{color:var(--tinta-30);font-size:.8rem;flex:none}
.rf-listo .rf-campos{display:none}

.rf-boton{
  display:block;width:100%;text-align:left;background:none;border:0;padding:0;
  font:inherit;font-size:.94rem;font-weight:600;color:var(--tinta);cursor:pointer;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.rf-boton small{font-weight:600;color:var(--tinta-50)}
.rf-vacio{color:var(--tinta-30);font-weight:500}

/* Colgado del body y en posición fija: dentro del buscador quedaba preso de
   su contexto de apilamiento —ese contenedor lleva un transform— y la
   sección siguiente se dibujaba encima, robándole los clics. */
.rf-panel{
  position:fixed;top:0;left:0;
  background:var(--papel);border:1px solid var(--borde);border-radius:var(--r-lg);
  box-shadow:var(--sh-3);padding:18px;z-index:9000;width:max-content;max-width:min(680px,92vw);
  cursor:default;
}
.rf-panel[hidden]{display:none}

.rf-nav{display:flex;justify-content:space-between;margin-bottom:-8px;position:relative;z-index:1}
.rf-flecha{
  width:32px;height:32px;border-radius:50%;border:1px solid var(--borde);background:var(--papel);
  color:var(--tinta);font-size:1.1rem;line-height:1;cursor:pointer;transition:.2s var(--e);
}
.rf-flecha:hover:not(:disabled){border-color:var(--musgo);background:var(--crema)}
.rf-flecha:disabled{opacity:.3;cursor:default}

.rf-meses{display:flex;gap:26px}
.rf-mes{flex:1;min-width:236px}
.rf-mes-tit{
  text-align:center;font-weight:800;letter-spacing:-.02em;font-size:.95rem;
  margin-bottom:12px;text-transform:capitalize;
}
.rf-rejilla{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.rf-dow{
  text-align:center;font-size:.66rem;font-weight:800;letter-spacing:.06em;
  color:var(--tinta-50);padding-bottom:6px;
}
.rf-hueco{aspect-ratio:1}

.rf-dia{
  aspect-ratio:1;border:0;background:none;border-radius:50%;cursor:pointer;
  font:inherit;font-size:.86rem;font-weight:600;color:var(--tinta);
  font-variant-numeric:tabular-nums;transition:background .15s,color .15s;
  display:flex;align-items:center;justify-content:center;
}
.rf-dia:hover:not(:disabled):not(.ini):not(.fin){box-shadow:0 0 0 1px var(--tinta) inset}
.rf-dia.fuera{color:var(--tinta-30);cursor:default;text-decoration:line-through}
/* Los extremos van en oscuro y el tramo intermedio en crema, para que el rango
   se lea de un golpe sin tener que contar los días. */
.rf-dia.entre{background:var(--crema);border-radius:0}
.rf-dia.ini,.rf-dia.fin{background:var(--tinta);color:var(--papel)}
.rf-dia.ini:not(.solo){border-radius:50% 0 0 50%}
.rf-dia.fin{border-radius:0 50% 50% 0}
.rf-dia.solo{border-radius:50%}

.rf-pie{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  margin-top:16px;padding-top:14px;border-top:1px solid var(--borde);
}
.rf-ayuda{font-size:.78rem;color:var(--tinta-50)}
.rf-botones{display:flex;gap:8px;align-items:center;flex:none}
.rf-borrar{
  background:none;border:0;font:inherit;font-size:.82rem;font-weight:700;
  color:var(--tinta-70);text-decoration:underline;cursor:pointer;padding:8px 4px;
}
.rf-borrar:hover{color:var(--tinta)}
.rf-listo-btn{padding:9px 20px;font-size:.84rem}

@media(max-width:720px){
  /* Colgado del body mientras está abierto, así el fixed se mide contra la
     ventana y no contra el buscador, que va transformado. */
  .rf-panel.rf-hoja{
    position:fixed;top:auto !important;bottom:0;left:0 !important;right:0;transform:none;
    width:auto;max-width:none;max-height:82vh;overflow-y:auto;
    border-radius:var(--r-lg) var(--r-lg) 0 0;padding-bottom:24px;
  }
  .rf-hoja .rf-meses{flex-direction:column;gap:22px}
  .rf-pie{flex-direction:column;align-items:stretch;gap:10px}
  .rf-botones{justify-content:space-between}
}

/* El calendario dentro del planificador: el campo hace de ancla del panel. */
.wz-campo-fechas{position:relative}
.wz-campo-fechas .rf-boton{
  padding:12px 14px;border:1px solid var(--borde);border-radius:12px;
  background:var(--papel);
}
.wz-campo-fechas.rf-abierto .rf-boton{border-color:var(--musgo)}
.wz-campo-fechas .rf-campos input{
  flex:1;padding:12px 10px;border:1px solid var(--borde);border-radius:12px;
  background:var(--papel);font:inherit;font-size:.9rem;
}
.wz-resumen{
  margin:14px 0 0;padding:12px 15px;border-radius:12px;background:var(--crema);
  font-size:.88rem;color:var(--tinta-70);line-height:1.5;
}
.wz-resumen[hidden]{display:none}
.wz-resumen b{color:var(--tinta)}

/* Las fechas del buscador, arrastradas hasta los resultados. */
.fbanda{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:14px 20px;margin-bottom:26px;border-radius:var(--r-lg);
  background:var(--crema);border:1px solid var(--borde);
}
.fbanda-txt{display:flex;align-items:center;gap:9px;font-size:.92rem;color:var(--tinta-70)}
.fbanda-txt svg{width:19px;height:19px;color:var(--musgo);flex:none}
.fbanda-txt b{color:var(--tinta);font-weight:800}
.fbanda .btn{margin-left:auto}
.fbanda-quitar{font-size:.8rem;color:var(--tinta-50);text-decoration:underline}
.fbanda-quitar:hover{color:var(--terracota)}
@media(max-width:640px){
  .fbanda .btn{margin-left:0;width:100%;justify-content:center}
}

/* =============================================================================
   DESPLEGABLES DEL BUSCADOR
   El <select> real sigue debajo; esto solo lo tapa.
   ========================================================================== */
.dd{position:relative}
.dd-listo select{
  /* No se oculta con display:none: un campo oculto así deja de ser accesible
     y algunos navegadores lo excluyen del formulario. Se tapa. */
  position:absolute;inset:0;opacity:0;pointer-events:none;
}
.dd-boton{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  width:100%;padding:0;border:0;background:none;font:inherit;
  font-size:.94rem;font-weight:600;color:var(--tinta);cursor:pointer;text-align:left;
}
.dd-boton span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dd-flecha{width:16px;height:16px;flex:none;color:var(--tinta-50);transition:transform .25s var(--e)}
.dd-abierto .dd-flecha{transform:rotate(180deg)}

.dd-panel{
  position:fixed;top:0;left:0;z-index:9000;
  background:var(--papel);border:1px solid var(--borde);border-radius:var(--r-md);
  box-shadow:var(--sh-3);padding:7px;max-height:min(58vh,420px);overflow-y:auto;
}
.dd-panel[hidden]{display:none}
/* La opción por la que va el teclado. Sin esto, mover con las flechas o
   escribir para saltar no se veía: la lista respondía y no lo parecía. */
.dd-op.dd-marcada{background:var(--paramo);outline:2px solid var(--musgo);outline-offset:-2px}

.dd-op{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  width:100%;padding:10px 12px;border:0;background:none;border-radius:var(--r-sm);
  font:inherit;font-size:.9rem;font-weight:600;color:var(--tinta);
  cursor:pointer;text-align:left;transition:background .15s;
}
.dd-op:hover{background:var(--crema)}
.dd-op.is-on{background:var(--crema);color:var(--musgo)}
.dd-op svg{width:15px;height:15px;flex:none;color:var(--musgo)}

@media(max-width:720px){
  .dd-panel.dd-hoja{
    top:auto !important;left:0 !important;right:0;bottom:0;
    width:auto !important;max-width:none;max-height:70vh;
    border-radius:var(--r-lg) var(--r-lg) 0 0;padding:12px 12px 24px;
  }
  .dd-hoja .dd-op{padding:14px 14px;font-size:.96rem}
}

/* En el planificador el campo tiene marco propio, como los demás. */
.wz-campo .dd-boton{
  padding:12px 14px;border:1px solid var(--borde);border-radius:12px;background:var(--papel);
}
.wz-campo .dd-abierto .dd-boton{border-color:var(--musgo)}

/* =============================================================================
   ITINERARIO · vista de línea de tiempo
   Sustituye a las tarjetas planas: el viaje se lee como un recorrido.
   ========================================================================== */
.plan-head{
  background:var(--bosque-800,#12301C);color:var(--hueso);
  border-radius:var(--r-lg);padding:clamp(24px,4vw,38px);margin-bottom:26px;
}
.plan-head .eyebrow{color:var(--dorado)}
.plan-head .t-1{color:var(--hueso);margin:12px 0 8px}
.plan-head .lead{color:rgba(252,250,244,.72);max-width:60ch;margin:0}

.plan-kpis{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));
  gap:18px;margin-top:26px;padding-top:22px;border-top:1px solid rgba(252,250,244,.16);
}
.kpi b{
  display:block;font-family:var(--f-display,inherit);font-size:clamp(1.3rem,3vw,1.7rem);
  font-weight:800;letter-spacing:-.035em;line-height:1;color:var(--hueso);
}
.kpi span{display:block;font-size:.74rem;color:rgba(252,250,244,.6);margin-top:6px}

.plan-grid{display:grid;grid-template-columns:1fr 340px;gap:30px;align-items:start}

/* ---- Un día ---- */
.plan-dia{margin-bottom:30px}
.pd-cab{display:flex;align-items:center;gap:13px;flex-wrap:wrap;margin-bottom:16px}
.pd-badge{
  background:var(--musgo);color:var(--hueso);border-radius:99px;
  padding:7px 16px;font-size:.76rem;font-weight:800;letter-spacing:.04em;flex:none;
}
.pd-cab h3{font-size:1.08rem;letter-spacing:-.025em;margin:0}
.pd-res{margin-left:auto;font-size:.78rem;color:var(--tinta-50);white-space:nowrap}
.pd-lleno{color:var(--terracota) !important}
.pd-nota{
  font-style:normal;font-size:.68rem;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--dorado);width:100%;
}

/* La línea del recorrido, con un punto por parada. */
.pd-linea{position:relative;padding-left:30px}
.pd-linea::before{
  content:"";position:absolute;left:7px;top:14px;bottom:34px;width:2px;
  background:linear-gradient(var(--borde-fuerte),var(--borde));border-radius:2px;
}

.pb{
  position:relative;display:flex;align-items:center;gap:13px;
  background:var(--papel);border:1px solid var(--borde);border-radius:var(--r-md);
  padding:14px 16px;margin-bottom:11px;
}
.pb::before{
  content:"";position:absolute;left:-30px;top:calc(50% - 8px);
  width:16px;height:16px;border-radius:50%;
  background:var(--papel);border:2.5px solid var(--borde-fuerte);
}
.pb-exp::before{border-color:var(--musgo)}
.pb-cama::before{border-color:var(--dorado)}
.pb-traslado{background:var(--crema);border-style:dashed}
.pb-traslado::before{width:10px;height:10px;left:-27px;border-width:2px}
.pb-traslado .pb-txt b{font-weight:600;color:var(--tinta-70);font-size:.88rem}

.pb-hora{
  font-size:.74rem;font-weight:800;color:var(--tinta-50);width:70px;flex:none;
  font-variant-numeric:tabular-nums;
}
.pb-ico{font-size:1.15rem;flex:none;line-height:1}
.pb-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.pb-txt b{font-size:.95rem;letter-spacing:-.015em;line-height:1.3}
.pb-txt small{font-size:.75rem;color:var(--tinta-50)}
.pb-incluye{color:var(--musgo) !important;font-weight:700}
.pb-p{font-size:.9rem;font-weight:800;white-space:nowrap;color:var(--musgo);
  font-variant-numeric:tabular-nums;text-align:right;display:flex;flex-direction:column;gap:1px}
.pb-p small{font-size:.68rem;font-weight:600;color:var(--tinta-50)}
.pb-libre{color:var(--tinta-30);font-weight:600}
.pb-x{
  width:26px;height:26px;border-radius:8px;flex:none;border:1px solid var(--borde);
  background:var(--papel);color:var(--tinta-50);cursor:pointer;font-size:1rem;line-height:1;
  transition:.18s var(--e);
}
.pb-x:hover{border-color:var(--terracota);color:var(--terracota)}

.pb-add{
  position:relative;width:100%;padding:12px;border:1px dashed var(--borde-fuerte);
  border-radius:var(--r-md);background:none;color:var(--tinta-50);
  font:inherit;font-size:.84rem;font-weight:700;cursor:pointer;transition:.2s var(--e);
}
.pb-add:hover{border-color:var(--musgo);color:var(--musgo);background:var(--crema)}

/* ---- Resumen ---- */
.plan-aside{position:sticky;top:calc(var(--nav-h) + 18px)}
.sum-card{border:1px solid var(--borde);border-radius:var(--r-lg);
  background:var(--hueso);overflow:hidden;box-shadow:var(--sh-1)}
.sum-hd{padding:16px 20px;background:var(--crema);border-bottom:1px solid var(--borde)}
.sum-hd b{display:block;font-size:.98rem;letter-spacing:-.02em}
.sum-hd span{font-size:.76rem;color:var(--tinta-50)}
.sum-bd{padding:18px 20px 20px}
.sum-l{display:flex;justify-content:space-between;gap:14px;font-size:.88rem;
  padding:7px 0;color:var(--tinta-70)}
.sum-l span:last-child{font-weight:700;color:var(--tinta);font-variant-numeric:tabular-nums}
.sum-total{
  margin-top:10px;padding-top:14px;border-top:1px solid var(--borde);
  font-size:1rem;font-weight:800;color:var(--tinta);
}
.sum-total span:last-child{color:var(--musgo);font-size:1.15rem}
.btn-bloque{width:100%;justify-content:center;margin-top:11px}
.sum-nota{font-size:.74rem;color:var(--tinta-50);line-height:1.5;margin:14px 0 0}

/* ---- Panel para añadir ---- */
.add-panel{
  position:fixed;z-index:9000;width:min(330px,92vw);max-height:min(56vh,420px);
  overflow-y:auto;background:var(--papel);border:1px solid var(--borde);
  border-radius:var(--r-md);box-shadow:var(--sh-3);padding:8px;
}
.add-grupo{margin-bottom:6px}
.add-grupo b{
  display:block;font-size:.64rem;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:var(--tinta-50);padding:9px 11px 5px;
}
.add-op{
  display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  padding:10px 11px;border:0;background:none;border-radius:var(--r-sm);
  font:inherit;text-align:left;cursor:pointer;transition:background .15s;
}
.add-op:hover{background:var(--crema)}
.add-n{display:flex;flex-direction:column;gap:1px;font-size:.88rem;font-weight:700;
  color:var(--tinta);min-width:0}
.add-n small{font-weight:500;font-size:.72rem;color:var(--tinta-50)}
.add-p{font-size:.82rem;font-weight:800;color:var(--musgo);white-space:nowrap}
.add-vacio{padding:16px;font-size:.85rem;color:var(--tinta-50);margin:0;text-align:center}

@media(max-width:1000px){
  .plan-grid{grid-template-columns:1fr}
  .plan-aside{position:static}
}
@media(max-width:560px){
  .pb{flex-wrap:wrap;gap:9px}
  .pb-hora{width:100%;order:-1}
  .pd-res{margin-left:0;width:100%}
  .pd-linea{padding-left:22px}
  .pb::before{left:-22px}
  .pb-traslado::before{left:-20px}
}

/* Qué lleva el plato, y el enlace para cambiarlo. */
.pb-desc{color:var(--tinta-70) !important;line-height:1.45}
.pb-cambia{
  align-self:flex-start;margin-top:5px;padding:0;border:0;background:none;
  font:inherit;font-size:.74rem;font-weight:800;color:var(--musgo);
  text-decoration:underline;text-underline-offset:2px;cursor:pointer;
}
.pb-cambia:hover{color:var(--terracota)}
.add-op.is-on{background:var(--crema);box-shadow:0 0 0 1px var(--musgo) inset}
.add-op .add-n small{white-space:normal;line-height:1.4}
.add-panel .add-op{align-items:flex-start}

/* Acompañantes en el carrito. */
.co-acomp{
  border:1px solid var(--borde);border-radius:var(--r-md);
  padding:14px;background:var(--crema);margin-bottom:14px;
}
.co-acomp[hidden]{display:none}
.co-acomp.falta{border-color:var(--terracota);box-shadow:0 0 0 3px rgba(217,102,47,.12)}
.co-acomp-tit{margin-bottom:11px}
.co-acomp-tit b{display:block;font-size:.9rem;letter-spacing:-.01em}
.co-acomp-f{display:flex;gap:8px;align-items:center;margin-bottom:8px}
.co-acomp-f:last-child{margin-bottom:0}
.co-acomp-n{
  width:22px;height:22px;flex:none;border-radius:50%;background:var(--papel);
  border:1px solid var(--borde);display:grid;place-items:center;
  font-size:.7rem;font-weight:800;color:var(--tinta-50);
}
.co-acomp-f input{
  flex:1;min-width:0;padding:9px 11px;border:1px solid var(--borde);
  border-radius:10px;background:var(--papel);font:inherit;font-size:.86rem;
}
.co-acomp-f input:focus{outline:2px solid var(--dorado);outline-offset:1px}
@media(max-width:520px){
  .co-acomp-f{flex-wrap:wrap}
  .co-acomp-f input{flex:1 1 100%}
  .co-acomp-n{order:-1}
}

/* Lo que incluye cada parada del itinerario.
   Va en verde y en pequeño: tiene que leerse como una promesa, no competir con
   el nombre de la experiencia. Y siempre en dos líneas como mucho —el bloque de
   un día no puede convertirse en un párrafo por llevar nueve cosas—. */
.pb-lleva{
  margin-top:5px;font-size:.74rem;line-height:1.45;color:var(--tinta-50);
}
.pb-lleva summary{display:block;cursor:pointer;list-style:none}
.pb-lleva summary::-webkit-details-marker{display:none}
.pb-lleva-r{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;
}
.pb-lleva-r b{font-weight:800;color:var(--musgo)}
.pb-lleva-r em{font-style:normal}
.pb-lleva-r b::after{content:": "}
.pb-lleva i{
  display:inline-block;margin-top:2px;
  font-style:normal;font-weight:800;color:var(--musgo);
  text-decoration:underline;text-underline-offset:2px;
}
.pb-lleva summary:hover i{color:var(--terracota)}
/* Abierto, la lista completa ya está debajo: repetir las tres primeras sobra. */
.pb-lleva[open] .pb-lleva-r em,
.pb-lleva[open] i{display:none}
.pb-lleva ul{
  margin:5px 0 2px;padding:0;list-style:none;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:3px 14px;
}
.pb-lleva li{position:relative;padding-left:13px}
.pb-lleva li::before{
  content:"";position:absolute;left:2px;top:.5em;
  width:4px;height:4px;border-radius:50%;background:var(--musgo);
}
/* -----------------------------------------------------------------------------
   IDIOMAS
----------------------------------------------------------------------------- */

/* El sitio se compone con una tipografía pensada para el español, que no trae
   glifos chinos ni cirílicos. Sin esta pila, el mandarín cae en la fuente que
   el sistema tenga a mano y el resultado cambia de un ordenador a otro. Y el
   espaciado negativo, que en latinas afina el titular, en chino junta los
   ideogramas hasta hacerlos ilegibles: por eso se anula. */
:root:lang(zh),
[lang="zh-Hans"], [lang="zh-Hans"] *{
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",
              system-ui,sans-serif;
}
[lang="zh-Hans"] .t-1,[lang="zh-Hans"] .t-2,[lang="zh-Hans"] h1,
[lang="zh-Hans"] h2,[lang="zh-Hans"] h3{letter-spacing:normal}

[lang="ru"]{font-family:system-ui,"Segoe UI","Noto Sans",sans-serif}

/* El selector. Va en <details> para que cambiar de idioma no dependa de que el
   JavaScript haya cargado. */
.sel-idioma{position:relative;flex:none}
.sel-idioma summary{
  display:flex;align-items:center;gap:5px;cursor:pointer;list-style:none;
  height:38px;padding:0 10px;border:1px solid var(--borde);border-radius:var(--r-md);
  background:var(--papel);color:var(--tinta-70);
  font-size:.76rem;font-weight:800;letter-spacing:.02em;
  transition:.18s var(--e);
}
.sel-idioma summary::-webkit-details-marker{display:none}
.sel-idioma summary:hover{border-color:var(--musgo);color:var(--musgo)}
.sel-idioma summary svg{width:16px;height:16px}
.sel-idioma[open] summary{border-color:var(--musgo);color:var(--musgo)}

.sel-idioma-lista{
  position:absolute;top:calc(100% + 6px);right:0;z-index:60;
  min-width:158px;padding:6px;
  background:var(--papel);border:1px solid var(--borde);border-radius:var(--r-md);
  box-shadow:0 14px 34px rgba(0,0,0,.13);
  display:flex;flex-direction:column;gap:1px;
}
.sel-idioma-lista a{
  display:flex;align-items:center;gap:9px;
  padding:9px 11px;border-radius:8px;
  font-size:.84rem;font-weight:600;color:var(--tinta-70);text-decoration:none;
  transition:.14s var(--e);
}

/* Las banderas van dibujadas en SVG, no como emoji: Windows no las trae en
   su tipografía y enseñaría las dos letras del país en su lugar. */
.bandera{flex:none;display:block;border-radius:3px}
.sel-idioma summary .bandera{width:19px;height:13px}
.nav-movil-idiomas .bandera{width:17px;height:11px}
.sel-idioma-lista a:hover{background:var(--crema);color:var(--musgo)}
.sel-idioma-lista a.is-on{background:var(--crema);color:var(--musgo);font-weight:800}

/* En el menú móvil no hay sitio para un desplegable dentro de otro: los cinco
   idiomas se ponen en fila y se acabó. */
.nav-movil-idiomas{
  display:flex;flex-wrap:wrap;gap:6px;
  margin-top:14px;padding-top:14px;border-top:1px solid var(--borde);
}
.nav-movil-idiomas a{
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 12px;border:1px solid var(--borde);border-radius:99px;
  font-size:.78rem;font-weight:700;color:var(--tinta-70);text-decoration:none;
}
.nav-movil-idiomas a.is-on{background:var(--musgo);border-color:var(--musgo);color:#fff}

@media(max-width:900px){
  .sel-idioma{display:none}          /* en móvil manda el de dentro del menú */
}

/* =============================================================================
   PESTAÑAS DEL CATÁLOGO · Experiencias · Dormir · Comer
   -----------------------------------------------------------------------------
   Son más grandes que los chips de modalidad, y a propósito: primero se elige
   QUÉ se busca —una ruta, una cama, un plato— y después con qué filtro. Si las
   tres pestañas se vieran igual que los siete chips de abajo, la decisión
   principal quedaría escondida entre las secundarias.

   Cada una lleva su cuenta. Un número al lado invita a entrar mucho más que un
   rótulo solo: «Dormir 7» dice que hay siete cosas que ver.
   ========================================================================== */
.cat-tabs{
  display:flex;gap:10px;flex-wrap:wrap;margin-bottom:26px;
  border-bottom:1px solid var(--borde);padding-bottom:18px;
}
.cat-tab{
  display:inline-flex;align-items:center;gap:9px;
  padding:12px 20px;border-radius:100px;
  border:1.5px solid var(--borde);background:var(--papel);
  color:var(--tinta-70);font-weight:700;font-size:.96rem;
  text-decoration:none;transition:.2s;
}
.cat-tab svg{width:19px;height:19px;flex:none}
.cat-tab b{
  font-size:.78rem;font-weight:800;line-height:1;
  padding:4px 8px;border-radius:100px;
  background:var(--crema);color:var(--tinta-50);
}
.cat-tab:hover{border-color:var(--musgo);color:var(--tinta);transform:translateY(-2px)}
.cat-tab.is-on{
  background:var(--bosque-600);border-color:var(--bosque-600);color:#fff;
  box-shadow:0 6px 18px rgba(70,96,30,.28);
}
.cat-tab.is-on b{background:rgba(255,255,255,.22);color:#fff}

@media(max-width:640px){
  .cat-tabs{gap:8px}
  .cat-tab{padding:10px 15px;font-size:.9rem}
  .cat-tab svg{width:17px;height:17px}
}

/* =============================================================================
   LA COMIDA DEL ITINERARIO, UN PLATO POR VIAJERO
   -----------------------------------------------------------------------------
   Antes era un solo plato con un solo botón y los dos viajeros comían lo mismo.
   Ahora cada persona lleva su renglón: el nombre, lo que cuesta y su propio
   botón de cambiar. Con un solo viajero no se numera, y se ve igual que antes.
   ========================================================================== */
.pb-platos{display:flex;flex-direction:column;gap:8px;margin-top:8px}

.pb-plato{
  display:grid;
  grid-template-columns:auto 1fr auto auto;
  align-items:center;gap:10px;
  padding:8px 10px;
  background:var(--crema);
  border:1px solid var(--borde);
  border-radius:12px;
}
.pb-quien{
  font-size:.62rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--tinta-50);white-space:nowrap;
}
.pb-plato-n{display:flex;flex-direction:column;gap:2px;min-width:0;font-size:.9rem;font-weight:700;color:var(--tinta)}
.pb-plato-n small{font-weight:400;font-size:.78rem;color:var(--tinta-50);line-height:1.4}
.pb-plato-p{font-size:.88rem;font-weight:800;color:var(--musgo);white-space:nowrap}

.pb-plato .pb-cambia{
  border:1px solid var(--borde-fuerte);background:var(--papel);
  border-radius:100px;padding:5px 12px;
  font:inherit;font-size:.76rem;font-weight:700;color:var(--tinta-70);
  cursor:pointer;white-space:nowrap;transition:.18s;
}
.pb-plato .pb-cambia:hover{border-color:var(--musgo);color:var(--tinta);background:var(--paramo)}

.pb-todos{
  align-self:flex-start;
  border:0;background:none;padding:2px 0;
  font:inherit;font-size:.78rem;font-weight:700;color:var(--musgo);
  text-decoration:underline;cursor:pointer;
}
.pb-todos:hover{color:var(--bosque-700)}

/* En pantalla estrecha el renglón se parte en dos filas: cuatro columnas no
   caben en un teléfono sin dejar el nombre del plato en una palabra por línea. */
@media(max-width:560px){
  .pb-plato{grid-template-columns:1fr auto;row-gap:6px}
  .pb-quien{grid-column:1/-1}
  .pb-plato .pb-cambia{grid-column:2}
}

/* =============================================================================
   DE DÓNDE VIENES Y CUÁNTO TARDAS
   -----------------------------------------------------------------------------
   Sale en dos sitios: encima del itinerario del planificador y dentro del
   carrito. El mismo bloque, con una variante más estrecha para el carrito, que
   es una columna lateral.

   No sale en el kiosco: la tablet está en la oficina de Murillo y quien la toca
   ya llegó.
   ========================================================================== */
.origen{
  background:var(--crema);
  border:1px solid var(--borde);
  border-radius:var(--r-card, 20px);
  padding:18px 20px;
  margin-bottom:22px;
}
.origen[hidden]{display:none}

.org-fila{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.org-lbl{
  font-size:.68rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tinta-50);
}
.org-sel{
  /* Ancho fijo, nunca base flexible: dentro del carrito la fila es una
     columna, y ahí un flex-basis se convertiría en ALTO y saldría un
     desplegable de 280 px de alto. */
  flex:0 1 auto;width:280px;max-width:100%;min-width:0;
  border:1.5px solid var(--borde-fuerte);border-radius:100px;
  padding:10px 16px;font:inherit;font-size:.92rem;
  background:var(--papel);color:var(--tinta);outline:none;
}
.org-sel:focus{border-color:var(--musgo)}

.org-geo{
  border:1.5px solid var(--borde-fuerte);background:var(--papel);
  border-radius:100px;padding:10px 16px;
  font:inherit;font-size:.86rem;font-weight:700;color:var(--tinta-70);
  cursor:pointer;white-space:nowrap;transition:.18s;
}
.org-geo:hover{border-color:var(--musgo);color:var(--tinta);background:var(--paramo)}
.org-geo:disabled{opacity:.6;cursor:default}

.org-res{
  margin-top:12px;font-size:.95rem;color:var(--tinta);line-height:1.5;
}
/* La frase va entera en verde: el tiempo no se puede resaltar por separado
   porque en varios idiomas no está en el mismo sitio de la oración. */
.org-res b{color:var(--musgo);font-weight:800}
.org-res small{display:block;margin-top:4px;font-size:.82rem;color:var(--tinta-50);line-height:1.5}
.org-vacia{color:var(--tinta-50);font-size:.88rem}

.org-aviso{display:block;margin-top:8px;font-size:.8rem;color:var(--terracota)}

/* En el carrito hay menos ancho: todo en columna. */
.origen-carrito{padding:14px 16px;margin:0 0 14px}
.origen-carrito .org-fila{flex-direction:column;align-items:stretch;gap:8px}
.origen-carrito .org-sel,
.origen-carrito .org-geo,
.origen-carrito .dd{width:100%;flex:0 0 auto}

/* El ancho vive en el envoltorio del desplegable, no en el <select>.
   El componente esconde el campo real y pinta un botón encima: los 280 px que
   estaban puestos en .org-sel se los quedaba un elemento invisible y el botón
   salía del ancho de su texto — 86 px con «Medellín» dentro. */
.origen .dd{flex:0 1 auto;width:280px;max-width:100%;min-width:0}
.origen .dd-boton{width:100%}
/* En el carrito la fila es una columna y ocupa todo el ancho. Va después
   de la regla de arriba a propósito: las dos pesan lo mismo y gana la
   última. */
.origen.origen-carrito .dd{width:100%}
.origen-carrito .org-res{font-size:.88rem}

/* =============================================================================
   OPINIONES DE GOOGLE
   -----------------------------------------------------------------------------
   La nota real del negocio, traída del perfil de Google una vez al día. Sale una
   sola vez en la portada y no en cada tarjeta: Google califica el negocio, no
   cada experiencia por separado.
   ========================================================================== */
.resenas{background:var(--crema)}

.res-cab{
  display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);
  gap:34px;align-items:center;margin-bottom:34px;
}
.res-nota{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  background:var(--papel);border:1px solid var(--borde);
  border-radius:var(--r-lg, 24px);padding:24px 30px;min-width:200px;
}
.res-num{font-family:var(--f-title);font-size:3.2rem;line-height:1;color:var(--musgo)}
.res-estrellas{display:flex;gap:2px;color:var(--dorado, #c8a24a)}
.res-estrellas svg{width:16px;height:16px}
.res-de{font-size:.8rem;color:var(--tinta-50);text-align:center}
.res-txt h2{margin:0 0 10px}
.res-txt .small{color:var(--tinta-70);margin-bottom:16px;max-width:52ch;line-height:1.6}

.res-lista{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr));
  gap:18px;
}
.res-item{
  background:var(--papel);border:1px solid var(--borde);
  border-radius:var(--r-card, 20px);padding:20px 22px;margin:0;
}
.res-quien{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.res-ini{
  display:grid;place-items:center;width:40px;height:40px;flex:none;
  border-radius:100px;background:var(--paramo);color:var(--musgo);
  font-weight:800;font-size:1.05rem;
}
.res-autor{display:block;font-weight:700;font-size:.92rem;color:var(--tinta)}
a.res-autor:hover{color:var(--musgo);text-decoration:underline}
.res-cuando{display:block;font-size:.76rem;color:var(--tinta-50)}
.res-item blockquote{
  margin:0;font-size:.92rem;line-height:1.6;color:var(--tinta-70);
}

@media (max-width:760px){
  .res-cab{grid-template-columns:1fr;gap:20px;text-align:center}
  .res-nota{min-width:0}
  .res-txt .small{margin-inline:auto}
}

/* =============================================================================
   DORMIR Y COMER EN LA PORTADA
   -----------------------------------------------------------------------------
   Dos puertas grandes, una por página. Sustituyen a las pestañas con una
   tarjeta pequeña dentro: ahora detrás de cada una hay una página propia con
   seis habitaciones y setenta y cuatro platos, y eso no cabía en una fichita.
   ========================================================================== */
.eco{background:var(--crema)}

.eco-puertas{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));
  gap:24px;
}

.eco-puerta{
  display:flex;flex-direction:column;min-width:0;
  background:var(--papel);border:1px solid var(--borde);
  border-radius:var(--r-lg, 24px);overflow:hidden;
  transition:.4s var(--e);
}
.eco-puerta:hover{box-shadow:var(--sh-2);transform:translateY(-4px)}
.eco-puerta:hover .ep-btn{color:var(--musgo)}
.eco-puerta:hover .ep-btn svg{transform:translateX(4px)}

.ep-foto{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--paramo)}
.ep-foto img,.ep-foto video{width:100%;height:100%;object-fit:cover;display:block}
.ep-foto .veil{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(16,24,6,.42) 0%,rgba(16,24,6,0) 46%);
}
.ep-ojo{
  position:absolute;top:14px;left:14px;display:inline-flex;align-items:center;gap:7px;
  padding:7px 14px;border-radius:100px;
  background:rgba(252,250,244,.16);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid rgba(252,250,244,.28);
  color:var(--hueso);font-size:.72rem;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;
}
.ep-ojo svg{width:14px;height:14px}

.ep-cuerpo{display:flex;flex-direction:column;flex:1;padding:22px 24px 24px;gap:8px}
.ep-cuerpo h3{margin:0}
.ep-cuerpo .small{color:var(--tinta-70);line-height:1.55;margin:0}

.ep-datos{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin-top:auto;padding-top:16px;border-top:1px solid var(--borde);
}
.ep-cuenta{
  font-size:.78rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--tinta-50);
}
.ep-desde{display:flex;align-items:baseline;gap:6px;color:var(--tinta)}
.ep-desde small{font-size:.72rem;color:var(--tinta-50)}
.ep-desde b{font-family:var(--f-title);font-size:1.3rem;color:var(--musgo)}

.ep-btn{
  display:inline-flex;align-items:center;gap:8px;margin-top:14px;
  font-weight:800;font-size:.88rem;color:var(--tinta);transition:.28s var(--e);
}
.ep-btn svg{width:16px;height:16px;transition:.28s var(--e)}

/* =============================================================================
   LA CASA, EN EL ENCABEZADO DE DORMIR Y COMER
   -----------------------------------------------------------------------------
   El hostal y el restaurante dejaron de competir con lo que se reserva. Aquí va
   lo que solo ellos tienen: la foto, qué son y las reglas de la casa.
   ========================================================================== */
.casa{
  display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);
  gap:26px;align-items:center;
  background:var(--crema);border:1px solid var(--borde);
  border-radius:var(--r-lg, 24px);padding:22px;margin-bottom:26px;
}
.casa:only-child{margin-bottom:26px}
.casa-foto{border-radius:var(--r-md, 16px);overflow:hidden;aspect-ratio:4/3;background:var(--paramo)}
.casa-foto img,.casa-foto video{width:100%;height:100%;object-fit:cover;display:block}
.casa-txt h2{margin:0 0 4px}
.casa-lema{
  font-family:var(--f-script);color:var(--terracota);font-size:1.05rem;margin:0 0 10px;
}
.casa-txt .small{color:var(--tinta-70);line-height:1.6;margin:0;max-width:62ch}

.casa-reglas{
  display:flex;flex-wrap:wrap;gap:8px 20px;margin:14px 0 0;padding:0;list-style:none;
}
.casa-reglas li{
  display:flex;align-items:flex-start;gap:7px;font-size:.84rem;color:var(--tinta-70);
}
.casa-reglas svg{width:15px;height:15px;flex:none;margin-top:2px;color:var(--musgo)}

/* Sin foto no se deja un hueco gris: el texto ocupa todo el ancho. */
.casa:not(:has(.casa-foto)){grid-template-columns:1fr}

@media (max-width:760px){
  .casa{grid-template-columns:1fr;gap:18px;padding:18px}
}

/* =============================================================================
   FICHA RÁPIDA · las fotos de una habitación, encima de la lista
   -----------------------------------------------------------------------------
   Una habitación no tiene página propia a propósito: su ficha enseñaría lo
   mismo que ya está en la tarjeta. Pero las fotos sí sobran en una tarjeta, y
   estaban cargadas sin que nadie pudiera verlas.

   Dos columnas en pantalla ancha —carrusel y texto— y una sola en el teléfono,
   con el pie del precio siempre a la vista para no tener que buscar el botón.
   ========================================================================== */

/* La foto de la tarjeta, cuando abre ficha, es un botón. Hay que quitarle lo
   que el navegador le pone por ser botón: sin esto sale con borde y con el
   fondo gris del sistema, y encima recorta la imagen. */
.card-media-abre{
  border:0;padding:0;margin:0;background:none;font:inherit;color:inherit;
  display:block;width:100%;text-align:inherit;cursor:zoom-in;
}
.card-lupa{
  position:absolute;right:10px;bottom:10px;z-index:2;pointer-events:none;
  width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(20,28,14,.62);color:#fff;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  opacity:0;transform:translateY(4px);transition:.25s var(--e);
}
.card-lupa svg{width:17px;height:17px}
.card:hover .card-lupa,
.card-media-abre:focus-visible + .card-lupa{opacity:1;transform:none}
/* En pantalla táctil no hay hover: ahí se enseña siempre. */
@media (hover:none){ .card-lupa{opacity:1;transform:none} }

.fr[hidden]{display:none}
.fr{position:fixed;inset:0;z-index:1200;display:flex;align-items:center;justify-content:center;padding:20px}
.fr-fondo{position:absolute;inset:0;background:rgba(12,18,10,.78);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.fr-caja{
  position:relative;z-index:1;width:min(980px,100%);max-height:calc(100dvh - 40px);
  overflow:auto;background:var(--hueso,#F7F0E6);border-radius:20px;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.7);
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  grid-template-areas:'vista lado' 'pie pie';
}
.fr-x{
  position:absolute;top:10px;right:12px;z-index:3;
  width:36px;height:36px;border:0;border-radius:50%;cursor:pointer;
  background:rgba(20,28,14,.62);color:#fff;font-size:24px;line-height:1;
}
.fr-vista{grid-area:vista;position:relative;background:#0E140C;min-height:260px;display:flex}
.fr-lienzo{flex:1;display:flex;align-items:center;justify-content:center}
.fr-lienzo img{width:100%;height:100%;object-fit:cover;display:block}
.fr-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:40px;height:40px;border:0;border-radius:50%;cursor:pointer;
  background:rgba(20,28,14,.55);color:#fff;font-size:26px;line-height:1;
}
.fr-nav[hidden]{display:none}
.fr-ant{left:10px} .fr-sig{right:10px}
.fr-cuenta{
  position:absolute;left:50%;bottom:10px;transform:translateX(-50%);z-index:2;margin:0;
  padding:3px 10px;border-radius:99px;background:rgba(20,28,14,.6);color:#fff;font-size:.78rem;
}
.fr-cuenta[hidden]{display:none}

.fr-lado{grid-area:lado;padding:26px 24px 18px;min-width:0}
.fr-lema{color:var(--terra,#A8563C);font-style:italic;margin:2px 0 10px}
.fr-rotulo{
  margin:16px 0 8px;font-size:.72rem;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tx50,#78877D);
}
.fr-lista{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.fr-lista li{display:flex;gap:8px;align-items:flex-start;font-size:.9rem;line-height:1.45}
.fr-lista svg{width:16px;height:16px;flex:none;margin-top:2px;color:var(--verde,#46601E)}

.fr-pie{
  grid-area:pie;display:flex;align-items:center;justify-content:space-between;
  gap:14px;flex-wrap:wrap;padding:16px 24px 20px;border-top:1px solid var(--borde,#EDE7D6);
}

/* EN EL TELÉFONO, EL PRECIO Y EL BOTÓN NO SE VAN DE LA PANTALLA.
   -----------------------------------------------------------------------------
   Con la caja entera desplazándose, una habitación con diez cosas en «Incluye»
   dejaba el precio y el «Añadir» por debajo del borde: había que leerse la
   lista entera para descubrir que existía un botón.

   Así que en móvil la caja deja de ser rejilla y pasa a ser una columna con
   tres piezas: la foto arriba con altura fija, el texto en medio —que es LO
   ÚNICO que se desplaza— y el pie abajo, quieto.

   El «min-height:0» del medio no es adorno: sin él una columna flexible se
   niega a encogerse por debajo de su contenido, el texto empuja al pie hacia
   abajo y volvemos al problema de partida. */
@media (max-width:760px){
  .fr{padding:0}
  .fr-caja{
    display:flex;flex-direction:column;
    width:100%;height:100dvh;max-height:100dvh;
    border-radius:0;overflow:hidden;
  }
  .fr-vista{flex:none;height:min(42dvh,300px);min-height:0}
  .fr-lado{flex:1;min-height:0;overflow-y:auto;padding:20px 18px 8px;-webkit-overflow-scrolling:touch}
  .fr-pie{
    flex:none;padding:14px 18px calc(14px + env(safe-area-inset-bottom));
    background:var(--hueso,#F7F0E6);
  }
  .fr-pie .add-btn{flex:1;justify-content:center}
}

/* El QR de la sección de la oficina, cuando es un código de verdad y no el
   icono: el SVG trae su propio margen blanco —la norma lo llama zona
   tranquila— así que aquí solo hay que dejarlo llenar su recuadro. */

/* =============================================================================
   BOTÓN FLOTANTE DE WHATSAPP · «Comunícate con un asesor»
   -----------------------------------------------------------------------------
   Va a la IZQUIERDA porque Kuma ocupa la derecha. Los dos abajo, uno en cada
   esquina, sin pisarse ni en el teléfono más estrecho.

   Verde de WhatsApp y el logo en blanco: es el único sitio del sitio donde se
   usa un color que no es de la casa, y es a propósito — ese verde se reconoce
   sin leer nada, que es justo lo que tiene que pasar con un botón de ayuda.
   ========================================================================== */
.wa-fab{
  position:fixed;left:24px;bottom:24px;z-index:190;
  width:62px;height:62px;border-radius:var(--r-full);
  background:#25D366;color:#fff;
  display:grid;place-items:center;
  box-shadow:0 14px 38px -10px rgba(18,140,60,.75);
  transition:transform .45s var(--e);
}
.wa-fab:hover{transform:scale(1.08)}
.wa-fab svg{width:33px;height:33px;display:block}

/* El aro que late, igual que el de Kuma: los dos botones son hermanos y tienen
   que leerse como la misma familia aunque uno sea verde de marca ajena. */
.wa-fab::before{
  content:"";position:absolute;inset:-5px;border-radius:var(--r-full);
  border:1.5px solid rgba(37,211,102,.5);animation:kuma-ring 2.8s ease-out infinite;
}
.wa-fab.is-hidden{transform:scale(0);pointer-events:none}

/* La leyenda sale a la DERECHA del botón —al revés que la de Kuma— porque el
   botón está pegado al borde izquierdo y hacia fuera no hay sitio. */
.wa-globo{
  position:absolute;left:calc(100% + 12px);top:50%;
  transform:translateY(-50%) scale(.86);
  background:var(--hueso);color:var(--bosque-700);
  font-size:.82rem;font-weight:700;white-space:nowrap;
  padding:10px 16px;border-radius:100px;
  box-shadow:0 10px 28px -12px rgba(15,36,23,.5);
  border:1px solid var(--borde);
  opacity:0;pointer-events:none;
  transition:opacity .5s var(--e),transform .5s var(--e);
}
.wa-globo::after{
  content:"";position:absolute;right:100%;top:50%;transform:translateY(-50%);
  border:7px solid transparent;border-right-color:var(--hueso);
}
/* Se queda puesta. La primera versión la retiraba a los seis segundos y a
   partir de ahí el botón quedaba mudo: un círculo verde sin explicación
   para quien llegara después a esa parte de la página. Igual que la de
   Kuma, que también se queda. */
.wa-fab:hover .wa-globo,
.wa-fab:focus-visible .wa-globo,
.wa-globo.se-ve{opacity:1;transform:translateY(-50%) scale(1)}

@media (max-width:560px){
  .wa-fab{left:16px;bottom:16px;width:54px;height:54px}
  .wa-fab svg{width:29px;height:29px}
}

@media (prefers-reduced-motion:reduce){
  .wa-fab::before{animation:none}
  .wa-fab,.wa-globo{transition:none}
}

/* =============================================================================
   LAS DOS LEYENDAS EN EL TELÉFONO
   -----------------------------------------------------------------------------
   Va al final de la hoja A PROPÓSITO: la de Kuma la esconden dos reglas más
   arriba con «display:none», y sobreescribir las dos por separado deja el
   arreglo repartido en tres sitios que se pueden desincronizar. Aquí, lo
   último que se lee es lo que manda.

   EL PROBLEMA A RESOLVER. Las leyendas iban al LADO de su botón. En un
   escritorio sobra sitio; en un teléfono de 360 px, la frase entera más el
   botón se comen media pantalla, y como hay un botón en cada esquina, las dos
   frases chocaban en el medio. Por eso estaban escondidas — y el resultado eran
   dos círculos de colores sin explicación, que es peor que el choque.

   LA SOLUCIÓN. Encima del botón, no al lado, y con el ancho topado a media
   pantalla: así no pueden tocarse por larga que sea la frase que se escriba en
   Ajustes. Si no cabe en un renglón, pasa a dos.
   ========================================================================== */
@media (max-width:640px){
  .kuma-globo{
    /* GRID, NO BLOCK. Las dos frases —el saludo y la invitación— viven apiladas
       en la MISMA celda para que el globo no dé un salto de alto al cambiar de
       una a otra. Aquí estaba puesto en «block», y en bloque la frase invisible
       sigue ocupando su sitio: el globo medía el doble de lo que le tocaba y
       salía como una pelota encima de la tarjeta de búsqueda. */
    display:grid;
    right:0;left:auto;top:auto;bottom:calc(100% + 10px);
    transform:none;white-space:normal;

    /* ANCHO FIJO, no solo un tope.
       Con «max-width» a secas, el grid encoge la caja hasta la palabra más larga
       y el texto sale en cuatro renglones de dos palabras. Dándole el ancho, se
       reparte en dos renglones y se lee de un vistazo.

       Media pantalla menos el margen: es lo que impide que este globo y el de
       WhatsApp lleguen a tocarse, por larga que sea la frase que se escriba
       desde Ajustes. */
    width:calc(50vw - 22px);

    /* Alineado a la izquierda. En un texto de dos renglones, alinear a la
       derecha deja el borde izquierdo dentado y se lee peor. */
    text-align:left;
    line-height:1.3;

    /* Un bocadillo, no una píldora. Los 100px del diseño de escritorio son para
       una frase de un renglón; en una caja de dos, ese radio la redondea entera
       y deja de parecer un globo de diálogo. */
    border-radius:16px;
    font-size:.76rem;
    padding:9px 13px;
  }
  /* El pico del globo pasa de mirar a un lado a mirar hacia abajo. */
  .kuma-globo::after{
    left:auto;right:20px;top:100%;transform:none;
    border-color:transparent;border-top-color:var(--hueso);
  }
  .kuma-fab.saluda .kuma-globo{transform:none}
}

@media (max-width:560px){
  .wa-globo{
    left:0;top:auto;bottom:calc(100% + 10px);
    transform:none;white-space:normal;
    /* Ancho fijo y no solo un tope, por lo mismo que el globo de Kuma: con
       «max-width» la caja se encoge a la palabra mas larga y «Comunicate con
       un asesor» sale en tres renglones de dos palabras. Con el ancho dado,
       se reparte en dos y se lee de corrido. */
    width:calc(50vw - 22px);line-height:1.3;
    /* Bocadillo, no pildora: los 100px del escritorio son para un renglon. */
    border-radius:16px;
    font-size:.76rem;padding:9px 13px;
  }
  .wa-globo::after{
    right:auto;left:20px;top:100%;transform:none;
    border-color:transparent;border-top-color:var(--hueso);
  }
  .wa-fab:hover .wa-globo,.wa-fab:focus-visible .wa-globo,
  .wa-globo.se-ve{transform:none}
}

/* =============================================================================
   LOS LOGOS DE LAS REDES, EN EL PIE
   -----------------------------------------------------------------------------
   Discos de 38 px con el logo dentro, sobre el verde del pie. Al pasar por
   encima se aclara el fondo en vez de teñirse cada uno de su color de marca:
   son cuatro marcas con cuatro colores y pintarlas convierte el pie en un
   semáforo. Todas en hueso, el color del texto de al lado.
   ========================================================================== */
.foot-redes{display:flex;gap:9px;margin-top:20px;flex-wrap:wrap}
/* Disco BLANCO y el logo en su color. El fondo translúcido de antes dejaba el
   logo del color del texto; ahora cada marca va con el suyo, y para que los
   cinco se lean sobre el verde oscuro del pie hace falta el disco claro
   debajo: TikTok es negro y sobre verde no se ve. */
/* EL SELECTOR VA CON DOS CLASES A PROPÓSITO.
   -------------------------------------------------------------------------
   Más abajo en esta hoja está «.foot-grid a { display:block; padding:5px 0 }»,
   que viste a todos los enlaces del pie. Ese selector pesa más que «.foot-red»
   a secas —una clase y un tipo contra una clase sola— y además va después, así
   que ganaba dos veces: convertía el disco en bloque, le metía 5 px de relleno
   arriba y tiraba el logo hacia arriba. Se veía descentrado y no había forma de
   arreglarlo tocando el SVG, porque el SVG estaba bien: el logo estaba clavado
   en el centro de su lienzo y lo que fallaba era la caja.

   Con dos clases pesa más y el centrado vuelve. El relleno se pone a cero por
   lo mismo. */
.foot-redes .foot-red{
  width:38px;height:38px;border-radius:var(--r-full);
  display:grid;place-items:center;padding:0;
  background:#FCFAF4;border:0;
  transition:transform .25s var(--e),box-shadow .25s var(--e);
}
.foot-redes .foot-red{--red-tam:20px}
.foot-redes .foot-red:hover{transform:translateY(-2px);box-shadow:0 6px 16px -6px rgba(0,0,0,.5)}
/* Las redes dentro del menú del teléfono. Van al final, debajo del botón de
   WhatsApp, con una línea que las separa de los enlaces de arriba: son otra
   cosa —seguirnos, no navegar— y sin la línea parecen un enlace más. */
.nav-movil-redes{
  margin-top:18px;padding-top:16px;
  border-top:1px solid var(--borde);
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
}
.nav-movil-redes > span{
  font-size:.72rem;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tinta-70);
}
/* Los iconos se acomodan solos. En un telefono de 360 px la fila entera
   —rotulo mas cuatro discos— cabia por dos pixeles; con una red mas, o con
   el rotulo traducido a una palabra mas larga («Suivez-nous»), se salia por
   el borde. Ahora, cuando no caben, bajan a su propio renglon. */
.nav-movil-redes > div{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
/* Aquí el fondo ya es claro, así que el disco se queda blanco con un borde
   fino que lo despega del papel. El logo pone el color. */
/* EL «padding:0» ES LO QUE CENTRA ESTO.
   -------------------------------------------------------------------------
   Arriba en esta hoja está «.nav-movil a { padding:13px 4px }», que da aire a
   los enlaces de la lista del menú. Estos discos son enlaces del menú también,
   así que heredaban esos 13 px de arriba y el logo bajaba casi seis píxeles
   dentro de su círculo. Se veía torcido y el SVG no tenía nada que ver: estaba
   clavado en el centro de su lienzo.

   Es el mismo tropiezo que en el pie, pero al revés —allí el relleno lo subía y
   aquí lo baja—, y por la misma razón: una regla general para los enlaces de
   esa zona que también alcanza a estos. */
.nav-movil-redes a{
  width:40px;height:40px;border-radius:var(--r-full);
  display:grid;place-items:center;padding:0;
  border:1px solid var(--borde);background:#fff;
  transition:transform .25s var(--e),box-shadow .25s var(--e);
}
.nav-movil-redes a{--red-tam:21px}
.nav-movil-redes a:hover{transform:translateY(-2px);box-shadow:0 6px 14px -6px rgba(0,0,0,.25)}

/* En pantallas muy estrechas el rótulo se pone encima y los iconos ocupan
   el renglón entero: cuatro discos de 40 px con sus huecos piden 190 px, y
   con el rótulo al lado no queda sitio para nada. */
@media (max-width:400px){
  .nav-movil-redes{justify-content:flex-start}
  .nav-movil-redes > span{flex-basis:100%}
  .nav-movil-redes > div{justify-content:flex-start}
}


/* =============================================================================
   LAS REDES EN LA PORTADA
   -----------------------------------------------------------------------------
   Al lado de las pastillas del hero, sobre la foto. Discos de cristal como los
   demás elementos que van encima de una imagen: el fondo translúcido con
   desenfoque es lo que mantiene el logo legible sea cual sea la foto que haya
   detrás ese día, que va cambiando.

   Llevan un separador a la izquierda porque no son una pastilla más: las
   pastillas dicen algo del negocio, estos son enlaces para irse a otro sitio.
   ========================================================================== */
.hero-redes{
  display:inline-flex;align-items:center;gap:8px;
  margin-left:4px;padding-left:14px;
  border-left:1px solid rgba(255,255,255,.28);
}
/* Sobre la foto, el disco blanco es lo único que garantiza que el logo se lea:
   la foto del hero cambia, y un logo de color sobre un cielo claro o sobre un
   farol naranja se pierde. Con el disco, da igual qué foto haya detrás. */
.hero-redes a{
  width:38px;height:38px;border-radius:var(--r-full);
  display:grid;place-items:center;
  background:#fff;border:0;
  box-shadow:0 2px 10px -2px rgba(0,0,0,.35);
  transition:transform .25s var(--e),box-shadow .25s var(--e);
}
.hero-redes a{--red-tam:20px}
.hero-redes a:hover{transform:translateY(-2px);box-shadow:0 8px 20px -6px rgba(0,0,0,.5)}

/* En el teléfono las pastillas ya se apilan; el separador de la izquierda
   entonces cuelga de la nada, así que pasa a ser una línea de arriba y los
   iconos ocupan su propio renglón. */
@media (max-width:720px){
  .hero-redes{
    margin-left:0;padding-left:0;border-left:0;
    padding-top:12px;margin-top:2px;
    border-top:1px solid rgba(255,255,255,.22);
    width:100%;
  }
  .hero-redes a{width:40px;height:40px}
}

/* =============================================================================
   EL TAMAÑO DE CADA LOGO, AL OJO Y NO A LA REGLA
   -----------------------------------------------------------------------------
   Medí los cinco: todos están centrados exactamente en el medio de su lienzo de
   24×24. Geométricamente eran perfectos y aun así se veían desparejos, porque
   lo que importa no es el lienzo sino cuánta TINTA pone cada marca dentro:

     Facebook   círculo macizo, ocupa 24×24 enteros  -> se ve enorme
     Instagram  cuadrado redondeado, casi 24×24      -> se ve grande
     WhatsApp   contorno con aire propio             -> referencia
     TikTok     nota alta y estrecha, 20,8 de ancho  -> referencia
     YouTube    apaisado, solo 16,9 de alto          -> se ve pequeño

   Puestos todos a la misma medida, Facebook parecía un botón azul y YouTube una
   pegatina. Así que cada uno lleva su factor: los macizos se encogen y el
   apaisado crece, hasta que los cinco pesan lo mismo mirándolos juntos.

   El tamaño base lo pone cada sitio —pie, menú, portada— en --red-tam, y los
   factores son los mismos en los tres.
   ========================================================================== */
[data-red] svg{
  width:var(--red-tam,20px);height:var(--red-tam,20px);display:block;
}
[data-red="facebook"] svg{
  width:calc(var(--red-tam,20px) * .92);height:calc(var(--red-tam,20px) * .92);
}
[data-red="instagram"] svg{
  width:calc(var(--red-tam,20px) * .96);height:calc(var(--red-tam,20px) * .96);
}
[data-red="youtube"] svg{
  width:calc(var(--red-tam,20px) * 1.14);height:calc(var(--red-tam,20px) * 1.14);
}