/* ==========================================================================
   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);}
.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-5);}
.nav__link{
  font-size:var(--t-small);
  font-weight:500;
  color:var(--ink-80);
  padding-block:var(--e-2);
  position:relative;
}
.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);}

.nav__toggle{
  display:none; background:none; border:0; padding:var(--e-2);
  color:inherit; cursor:pointer;
}
@media (max-width:900px){
  .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;}
}

/* ---------- 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 .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%);
  }
}

.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);
  display:grid; grid-template-columns:repeat(7,1fr); gap:var(--e-3);
}
@media (max-width:900px){
  .hero__categorias{grid-template-columns:repeat(4,1fr); gap:10px; padding-bottom:var(--e-7);}
}

.cat{
  position:relative;
  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;
}
.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);}
@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;}
}

.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:var(--e-4) 0; 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;}

.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;}

.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;
}
.foto-item.es-portada{border-color:var(--atardecer);}
.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;
}

.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);}

/* ---------- 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);}

/* ---------- 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);}