/* ==========================================================================
   PUROMÁNCORA — SISTEMA DE COMPONENTES
   Depende de tokens.css. Todos los valores salen de ahí.
   Orden: base · layout · nav · botones · hero · cards · secciones ·
          carrusel · filtros · ficha · planes · estáticas · footer
   ========================================================================== */

/* ---------- 1. BASE ------------------------------------------------------ */

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--arena);
  color:var(--ink);
  font-family:var(--body);
  font-size:var(--t-body);
  line-height:var(--lh-body);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3{
  font-family:var(--display);
  font-weight:600;
  line-height:var(--lh-titulo);
  letter-spacing:var(--ls-titulo);
  margin:0;
  font-optical-sizing:auto;
}
h1{font-size:var(--t-h1);}
h2{font-size:var(--t-h2);}
h3{font-size:var(--t-h3); font-weight:600;}
p{margin:0;}
img,svg,video{display:block; max-width:100%;}
ul{margin:0; padding:0; list-style:none;}
/* .card usa display:flex y le gana al [hidden] del navegador: hay que forzarlo. */
[hidden]{display:none !important;}

/* Links: nunca el azul del navegador, nunca underline por defecto. */
a{
  color:inherit;
  text-decoration:none;
  transition:color var(--v-rapida) var(--curva);
}
a.link{
  color:var(--ink);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:4px;
  text-decoration-color:var(--arena-borde);
}
a.link:hover{color:var(--pacifico); text-decoration-color:currentColor;}

:focus-visible{
  outline:2px solid var(--atardecer);
  outline-offset:3px;
  border-radius:var(--e-1);
}

::selection{background:var(--atardecer); color:var(--ink);}

/* Utilidades mínimas */
.solo-lectores{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.label{
  font-size:var(--t-caption);
  font-weight:500;
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
  color:var(--arena-oscura-texto);
}

/* ---------- 2. LAYOUT ---------------------------------------------------- */

.contenedor{
  width:100%;
  max-width:var(--ancho-max);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
@media (max-width:640px){
  :root{--gutter:var(--e-5);}
}

.seccion{padding-block:var(--e-9);}
.seccion--corta{padding-block:var(--e-8);}

/* ---------- 3. NAV ------------------------------------------------------- */

.nav{
  position:sticky; top:0; z-index:50;
  background:var(--arena-72);
  backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color var(--v-normal) var(--curva), background var(--v-normal) var(--curva);
}
.nav.is-scrolled{border-bottom-color:var(--arena-borde); background:var(--paper-90);}
.nav--sobre-hero{position:absolute; inset:0 0 auto; background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none;}
.nav__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--e-5); min-height:72px;
}
.marca{
  font-family:var(--display);
  font-weight:700;
  font-size:19px;
  letter-spacing:-0.02em;
  color:var(--ink);
  white-space:nowrap;
}
.marca em{font-style:normal; color:var(--arena-oscura-texto);}
.nav--sobre-hero .marca,
.nav--sobre-hero .nav__link{color:var(--sobre-ink); text-shadow:0 1px 12px rgba(12,26,30,.45);}
/* El hover genérico de .nav__link (más abajo) pone --ink (oscuro) — bien
   sobre el fondo claro normal del nav, pero sobre el hero (fondo oscuro,
   este bloque) queda texto oscuro sobre fondo oscuro, casi ilegible. Acá
   se pisa con el dorado de acento, que sí contrasta en las dos fotos/video
   del hero (visto real: se perdía al pasar el mouse por el menú). */
.nav--sobre-hero .nav__link:hover,
.nav--sobre-hero .nav__link[aria-current="page"]{color:var(--atardecer); text-shadow:0 1px 12px rgba(12,26,30,.45);}
.nav--sobre-hero .marca em{color:var(--atardecer);}
/* El botón de menú (mobile) flota directo sobre el video/poster del hero, que
   tiene zonas claras (espuma) y oscuras (agua) — currentColor solo no
   alcanza para contraste en ambas. Un scrim propio (chip oscuro translúcido +
   ícono claro) lo hace legible sin importar qué haya detrás, igual que ya
   resuelve esto el botón acento con su fondo sólido. */
.nav--sobre-hero .nav__toggle{
  color:var(--sobre-ink);
  background:rgba(12,26,30,.4);
  border-radius:var(--r-pill);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
}

.nav__links{display:flex; align-items:center; gap:var(--e-4);}
.nav__link{
  font-size:var(--t-small);
  font-weight:500;
  color:var(--ink-80);
  padding-block:var(--e-2);
  position:relative;
  white-space:nowrap;
}
.nav__link::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--atardecer); border-radius:var(--r-pill);
  transform:scaleX(0); transform-origin:left;
  transition:transform var(--v-normal) var(--curva);
}
.nav__link:hover,.nav__link[aria-current="page"]{color:var(--ink);}
.nav__link:hover::after,.nav__link[aria-current="page"]::after{transform:scaleX(1);}

/* Link de "Buscar" del nav: lleva ícono + texto, así que necesita su propio
   centrado vertical (flex) en vez del vertical-align a mano que traía antes
   y que lo dejaba corrido respecto de los demás links (solo texto). */
.nav__link--buscar{display:inline-flex; align-items:center; gap:4px;}
.nav__link--buscar .i{width:15px; height:15px; flex-shrink:0;}

/* "Eventos" del nav — único link que no es una categoría del sitio, así
   que se destaca como píldora con borde dorado (--atardecer, el mismo tono
   que ya usa todo lo de Eventos: eyebrow del banner, ficha del evento) en
   vez del link de texto plano + subrayado que usan las categorías. */
.nav__link--eventos{
  display:inline-flex; align-items:center;
  padding:5px 14px; border:1.5px solid var(--atardecer); border-radius:var(--r-pill);
  color:var(--atardecer); font-weight:600;
}
.nav__link--eventos::after{display:none;}
.nav__link--eventos:hover,.nav__link--eventos[aria-current="page"]{
  background:var(--atardecer); color:#fff;
}
.nav--sobre-hero .nav__link--eventos{color:var(--atardecer); text-shadow:none;}
.nav--sobre-hero .nav__link--eventos:hover,
.nav--sobre-hero .nav__link--eventos[aria-current="page"]{color:#fff;}
@media (max-width:1500px){
  .nav__link--eventos{
    display:inline-flex; width:fit-content; border-bottom:0; padding:5px 14px;
  }
  .nav--sobre-hero .nav__link--eventos{color:var(--atardecer);}
}

.nav__toggle{
  display:none; background:none; border:0; padding:var(--e-2);
  color:inherit; cursor:pointer;
}
@media (max-width:1500px){
  .nav__links{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--paper); border-bottom:1px solid var(--arena-borde);
    padding:var(--e-2) var(--gutter) var(--e-5);
    box-shadow:var(--sombra-2);
    display:none;
  }
  .nav__links.is-abierto{display:flex;}
  .nav__link{padding-block:var(--e-4); border-bottom:1px solid var(--ink-08); color:var(--ink);}
  .nav__link::after{display:none;}
  .nav__links .btn{margin-top:var(--e-4); justify-content:center;}
  .nav__toggle{display:block;}
  .nav--sobre-hero .nav__link{color:var(--ink); text-shadow:none;}
  /* A los 1500px el menú --sobre-hero pasa a fondo claro propio (--paper,
     arriba) — ahí el hover oscuro de siempre (--ink) SÍ contrasta bien, así
     que se vuelve a pisar el dorado de la regla de escritorio. */
  .nav--sobre-hero .nav__link:hover,
  .nav--sobre-hero .nav__link[aria-current="page"]{color:var(--ink); text-shadow:none;}
}

/* ---------- 4. BOTONES --------------------------------------------------- */

.btn{
  display:inline-flex; align-items:center; gap:var(--e-2);
  font-family:var(--body); font-size:var(--t-small); font-weight:600;
  padding:12px var(--e-5);
  border-radius:var(--r-pill);
  border:1.5px solid transparent;
  cursor:pointer; white-space:nowrap;
  transition:transform var(--v-normal) var(--curva),
             background var(--v-rapida) var(--curva),
             border-color var(--v-rapida) var(--curva),
             color var(--v-rapida) var(--curva);
}
.btn:hover{transform:translateY(-2px);}
.btn:active{transform:translateY(0);}

.btn--acento{
  background:var(--sunset); background-size:160% 100%; background-position:0% 0%;
  color:var(--ink); box-shadow:var(--sunset-glow);
  transition:transform var(--v-normal) var(--curva), background-position var(--v-lenta) var(--curva), box-shadow var(--v-normal) var(--curva);
}
.btn--acento:hover{background-position:100% 0%; box-shadow:0 12px 34px rgba(240,121,61,.46);}

.btn--ink{background:var(--ink); color:var(--sobre-ink);}
.btn--ink:hover{background:#132020;}

.btn--linea{background:transparent; color:var(--ink); border-color:var(--arena-borde);}
.btn--linea:hover{border-color:var(--ink); }

.btn--claro{background:var(--paper); color:var(--ink);}
.btn--claro:hover{background:#fff;}

.btn--grande{padding:15px var(--e-6); font-size:var(--t-body);}
.btn--bloque{width:100%; justify-content:center;}
.btn--chico{padding:7px 16px; font-size:12px; flex-shrink:0;}
.btn--chico[disabled]{opacity:.6; cursor:default;}
.btn--publicado-ok{background:var(--pacifico); color:#fff;}
.btn .i{width:18px; height:18px;}

/* Link de acción con flecha (reemplaza el "ver todo" subrayado) */
.accion{
  display:inline-flex; align-items:center; gap:var(--e-2);
  font-size:var(--t-small); font-weight:600; color:var(--ink);
}
.accion .i{width:16px; height:16px; transition:transform var(--v-normal) var(--curva);}
.accion:hover{color:var(--pacifico);}
.accion:hover .i{transform:translateX(4px);}

/* ---------- 5. ICONOS ---------------------------------------------------- */

.i{
  width:var(--icono-ui); height:var(--icono-ui);
  fill:none; stroke:currentColor;
  stroke-width:var(--icono-stroke);
  stroke-linecap:round; stroke-linejoin:round;
  flex:none;
}

/* ---------- 6. HERO ------------------------------------------------------ */

.hero{
  position:relative;
  min-height:min(100svh, 860px);
  display:flex; flex-direction:column; justify-content:flex-end;
  overflow:hidden;
  background:var(--ink);
  isolation:isolate;
}
.hero__media{position:absolute; inset:0; z-index:0;}
.hero__media video,
.hero__media img{
  width:100%; height:100%; object-fit:cover;
  /* La orilla del video corre vertical: corriéndolo a la izquierda queda más
     agua detrás del título y la arena cae del lado de las cards. */
  object-position:38% center;
  /* La espuma del video es casi blanca. Bajarla acá (y no con una caja oscura
     encima) es lo que deja legible el título sin tapar la imagen. */
  filter:brightness(.88) saturate(.95);
  animation:heroDeriva 38s var(--curva) infinite alternate;
}
@keyframes heroDeriva{from{transform:scale(1.03);} to{transform:scale(1.09);}}
@media (prefers-reduced-motion: reduce){
  .hero__media video,.hero__media img{animation:none; transform:none;}
}

/* Fallback cuando todavía no hay video/poster cargado: agua cenital en CSS. */
.hero__media--placeholder{
  background:
    radial-gradient(120% 80% at 78% 12%, rgba(247,239,221,.22), transparent 55%),
    linear-gradient(178deg, #0C3742 0%, #10525B 26%, #2E7C7F 48%, #7FA894 62%, #C9B189 76%, #E3CFA6 100%);
}
.hero__media--placeholder::after{
  content:''; position:absolute; inset:0;
  background:
    repeating-linear-gradient(97deg, rgba(255,253,248,.055) 0 3px, transparent 3px 46px),
    repeating-linear-gradient(91deg, rgba(12,26,30,.045) 0 2px, transparent 2px 34px);
  mask-image:linear-gradient(180deg, transparent 10%, #000 42%, #000 64%, transparent 88%);
  animation:espuma 16s linear infinite;
}
@keyframes espuma{from{background-position:0 0, 0 0;} to{background-position:60px 0, -40px 0;}}
@media (prefers-reduced-motion: reduce){ .hero__media--placeholder::after{animation:none;} }

/* Veil: degradado de legibilidad, no una caja opaca. */
.hero__veil{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    /* scrim suave detrás del bloque de texto */
    radial-gradient(66% 44% at 50% 48%, rgba(8,20,24,.58), rgba(8,20,24,0) 72%),
    /* arriba para la nav, abajo para separar las cards de la arena */
    linear-gradient(180deg, rgba(8,20,24,.62) 0%, rgba(8,20,24,.28) 13%, rgba(8,20,24,.13) 26%, rgba(8,20,24,.20) 54%, rgba(8,20,24,.70) 100%);
}
/* En pantallas chicas el texto ocupa más alto: el scrim tiene que acompañarlo. */
@media (max-width:700px){
  .hero__veil{
    background:
      radial-gradient(86% 58% at 50% 47%, rgba(8,20,24,.76), rgba(8,20,24,0) 78%),
      linear-gradient(180deg, rgba(8,20,24,.62) 0%, rgba(8,20,24,.26) 13%, rgba(8,20,24,.14) 26%, rgba(8,20,24,.22) 56%, rgba(8,20,24,.70) 100%);
  }
}

/* El texto del hero (título/bajada/buscador) está centrado por diseño en
   desktop, pero en mobile un párrafo centrado que envuelve en varias líneas
   queda con bordes disparejos y se ve "desalineado" respecto al grid de
   categorías de abajo (que arranca pegado al gutter, no centrado) — pedido
   de Emi, 2026-09-28: "no esta alineadas las card con el resto del
   contenido". Alineamos todo a la izquierda en mobile para que el borde
   izquierdo del texto, el buscador y las cards coincidan. */
@media (max-width:700px){
  .hero__contenido{ text-align:left; align-items:flex-start; }
  .hero__titulo,.hero__bajada{ max-width:none; }
  .hero__buscador{ max-width:none; }
}

.hero__contenido{
  position:relative; z-index:2;
  width:100%; max-width:var(--ancho-max); margin-inline:auto;
  padding:var(--e-9) var(--gutter) var(--e-6);
  text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:var(--e-4);
  margin-top:auto;
}
.hero__eyebrow{
  font-size:var(--t-caption); font-weight:600;
  letter-spacing:var(--ls-label); text-transform:uppercase;
  color:var(--atardecer);
  text-shadow:0 1px 10px rgba(12,26,30,.6);
}
.hero__titulo{
  font-size:var(--t-hero);
  color:var(--sobre-ink);
  max-width:15ch;
  text-shadow:var(--sombra-hero);
  font-weight:700;
}
/* Palabra clave del título en degradé "atardecer" — mismo tratamiento de dos
   tonos que ya usa la marca (Puro<em>Máncora</em> en nav/footer), llevado al
   hero. Fallback a --atardecer sólido si el navegador no soporta
   background-clip:text (se ve bien igual, solo sin el degradé). */
.hero__titulo-acento{
  color:var(--atardecer);
  background:var(--sunset);
  background-clip:text; -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}
@supports not (background-clip:text){
  .hero__titulo-acento{-webkit-text-fill-color:unset; color:var(--atardecer);}
}
.hero__bajada{
  font-size:var(--t-lead);
  color:rgba(247,239,221,.94);
  max-width:52ch;
  text-shadow:0 1px 14px rgba(12,26,30,.55);
}

/* Entrada del bloque de texto */
.hero__eyebrow,.hero__titulo,.hero__bajada{
  opacity:0; transform:translateY(14px);
  animation:subir var(--v-lenta) var(--curva) forwards;
}
.hero__titulo{animation-delay:80ms;}
.hero__bajada{animation-delay:160ms;}
@keyframes subir{to{opacity:1; transform:translateY(0);}}
@media (prefers-reduced-motion: reduce){
  .hero__eyebrow,.hero__titulo,.hero__bajada{opacity:1; transform:none; animation:none;}
}

/* --- Grid de categorías del hero --- */
.hero__categorias{
  position:relative; z-index:2;
  width:100%; max-width:var(--ancho-max); margin-inline:auto;
  padding:0 var(--gutter) var(--e-8);
  /* minmax(0,1fr) en vez de 1fr a secas: sin el 0, una sola palabra larga
     (ej. "Kitesurf"/"Bienestar"/"Explorar", que no tienen espacio donde
     partirse) puede forzar su columna a crecer más de lo que le toca, y
     como el grid no tiene margen propio para absorber eso, toda la fila se
     corre hacia la derecha y se sale del margen derecho — se veía como
     "las cards no están centradas" en mobile (Emi, 2026-09-28). */
  display:grid; grid-template-columns:repeat(9,minmax(0,1fr)); gap:var(--e-3);
}
@media (max-width:900px){
  .hero__categorias{grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; padding-bottom:var(--e-7);}
}

.cat{
  position:relative;
  /* min-width:0 permite que la card se achique por debajo del ancho de su
     texto sin partir en varias líneas (ver comentario de .hero__categorias
     sobre por qué el grid se corría a la derecha). */
  min-width:0;
  display:flex; flex-direction:column; align-items:flex-start; gap:var(--e-2);
  padding:var(--e-4) var(--e-3) var(--e-4) var(--e-4);
  background:var(--paper);
  border:1.5px solid transparent;
  border-radius:var(--r-card);
  box-shadow:var(--sombra-1);
  color:var(--ink);
  opacity:0; transform:translateY(18px);
  animation:subir var(--v-lenta) var(--curva) forwards;
  animation-delay:calc(240ms + var(--i,0) * var(--stagger));
  transition:transform var(--v-normal) var(--curva),
             border-color var(--v-rapida) var(--curva),
             box-shadow var(--v-normal) var(--curva);
}
@media (prefers-reduced-motion: reduce){ .cat{opacity:1; transform:none; animation:none;} }

.cat__icono{
  width:var(--icono-card); height:var(--icono-card); color:var(--arena-oscura);
  fill:none; stroke:currentColor; stroke-width:var(--icono-stroke);
  stroke-linecap:round; stroke-linejoin:round;
  transition:color var(--v-rapida) var(--curva);
}
.cat__nombre{
  font-family:var(--display); font-weight:600; font-size:16px;
  letter-spacing:-0.02em; line-height:1.15;
  /* Si aun así una palabra sola no entra en el ancho disponible, que
     parta en vez de desbordar (misma lógica que .menu-fila__nombre). */
  overflow-wrap:break-word;
}
.cat__cta{
  display:flex; align-items:center; gap:6px;
  font-size:var(--t-caption); font-weight:600; color:var(--arena-oscura-texto);
  opacity:0; transform:translateY(-4px);
  transition:opacity var(--v-normal) var(--curva), transform var(--v-normal) var(--curva), color var(--v-rapida) var(--curva);
}
.cat__cta .i{width:14px; height:14px;}

.cat:hover,.cat:focus-visible{
  transform:translateY(var(--hover-y)) scale(var(--hover-scale));
  border-color:var(--atardecer);
  box-shadow:var(--sombra-2);
  z-index:3;
}
.cat:hover .cat__icono,.cat:focus-visible .cat__icono{color:var(--ink);}
.cat:hover .cat__cta,.cat:focus-visible .cat__cta{opacity:1; transform:translateY(0); color:var(--ink);}

/* Atenuar el resto cuando una card está activa */
.hero__categorias:hover .cat:not(:hover){opacity:.62;}

@media (max-width:900px){
  .cat{padding:var(--e-3); gap:6px;}
  .cat__nombre{font-size:14px;}
  .cat__cta{display:none;}
  .cat__icono{width:22px; height:22px;}
  .hero__categorias:hover .cat:not(:hover){opacity:1;}
}

/* --- Barra de búsqueda del hero (lleva a /buscar) --- */
.hero__buscador{
  width:100%; max-width:560px;
  display:flex; align-items:center; gap:var(--e-2);
  background:var(--paper);
  border-radius:var(--r-pill);
  padding:6px 6px 6px var(--e-4);
  box-shadow:var(--sombra-2);
  opacity:0; transform:translateY(14px);
  animation:subir var(--v-lenta) var(--curva) forwards;
  animation-delay:240ms;
}
.hero__buscador .i{width:18px; height:18px; color:var(--arena-oscura); flex:none;}
.hero__buscador input{
  flex:1; min-width:0; border:0; background:none;
  font-family:var(--body); font-size:var(--t-body); color:var(--ink);
  padding:10px 0;
}
.hero__buscador input:focus{outline:none;}
.hero__buscador input::placeholder{color:var(--ink-40);}
.hero__buscador .btn{flex:none;}
@media (prefers-reduced-motion: reduce){ .hero__buscador{opacity:1; transform:none; animation:none;} }
@media (max-width:560px){
  .hero__buscador{flex-wrap:wrap; border-radius:var(--r-bloque); padding:var(--e-3);}
  .hero__buscador input{width:100%; padding:8px 4px;}
  .hero__buscador .btn{width:100%; justify-content:center;}
}

/* --- Hero secundario (categoría / estáticas) --- */
.hero-int{
  background:var(--ink); color:var(--sobre-ink);
  padding-block:var(--e-8);
  border-radius:0 0 var(--r-bloque) var(--r-bloque);
  position:relative; overflow:hidden;
}
.hero-int::after{
  content:''; position:absolute; width:420px; height:420px; border-radius:50%;
  background:radial-gradient(circle, var(--atardecer-24), transparent 68%);
  top:-190px; right:-120px; pointer-events:none;
}
/* Deja sitio abajo cuando la barra de filtros se monta sobre el hero. */
.hero-int--con-filtros{padding-bottom:var(--e-9);}
.hero-int__inner{position:relative; z-index:1; display:flex; flex-direction:column; gap:var(--e-3); max-width:60ch;}
.hero-int h1{color:var(--sobre-ink);}
.hero-int p{color:var(--sobre-ink-mute); font-size:var(--t-lead);}

.miga{display:flex; align-items:center; gap:var(--e-2); font-size:var(--t-caption); color:var(--sobre-ink-mute); margin-bottom:var(--e-2);}
.miga a:hover{color:var(--atardecer);}
.miga span{opacity:.5;}
.miga--claro{color:var(--arena-oscura-texto);}
.miga--claro a:hover{color:var(--ink);}

/* ---------- 7. FRANJA "LA PLAYA HOY" ------------------------------------- */

.playa{
  background:var(--ink); color:var(--sobre-ink);
  border-radius:var(--r-bloque);
  margin-top:calc(var(--e-6) * -1);
  position:relative; z-index:10;
  box-shadow:var(--sombra-2);
  overflow:hidden;
}
/* Franja "atardecer" arriba del panel — la única señal de color en un bloque
   que si no es puro texto sobre --ink; refuerza que esto es justamente el
   dato del cielo/agua de HOY. */
.playa::before{
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--sunset);
}
.playa__inner{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:var(--e-5); padding:var(--e-5) var(--e-6);
}
.playa__item{display:flex; flex-direction:column; gap:var(--e-1);}
.playa__item + .playa__item{border-left:1px solid rgba(247,239,221,.14); padding-left:var(--e-5);}
.playa__label{
  display:flex; align-items:center; gap:var(--e-2);
  font-size:var(--t-caption); letter-spacing:var(--ls-label); text-transform:uppercase;
  color:var(--sobre-ink-mute); font-weight:500;
}
.playa__label .i{width:16px; height:16px; color:var(--atardecer);}
.playa__valor{font-family:var(--display); font-size:17px; font-weight:600; letter-spacing:-0.02em;}
.playa__nota{font-size:var(--t-caption); color:var(--sobre-ink-mute);}
@media (max-width:820px){
  .playa__inner{grid-template-columns:repeat(2,1fr); gap:var(--e-4); padding:var(--e-5);}
  .playa__item + .playa__item{border-left:0; padding-left:0;}
}

/* ---------- 8. CABEZAL DE SECCIÓN ---------------------------------------- */

.seccion-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:var(--e-5); margin-bottom:var(--e-6);
}
.seccion-head__texto{display:flex; flex-direction:column; gap:var(--e-2); max-width:52ch;}
.seccion-head p{color:var(--ink-64); font-size:var(--t-small);}
@media (max-width:640px){ .seccion-head{flex-direction:column; align-items:flex-start;} }

/* ---------- 9. CARDS DE NEGOCIO ------------------------------------------ */

.foto{
  position:relative; overflow:hidden;
  background-color:var(--arena-oscura);
  background-size:cover; background-position:center;
}
/* Placeholders neutros mientras no hay fotografía real.
   Solo derivados de arena / ink: sin arcoíris. */
.foto--a{background-image:linear-gradient(158deg,#D9C7A6,#8B7355);}
.foto--b{background-image:linear-gradient(158deg,#9FB4B0,#2E4744);}
.foto--c{background-image:linear-gradient(158deg,#EBDCBE,#A98F65);}
.foto--d{background-image:linear-gradient(158deg,#7FA09C,#1C2B2A);}
.foto--e{background-image:linear-gradient(158deg,#C7B392,#5E5442);}
.foto--f{background-image:linear-gradient(158deg,#A9BEB6,#3F5B54);}
.foto::after{
  content:''; position:absolute; inset:0;
  background:radial-gradient(120% 90% at 24% 12%, rgba(255,253,248,.20), transparent 60%);
}

.card{
  display:flex; flex-direction:column;
  background:var(--paper);
  border:1px solid var(--arena-borde);
  border-radius:var(--r-card);
  overflow:hidden;
  box-shadow:var(--sombra-1);
  transition:transform var(--v-normal) var(--curva),
             box-shadow var(--v-normal) var(--curva),
             border-color var(--v-rapida) var(--curva);
}
.card:hover{
  transform:translateY(var(--hover-y)) scale(var(--hover-scale));
  box-shadow:var(--sombra-2);
  border-color:var(--atardecer);
  z-index:3;
}
/* Plan pago de destacado (ver campo en demo-negocios.ts) — borde acento
   permanente + el mismo resplandor que ya usa el botón --acento, para que
   se lea como "más visible", no como un aviso del sistema (a diferencia de
   card__badge-ejemplo, que a propósito usa colores neutros). */
.card--destacado{
  border-color:var(--atardecer);
  box-shadow:var(--sombra-1), var(--sunset-glow);
}
.card--destacado:hover{box-shadow:var(--sombra-2), var(--sunset-glow);}
.badge-destacado{
  display:inline-flex; align-items:center; gap:4px;
  background:var(--sunset); color:var(--ink);
  font-size:11px; font-weight:700; letter-spacing:.02em;
  padding:5px 10px; border-radius:var(--r-pill);
  box-shadow:var(--sunset-glow);
  white-space:nowrap;
}
.badge-destacado .i{width:12px; height:12px;}
.card__badge-destacado{position:absolute; z-index:2; left:var(--e-3); bottom:var(--e-3);}
.card__foto{height:180px; flex:none;}
.card__tag{
  position:absolute; z-index:2; top:var(--e-3); left:var(--e-3);
  background:var(--paper-90); color:var(--ink);
  font-size:11.5px; font-weight:600; letter-spacing:.02em;
  padding:5px 10px; border-radius:var(--r-pill);
}
.card__fav{
  position:absolute; z-index:2; top:var(--e-3); right:var(--e-3);
  width:32px; height:32px; border-radius:var(--r-pill);
  background:var(--paper-72); border:0; cursor:pointer;
  display:grid; place-items:center; color:var(--ink);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  transition:background var(--v-rapida) var(--curva), color var(--v-rapida) var(--curva);
}
.card__fav .i{width:16px; height:16px;}
.card__fav:hover{background:var(--paper);}
.card__fav[aria-pressed="true"]{color:var(--atardecer);}
.card__fav[aria-pressed="true"] .i{fill:var(--atardecer); stroke:var(--atardecer);}
/* Ribbon de "esto es de mentira" — solo aparece en negocios de relleno que
   completan una categoría sin nada real todavía (ver esEjemplo en
   src/data/negocios.ts). A propósito NO usa --atardecer/--pacifico (son los
   acentos de marca) para que se lea claramente como un aviso del sistema,
   no como parte del contenido del negocio. */
.card__badge-ejemplo{
  position:absolute; z-index:2; left:0; right:0; bottom:0;
  background:rgba(28,43,42,.82); color:var(--sobre-ink);
  font-size:11px; font-weight:600; letter-spacing:.02em;
  text-align:center; padding:6px var(--e-2);
}
.ficha-aviso-ejemplo{
  background:var(--atardecer-24); color:var(--ink);
  border:1px solid var(--arena-borde); border-radius:var(--r-chico);
  padding:var(--e-3) var(--e-4); font-size:var(--t-small); font-weight:600;
}

.card__cuerpo{padding:var(--e-4) var(--e-4) var(--e-5); display:flex; flex-direction:column; gap:var(--e-1); flex:1;}
.card__meta{display:flex; align-items:center; gap:var(--e-2); font-size:var(--t-caption); color:var(--arena-oscura-texto);}
.card__meta .i{width:14px; height:14px; color:var(--atardecer);}
.card__nombre{font-family:var(--display); font-size:18px; font-weight:600; letter-spacing:-0.02em;}
.card__zona{font-size:var(--t-small); color:var(--ink-64);}
.card__pie{margin-top:var(--e-4); display:flex; align-items:center; justify-content:space-between; gap:var(--e-3);}
.card__precio{font-size:var(--t-small); color:var(--ink-64);}
.card__precio b{font-family:var(--display); font-size:16px; color:var(--ink); font-weight:600;}

.grid-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--e-5);}
@media (max-width:900px){ .grid-cards{grid-template-columns:repeat(2,1fr);} }
@media (max-width:600px){ .grid-cards{grid-template-columns:1fr;} }

/* ---------- 10. CARRUSEL ------------------------------------------------- */

.carrusel{
  display:flex; gap:var(--e-5);
  overflow-x:auto; scroll-snap-type:x proximity;
  /* sin esto el snap se come el padding lateral y la 1ª card queda al borde */
  scroll-padding-inline:var(--gutter);
  padding-bottom:var(--e-3);
  scrollbar-width:none;
  cursor:grab;
  /* sangrado a los bordes del contenedor */
  margin-inline:calc(var(--gutter) * -1);
  padding-inline:var(--gutter);
}
.carrusel::-webkit-scrollbar{display:none;}
.carrusel.is-arrastrando{cursor:grabbing; scroll-snap-type:none;}
.carrusel.is-arrastrando .card{pointer-events:none;}
.carrusel > .card{flex:0 0 286px; scroll-snap-align:start; user-select:none;}
@media (max-width:600px){ .carrusel > .card{flex:0 0 80%;} }

.carrusel-nav{display:flex; gap:var(--e-2);}
.carrusel-nav button{
  width:40px; height:40px; border-radius:var(--r-pill);
  border:1.5px solid var(--arena-borde); background:transparent; color:var(--ink);
  display:grid; place-items:center; cursor:pointer;
  transition:border-color var(--v-rapida) var(--curva), background var(--v-rapida) var(--curva), opacity var(--v-rapida) var(--curva);
}
.carrusel-nav button:hover{border-color:var(--ink);}
.carrusel-nav button[disabled]{opacity:.35; cursor:default;}
@media (max-width:640px){ .carrusel-nav{display:none;} }

/* ---------- 11. FILTROS -------------------------------------------------- */

.filtros{
  display:flex; align-items:center; flex-wrap:wrap; gap:var(--e-3);
  padding:var(--e-4) var(--e-5);
  background:var(--paper);
  border:1px solid var(--arena-borde);
  border-radius:var(--r-card);
  box-shadow:var(--sombra-1);
  margin-top:calc(var(--e-7) * -1);
  position:relative; z-index:10;
}
.filtros__grupo{display:flex; align-items:center; flex-wrap:wrap; gap:var(--e-2);}
.pill{
  background:transparent; color:var(--ink-80);
  border:1.5px solid var(--arena-borde);
  border-radius:var(--r-pill);
  padding:9px var(--e-4);
  font-family:var(--body); font-size:var(--t-small); font-weight:500;
  cursor:pointer;
  transition:background var(--v-rapida) var(--curva), color var(--v-rapida) var(--curva), border-color var(--v-rapida) var(--curva), transform var(--v-rapida) var(--curva);
}
.pill:hover{border-color:var(--ink); color:var(--ink);}
.pill[aria-pressed="true"]{background:var(--ink); border-color:var(--ink); color:var(--sobre-ink);}
.filtros__conteo{margin-left:auto; font-size:var(--t-small); color:var(--arena-oscura-texto);}
@media (max-width:640px){ .filtros__conteo{margin-left:0; width:100%;} }

.vacio{
  padding:var(--e-8) var(--e-5); text-align:center; color:var(--ink-64);
  border:1px dashed var(--arena-borde); border-radius:var(--r-card);
}

/* ---------- 12. FICHA DE NEGOCIO ----------------------------------------- */

.ficha-galeria{
  display:grid; grid-template-columns:2fr 1fr 1fr; grid-template-rows:repeat(2,150px);
  gap:var(--e-3); border-radius:var(--r-bloque); overflow:hidden;
}
.ficha-galeria > *{border-radius:var(--r-chico);}
.ficha-galeria > :first-child{grid-row:span 2; border-radius:var(--r-chico);}
.ficha-galeria > :nth-child(n+6){display:none;}
@media (max-width:760px){
  .ficha-galeria{grid-template-columns:repeat(2,1fr); grid-template-rows:repeat(2,120px);}
  .ficha-galeria > :first-child{grid-column:span 2; grid-row:auto;}
  .ficha-galeria > :nth-child(n+4){display:none;}
}
/* Miniaturas clickeables (antes eran divs fijos sin interacción, ver
   NegocioFichaContenido.astro) — reset de estilos de <button>, mismo look
   que el div de antes. */
.ficha-galeria button.foto{
  border:0; padding:0; margin:0; display:block; width:100%; height:100%;
  font:inherit; color:inherit; cursor:pointer;
}
.ficha-galeria button.foto:focus-visible{outline:2px solid var(--ink); outline-offset:-2px;}
/* Overlay "+N" en la última miniatura visible cuando hay más fotos de las
   que entran en el cupo del grid (5 escritorio / 3 mobile) — antes esas
   fotos de más quedaban invisibles sin ningún aviso. */
.foto__mas{
  position:absolute; inset:0; display:none; align-items:center; justify-content:center;
  background:rgba(20,20,20,.55); color:#fff; font-family:var(--display);
  font-size:20px; font-weight:700; border-radius:inherit; pointer-events:none;
}
.foto__mas--movil{display:flex;}
@media (min-width:761px){
  .foto__mas--movil{display:none;}
  .foto__mas--escritorio{display:flex;}
}

/* Lightbox de fotos — abre al clickear cualquier miniatura de la galería,
   navega TODAS las fotos reales del negocio (ver site.js, fichaLightbox). */
.lightbox{
  position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center;
  background:rgba(10,10,10,.92); padding:var(--e-4);
}
.lightbox[hidden]{display:none;}
.lightbox__marco{
  position:relative; max-width:min(92vw,1100px); max-height:86vh;
  display:flex; flex-direction:column; align-items:center; gap:var(--e-2);
}
.lightbox__img{max-width:100%; max-height:78vh; object-fit:contain; border-radius:var(--r-chico);}
.lightbox__contador{color:#fff; font-size:13px; letter-spacing:.02em; opacity:.85;}
.lightbox__cerrar,.lightbox__nav{
  position:absolute; z-index:2; background:rgba(255,255,255,.14); border:0; border-radius:999px;
  width:44px; height:44px; display:flex; align-items:center; justify-content:center;
  color:#fff; cursor:pointer;
}
.lightbox__cerrar:hover,.lightbox__nav:hover{background:rgba(255,255,255,.26);}
.lightbox__cerrar .i,.lightbox__nav .i{width:20px; height:20px;}
.lightbox__cerrar{top:var(--e-4); right:var(--e-4);}
.lightbox__nav{top:50%; transform:translateY(-50%);}
.lightbox__nav--prev{left:var(--e-4);}
.lightbox__nav--next{right:var(--e-4);}
@media (max-width:600px){
  .lightbox__nav{width:38px; height:38px;}
  .lightbox__cerrar{top:var(--e-3); right:var(--e-3);}
  .lightbox__nav--prev{left:var(--e-2);}
  .lightbox__nav--next{right:var(--e-2);}
}

.ficha-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:var(--e-5); flex-wrap:wrap; margin-top:var(--e-6);
}
.ficha-head__meta{display:flex; align-items:center; flex-wrap:wrap; gap:var(--e-3); margin-top:var(--e-3); font-size:var(--t-small); color:var(--ink-64);}
.ficha-head__meta .i{width:15px; height:15px; color:var(--arena-oscura);}
.ficha-head__dato{display:inline-flex; align-items:center; gap:6px;}
.ficha-head__dato--rating{font-weight:600; color:var(--ink);}
.ficha-head__dato--rating .i{color:var(--atardecer);}

.ficha-cuerpo{
  display:grid; grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);
  gap:var(--e-8); margin-top:var(--e-8);
  align-items:start;
}
@media (max-width:900px){ .ficha-cuerpo{grid-template-columns:1fr; gap:var(--e-7);} }

.bloque + .bloque{margin-top:var(--e-7);}
.bloque h2{margin-bottom:var(--e-4);}
.bloque p{color:var(--ink-80); max-width:var(--ancho-texto);}
.bloque p + p{margin-top:var(--e-3);}

.lista-check{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--e-3); margin-top:var(--e-4);}
.lista-check li{display:flex; align-items:center; gap:var(--e-2); font-size:var(--t-small); color:var(--ink-80);}
.lista-check .i{width:16px; height:16px; color:var(--arena-oscura);}
@media (max-width:520px){ .lista-check{grid-template-columns:1fr;} }

.servicio{
  display:flex; align-items:center; justify-content:space-between; gap:var(--e-4);
  /* Padding horizontal (no solo vertical) — sin esto el texto queda pegado
     al borde de la columna en mobile, donde la columna ocupa todo el ancho
     del contenedor (pedido de Emi, 2026-09-28: "los textos estan muy cerca
     de los margenes"). */
  padding:var(--e-4) var(--e-3); border-bottom:1px solid var(--ink-08);
}
.servicio:last-child{border-bottom:0;}
.servicio__nombre{font-weight:600;}
.servicio__desc{font-size:var(--t-small); color:var(--ink-64); margin-top:2px;}
.servicio__precio{font-family:var(--display); font-weight:600; font-size:17px; white-space:nowrap;}

/* Menú agrupado por rubro con pills (ver NegocioFichaContenido.astro y
   site.js → menuGrupos()) — ej. Casa Mare: Café, Trattoria, Peluquería,
   Tienda vintage, cada uno con su propia lista de items/precios. */
.menu-grupos__pills{display:flex; flex-wrap:wrap; gap:var(--e-2); margin-bottom:var(--e-4);}
.menu-fila{
  display:flex; align-items:center; justify-content:space-between; gap:var(--e-4);
  /* Mismo motivo que .servicio arriba: padding horizontal para que el
     texto no quede pegado al borde, sobre todo en mobile. */
  padding:var(--e-4) var(--e-3); border-bottom:1px solid var(--ink-08);
}
.menu-fila:last-child{border-bottom:0;}
.menu-fila__nombre{font-weight:600;}
.menu-fila__precio{font-family:var(--display); font-weight:600; font-size:17px; white-space:nowrap;}
.menu-fila__precio--consultar{font-family:inherit; font-weight:500; font-style:italic; font-size:var(--t-caption); color:var(--arena-oscura-texto);}


.panel{
  background:var(--paper); border:1px solid var(--arena-borde);
  border-radius:var(--r-card); padding:var(--e-5);
  box-shadow:var(--sombra-1);
}
.panel + .panel{margin-top:var(--e-4);}
.panel h3{margin-bottom:var(--e-4);}
/* La columna entera se queda pegada, no solo el primer panel. */
.ficha-cuerpo > aside{position:sticky; top:88px;}
@media (max-width:900px){ .ficha-cuerpo > aside{position:static;} }
.fila{display:flex; align-items:center; justify-content:space-between; gap:var(--e-4); padding:7px 0; font-size:var(--t-small);}
.fila + .fila{border-top:1px solid var(--ink-08);}
.fila span:first-child{color:var(--ink-64);}
.fila span:last-child{font-weight:500;}
.fila--hoy span{color:var(--ink); font-weight:600;}

/* ---------- 15.3 /ingresar (login + lista de negocios para el admin) ---- */

.admin-fila{
  display:flex; align-items:center; justify-content:space-between; gap:var(--e-4);
  padding:var(--e-3) var(--e-4); border-radius:var(--r-chico);
  transition:background var(--v-rapida) var(--curva);
}
.admin-fila:hover{ background:var(--atardecer-24); }
.admin-fila + .admin-fila{ border-top:1px solid var(--ink-08); }
.admin-fila b{ color:var(--ink); }

.admin-badge{
  font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  padding:4px 10px; border-radius:var(--r-pill); white-space:nowrap; flex-shrink:0;
}
.admin-badge--publicado{ background:rgba(10,108,116,.12); color:var(--pacifico); }
.admin-badge--en_revision{ background:var(--atardecer-24); color:#8A5A0F; }
.admin-badge--borrador{ background:var(--ink-08); color:var(--ink-64); }

.mapa{
  height:170px; border-radius:var(--r-chico); position:relative; overflow:hidden;
  background:
    linear-gradient(180deg,#DCE9E4 0%, #CBDDD6 58%, #E7DCC4 58%, #F1E7D2 100%);
  margin-bottom:var(--e-4);
}
.mapa::before{
  content:''; position:absolute; inset:0;
  background:
    repeating-linear-gradient(90deg, rgba(28,43,42,.07) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(0deg, rgba(28,43,42,.07) 0 1px, transparent 1px 38px);
}
.mapa__pin{
  position:absolute; top:46%; left:50%; transform:translate(-50%,-100%);
  color:var(--ink);
}
.mapa__pin .i{width:26px; height:26px; filter:drop-shadow(0 3px 6px rgba(28,43,42,.3));}

/* Mapa real (Leaflet + OpenStreetMap) — mismo alto/bordes que el placeholder
   .mapa de arriba para que no salte el layout al reemplazar uno por otro. En
   la ficha (.mapa-real) y en el picker del wizard (.mapa-picker); Leaflet
   necesita que el contenedor tenga un alto explícito o no renderiza nada. */
.mapa-real, .mapa-picker{
  height:220px; border-radius:var(--r-chico); overflow:hidden; margin-bottom:var(--e-2);
  background:var(--arena-borde);
}
.mapa-picker{ margin-bottom:0; cursor:crosshair; }
/* Leaflet trae su propio z-index para los controles de zoom — sin esto
   quedan por debajo del header fijo del sitio al hacer scroll. */
.leaflet-pane, .leaflet-control{ z-index:1 !important; }

/* ---------- 13. CÓMO FUNCIONA / PASOS ------------------------------------ */

.pasos{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--e-5);}
@media (max-width:820px){ .pasos{grid-template-columns:1fr;} }
.paso{
  padding:var(--e-5); background:var(--paper);
  border:1px solid var(--arena-borde); border-radius:var(--r-card);
  display:flex; flex-direction:column; gap:var(--e-3);
}
.paso__n{
  font-family:var(--display); font-size:14px; font-weight:600;
  width:34px; height:34px; border-radius:var(--r-pill);
  display:grid; place-items:center;
  background:var(--arena); color:var(--arena-oscura-texto);
}
.paso p{color:var(--ink-64); font-size:var(--t-small);}

/* ---------- 14. CTA NEGOCIOS + PLANES ------------------------------------ */

.cta-negocios{
  background:var(--ink); color:var(--sobre-ink);
  border-radius:var(--r-bloque);
  padding:var(--e-8) var(--e-7);
  position:relative; overflow:hidden;
}
.cta-negocios::after{
  content:''; position:absolute; width:520px; height:520px; border-radius:50%;
  background:radial-gradient(circle, var(--atardecer-24), transparent 66%);
  top:-240px; right:-160px; pointer-events:none;
}
.cta-negocios__inner{position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); gap:var(--e-8); align-items:start;}
@media (max-width:900px){ .cta-negocios__inner{grid-template-columns:1fr; gap:var(--e-6);} .cta-negocios{padding:var(--e-7) var(--e-5);} }
.cta-negocios h2{color:var(--sobre-ink); margin-bottom:var(--e-3);}
.cta-negocios > .cta-negocios__inner p{color:var(--sobre-ink-mute); margin-bottom:var(--e-5); max-width:44ch;}

.planes{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--e-4);}
@media (max-width:760px){ .planes{grid-template-columns:1fr;} }
.plan{
  background:rgba(247,239,221,.06);
  border:1px solid rgba(247,239,221,.18);
  border-radius:var(--r-card);
  padding:var(--e-5);
  display:flex; flex-direction:column; gap:var(--e-3);
  transition:border-color var(--v-rapida) var(--curva), transform var(--v-normal) var(--curva);
}
.plan:hover{border-color:var(--atardecer); transform:translateY(-6px);}
.plan--destacado{border-color:var(--atardecer);}
.plan__nombre{font-size:var(--t-caption); letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--atardecer); font-weight:600;}
.plan__precio{font-family:var(--display); font-size:26px; font-weight:600; letter-spacing:-0.02em;}
.plan__precio span{font-family:var(--body); font-size:var(--t-caption); font-weight:400; color:var(--sobre-ink-mute);}
.plan__para{font-size:var(--t-caption); color:var(--sobre-ink-mute);}
.plan ul{display:flex; flex-direction:column; gap:var(--e-2); font-size:var(--t-small); color:rgba(247,239,221,.82);}
.plan li{display:flex; gap:var(--e-2); align-items:flex-start;}
.plan li .i{width:15px; height:15px; margin-top:2px; color:var(--atardecer); flex:none;}

/* ---------- 15. CONTENIDO ESTÁTICO / FORM -------------------------------- */

.prosa{max-width:var(--ancho-texto);}
.prosa h2{margin:var(--e-7) 0 var(--e-3);}
.prosa h3{margin:var(--e-5) 0 var(--e-2);}
.prosa p{color:var(--ink-80);}
.prosa p + p{margin-top:var(--e-3);}
.prosa ul{margin-top:var(--e-3); display:flex; flex-direction:column; gap:var(--e-2);}
.prosa ul li{display:flex; gap:var(--e-3); color:var(--ink-80);}
.prosa ul li::before{content:''; width:6px; height:6px; border-radius:50%; background:var(--atardecer); margin-top:9px; flex:none;}

.form{display:flex; flex-direction:column; gap:var(--e-4);}
.campo{display:flex; flex-direction:column; gap:var(--e-2);}
.campo label{font-size:var(--t-small); font-weight:500;}
.campo input,.campo select,.campo textarea,.precio-lista-fila input{
  font-family:var(--body); font-size:var(--t-body); color:var(--ink);
  background:var(--paper);
  border:1.5px solid var(--arena-borde);
  border-radius:var(--r-chico);
  padding:12px var(--e-4);
  transition:border-color var(--v-rapida) var(--curva);
}
.campo textarea{min-height:130px; resize:vertical;}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none; border-color:var(--atardecer);}
.campo input::placeholder,.campo textarea::placeholder{color:var(--ink-40);}

.dato-contacto{display:flex; gap:var(--e-3); align-items:flex-start; padding:var(--e-4) 0;}
.dato-contacto + .dato-contacto{border-top:1px solid var(--ink-08);}
.dato-contacto .i{color:var(--arena-oscura); margin-top:2px;}
.dato-contacto b{display:block; font-weight:600;}
.dato-contacto span{font-size:var(--t-small); color:var(--ink-64);}

/* ---------- 15.1 WIZARD DE AUTOSERVICIO (/publicar) ---------------------- */

.wizard{max-width:640px; margin:0 auto;}
.wizard-pasos{display:flex; gap:var(--e-2); margin-bottom:var(--e-6);}
.wizard-paso-dot{
  flex:1; height:4px; border-radius:var(--r-pill);
  background:var(--ink-12);
  transition:background var(--v-normal) var(--curva);
}
.wizard-paso-dot.is-activo,.wizard-paso-dot.is-hecho{background:var(--atardecer);}
.wizard-paso-numero{
  font-size:var(--t-caption); letter-spacing:var(--ls-label); text-transform:uppercase;
  color:var(--arena-oscura-texto); font-weight:600; margin-bottom:var(--e-2);
}
.wizard-paso-titulo{margin-bottom:var(--e-5);}

.campo-ayuda{font-size:var(--t-caption); color:var(--ink-64); line-height:var(--lh-body);}
.campo-error{font-size:var(--t-caption); color:#B4453A;}
.campo--invalido input,.campo--invalido select,.campo--invalido textarea{border-color:#B4453A;}
.campo-contador{font-size:var(--t-caption); color:var(--ink-40); text-align:right;}

.pills{display:flex; flex-wrap:wrap; gap:var(--e-2);}
.pill-check{position:relative;}
.pill-check input{position:absolute; opacity:0; pointer-events:none;}
.pill-check span{
  display:inline-flex; align-items:center; gap:6px;
  padding:9px var(--e-4);
  border:1.5px solid var(--arena-borde);
  border-radius:var(--r-pill);
  font-size:var(--t-small);
  cursor:pointer;
  transition:border-color var(--v-rapida) var(--curva), background var(--v-rapida) var(--curva);
  user-select:none;
}
.pill-check input:checked + span{border-color:var(--atardecer); background:var(--atardecer-24);}
.pill-check input:focus-visible + span{outline:2px solid var(--atardecer); outline-offset:2px;}

.campo--radio{display:flex; flex-direction:column; gap:var(--e-2);}
.campo-radio-opcion{display:flex; align-items:center; gap:var(--e-2); font-size:var(--t-small);}

.precio-fila{display:grid; grid-template-columns:1fr 1fr; gap:var(--e-3);}
@media (max-width:480px){.precio-fila{grid-template-columns:1fr;}}

.precio-lista-fila{display:grid; grid-template-columns:1fr 120px auto; gap:var(--e-3); align-items:center;}
.precio-lista-fila + .precio-lista-fila{margin-top:var(--e-2);}
@media (max-width:480px){.precio-lista-fila{grid-template-columns:1fr;}}
.precio-lista-quitar{
  width:28px; height:28px; border-radius:50%; flex-shrink:0;
  background:transparent; border:1.5px solid var(--arena-borde); color:var(--ink-64);
  cursor:pointer; font-size:16px; line-height:1;
  display:flex; align-items:center; justify-content:center;
}
.precio-lista-quitar:hover{border-color:#B4453A; color:#B4453A;}

.horario-dia{display:grid; grid-template-columns:100px 1fr 1fr; gap:var(--e-3); align-items:center;}
@media (max-width:480px){.horario-dia{grid-template-columns:1fr;}}
.horario-dia + .horario-dia{margin-top:var(--e-2);}

.dropzone{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border:1.5px dashed var(--arena-borde);
  border-radius:var(--r-card);
  padding:var(--e-6);
  text-align:center;
  cursor:pointer;
  transition:border-color var(--v-rapida) var(--curva), background var(--v-rapida) var(--curva);
}
.dropzone:hover,.dropzone.is-sobre{border-color:var(--atardecer); background:var(--atardecer-24);}
.dropzone input{display:none;}
.dropzone .i{width:28px; height:28px; color:var(--arena-oscura); margin-bottom:var(--e-2);}

.fotos-grilla{display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:var(--e-3); margin-top:var(--e-4);}
.foto-item{
  position:relative; aspect-ratio:4/3; border-radius:var(--r-chico); overflow:hidden;
  background-size:cover; background-position:center;
  border:2px solid transparent;
  cursor:grab;
}
.foto-item:active{cursor:grabbing;}
.foto-item.es-portada{border-color:var(--atardecer);}
.foto-item.se-arrastra{opacity:.4;}
.foto-item.es-objetivo-arrastre{outline:3px dashed var(--atardecer); outline-offset:-3px;}
.foto-item__portada-tag{
  position:absolute; top:6px; left:6px;
  background:var(--atardecer); color:var(--ink);
  font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  padding:2px 8px; border-radius:var(--r-pill);
}
.foto-item__quitar{
  position:absolute; top:6px; right:6px;
  width:22px; height:22px; border-radius:50%;
  background:rgba(28,43,42,.72); color:var(--sobre-ink);
  border:none; cursor:pointer; font-size:14px; line-height:1;
  display:flex; align-items:center; justify-content:center;
}
.foto-item__usar-portada{
  position:absolute; bottom:6px; left:6px; right:6px;
  background:rgba(255,253,248,.92); color:var(--ink);
  border:none; border-radius:var(--r-chico);
  font-size:11px; padding:5px; cursor:pointer;
}
.foto-item__orden{
  position:absolute; top:6px; left:50%; transform:translateX(-50%);
  display:flex; gap:4px;
}
.foto-item__mover{
  width:22px; height:22px; border-radius:50%;
  background:rgba(28,43,42,.72); color:var(--sobre-ink);
  border:none; cursor:pointer; font-size:14px; line-height:1;
  display:flex; align-items:center; justify-content:center;
}
.foto-item__mover:disabled{opacity:.35; cursor:default;}

.wizard-aviso{
  display:flex; gap:var(--e-3); align-items:flex-start;
  padding:var(--e-4); border-radius:var(--r-chico);
  background:var(--atardecer-24); font-size:var(--t-small);
}
.wizard-aviso--error{background:rgba(180,69,58,.12); color:#8A342B;}
.wizard-aviso--ok{background:rgba(10,108,116,.12); color:var(--pacifico);}

.wizard-nav{display:flex; justify-content:space-between; gap:var(--e-3); margin-top:var(--e-6);}

/* ---------- 15.2 PANTALLA DE PERFIL (/publicar, negocio publicado) ------- */

.perfil-header{
  display:flex; gap:var(--e-5); align-items:center;
  margin-bottom:var(--e-7);
}
@media (max-width:480px){.perfil-header{flex-direction:column; align-items:flex-start;}}
.perfil-header__foto{
  width:96px; height:96px; flex-shrink:0;
  border-radius:var(--r-card);
  background-size:cover; background-position:center;
  background-color:var(--ink-12);
}
.perfil-header__info{min-width:0;}
.perfil-header__info .btn{margin-top:var(--e-2);}

.perfil-seccion{
  padding-top:var(--e-6); margin-top:var(--e-6);
  border-top:1px solid var(--arena-borde);
}
.perfil-seccion:first-of-type{border-top:none; padding-top:0; margin-top:0;}
.perfil-seccion__titulo{margin-bottom:var(--e-3);}

.perfil-completitud{ position:relative; margin-bottom:var(--e-6); }
.completitud-track{
  height:8px; border-radius:var(--r-pill); background:var(--ink-12); overflow:hidden;
}
.completitud-fill{
  height:100%; border-radius:var(--r-pill);
  background:linear-gradient(90deg, var(--atardecer), #F0793D);
  transition:width var(--v-lenta) var(--curva);
}
.completitud-texto{
  font-size:var(--t-caption); color:var(--ink-64); margin-top:var(--e-2);
}
.completitud-badge{
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(10,108,116,.12); color:var(--pacifico);
  padding:8px 14px; border-radius:var(--r-pill);
  font-size:var(--t-small); font-weight:600;
  animation:completitud-badge-in var(--v-normal) var(--curva);
}
.completitud-badge__check{
  width:20px; height:20px; border-radius:50%; background:var(--pacifico); color:var(--sobre-ink);
  display:flex; align-items:center; justify-content:center; font-size:12px; flex-shrink:0;
  animation:completitud-pulso 1.8s var(--curva) infinite;
}
@keyframes completitud-badge-in{
  from{ opacity:0; transform:translateY(4px); }
  to{ opacity:1; transform:translateY(0); }
}
@keyframes completitud-pulso{
  0%{ box-shadow:0 0 0 0 rgba(10,108,116,.35); }
  70%{ box-shadow:0 0 0 8px rgba(10,108,116,0); }
  100%{ box-shadow:0 0 0 0 rgba(10,108,116,0); }
}

.confetti-capa{ position:absolute; inset:0 0 auto 0; height:64px; pointer-events:none; overflow:visible; }
.confetti-particula{
  position:absolute; top:-6px; width:6px; height:10px; border-radius:1px;
  animation:confetti-caer 1.1s ease-in forwards;
}
@keyframes confetti-caer{
  0%{ transform:translateY(0) rotate(0deg); opacity:1; }
  100%{ transform:translateY(60px) rotate(250deg); opacity:0; }
}

/* ---------- 16. FOOTER --------------------------------------------------- */

.footer{background:var(--ink); color:var(--sobre-ink); padding-block:var(--e-8) var(--e-5);}
.footer__inner{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:var(--e-6);}
@media (max-width:820px){ .footer__inner{grid-template-columns:repeat(2,1fr); gap:var(--e-5);} }
@media (max-width:480px){ .footer__inner{grid-template-columns:1fr;} }
.footer .marca{color:var(--sobre-ink); font-size:20px;}
.footer .marca em{color:var(--atardecer);}
.footer__nota{color:var(--sobre-ink-mute); font-size:var(--t-small); margin-top:var(--e-3); max-width:34ch;}
.footer__titulo{font-size:var(--t-caption); letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--sobre-ink-mute); margin-bottom:var(--e-3); font-weight:500;}
.footer__col ul{display:flex; flex-direction:column; gap:var(--e-2); font-size:var(--t-small);}
.footer__col .i{display:inline-block; width:15px; height:15px; vertical-align:-3px; margin-right:6px;}
.footer__col a{color:rgba(247,239,221,.78);}
.footer__col a:hover{color:var(--atardecer);}
.footer__base{
  margin-top:var(--e-7); padding-top:var(--e-5);
  border-top:1px solid rgba(247,239,221,.14);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:var(--e-3);
  font-size:var(--t-caption); color:var(--sobre-ink-mute);
}

/* ---------- 17. REVELADO AL SCROLL --------------------------------------- */

/* Solo se esconde si el JS está vivo: sin JS, todo se ve igual. */
.js .revelar{opacity:0; transform:translateY(20px);}
.js .revelar.is-visible{
  opacity:1; transform:none;
  transition:opacity var(--v-lenta) var(--curva), transform var(--v-lenta) var(--curva);
  transition-delay:calc(var(--i,0) * var(--stagger));
}
@media (prefers-reduced-motion: reduce){ .js .revelar{opacity:1; transform:none;} }

/* ---------- 18. RESEÑAS -------------------------------------------------- */
.lista-resenas{list-style:none; margin:0 0 var(--e-6); padding:0; display:flex; flex-direction:column; gap:var(--e-4);}
.resena{
  background:var(--paper); border:1px solid var(--arena-borde);
  border-radius:var(--r-card); padding:var(--e-4) var(--e-5);
}
.resena__cabeza{display:flex; align-items:center; gap:var(--e-3); margin-bottom:var(--e-1);}
.resena__estrellas{color:var(--atardecer); letter-spacing:1px; font-size:14px;}
.resena p{margin:0; color:var(--ink-64); font-size:var(--t-small); line-height:1.5;}

.form-resena{
  background:var(--paper); border:1px solid var(--arena-borde);
  border-radius:var(--r-card); padding:var(--e-5); max-width:520px;
}
.form-resena h3{margin-bottom:var(--e-4);}
.form-resena .campo{margin-bottom:var(--e-4);}
.form-resena #resena-enviar{margin-top:var(--e-2);}
.resena-estrellas-picker{display:flex; gap:6px;}
.resena-estrellas-picker__btn{
  background:none; border:0; cursor:pointer; padding:0;
  font-size:26px; line-height:1; color:var(--arena-borde);
  transition:color var(--v-rapida) var(--curva), transform var(--v-rapida) var(--curva);
}
.resena-estrellas-picker__btn:hover{transform:scale(1.1);}
.resena-estrellas-picker__btn[aria-pressed="true"]{color:var(--atardecer);}

/* Premio por reseña (ver publicar.astro "Reseñas y premios") — mismo
   patrón visual que .resena/.form-resena (paper + arena-borde + r-card). */
.premio-card{
  background:var(--paper); border:1px solid var(--arena-borde);
  border-radius:var(--r-card); padding:var(--e-5); margin-bottom:var(--e-5);
  display:flex; flex-direction:column; gap:var(--e-4);
}
.premio-tier{
  border-radius:var(--r-chico); padding:var(--e-4); display:flex; align-items:center;
  justify-content:space-between; gap:var(--e-3); flex-wrap:wrap;
}
.premio-tier--1{background:var(--arena);}
.premio-tier--2{background:var(--atardecer-24); border:1px solid rgba(244,183,64,.5);}
.premio-tier__badge{
  display:inline-flex; font-size:var(--t-caption); font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; border-radius:var(--r-pill); padding:2px var(--e-3); margin-bottom:4px;
}
.premio-tier--1 .premio-tier__badge{background:rgba(139,115,85,.18); color:var(--ink);}
.premio-tier--2 .premio-tier__badge{background:var(--atardecer); color:var(--ink);}
.premio-tier__nombre{font-size:var(--t-small); font-weight:600; color:var(--ink);}
.premio-tier__sub{font-size:var(--t-caption); color:var(--arena-oscura-texto); margin-top:2px;}
.premio-tier__premio{font-size:var(--t-small); font-weight:700; color:var(--ink); white-space:nowrap;}
.premio-nota{font-size:var(--t-caption); color:var(--ink-64); line-height:1.5; margin:0;}

.promo-banner{
  display:flex; align-items:center; gap:var(--e-2);
  background:var(--sunset); color:var(--ink);
  font-size:var(--t-small); font-weight:700;
  padding:var(--e-3) var(--e-4); border-radius:var(--r-chico);
  box-shadow:var(--sunset-glow);
  margin-bottom:var(--e-4);
}
.promo-banner .i{width:16px; height:16px; flex-shrink:0;}


/* ---------- 19. PANEL DE BLOQUE (contraste por rubro) --------------------
   Opción B elegida por Emi (ver mockup-contraste.html): la página sigue
   entera en --arena, pero cada bloque de categoría (los carruseles del home
   y el listado de una página de categoría) queda dentro de una "bandeja"
   --paper con sombra y borde propio. Separa visualmente cada rubro del
   fondo general y hace que el marco dorado de .card--destacado resalte más
   (más contraste local) sin oscurecer media página como la otra opción. */
.bloque-panel{
  background:var(--paper);
  border:1px solid var(--arena-borde);
  border-radius:var(--r-bloque);
  box-shadow:var(--sombra-2);
  padding:var(--e-6);
}
@media (max-width:600px){
  .bloque-panel{padding:var(--e-4); border-radius:var(--r-card);}
}
/* Dentro del panel las cards ya no necesitan su propia sombra (quedarían
   "flotando" dos veces) — se distinguen por el borde nomás, salvo las
   destacadas que conservan el resplandor dorado. */
.bloque-panel .card{box-shadow:none; border-color:rgba(139,115,85,.4);}
.bloque-panel .card--destacado{box-shadow:var(--sunset-glow);}
.bloque-panel .card:hover{box-shadow:var(--sombra-1);}