/* ═══════════════════════════════════════════════════════════
   TEMA — Casa Lumé (estética facial y corporal)
   Editorial, cálido, lujo callado. Nada de celeste ni de violeta:
   nude, arena y un bronce apagado. Acá manda la serif y las
   esquinas son RECTAS — es lo que separa "spa de barrio" de
   "clínica de estética".
   ═══════════════════════════════════════════════════════════ */
:root{
  --bg:          #FBF7F3;
  --bg-2:        #F4EDE5;
  --surface:     #FFFDFB;
  --surface-2:   #F7F0E9;
  --line:        rgba(74,52,38,.13);
  --line-strong: rgba(74,52,38,.26);

  --text:        #2B1F17;
  --text-2:      #5C4A3C;
  --muted:       #8A7462;

  --accent:      #A9754C;
  --accent-2:    #8A5B37;
  --accent-deep: #6B4527;
  --on-accent:   #FFFDFB;
  --glow:        rgba(169,117,76,.24);
  --glow-soft:   rgba(169,117,76,.08);

  --vidrio:        linear-gradient(165deg,rgba(255,253,251,.92),rgba(255,253,251,.62));
  --vidrio-fuerte: linear-gradient(165deg,#FFFDFB,rgba(255,253,251,.8));
  --campo-bg:      #FFFDFB;

  --tracking-h:  -.02em;
  --radius:      3px;
  --radius-sm:   3px;
  --radius-pill: 3px;   /* botones rectos: es el gesto editorial */

  --sh-depth: none;
  --sh-lit:   none;
  --sh-hover: none;
  --sh-suave: none;
  --sombra-panel: 0 30px 70px -50px rgba(74,52,38,.4);

  /* Tema claro y cálido: la viñeta cierra en el mismo marrón de la
     paleta, nunca en negro, que acá se vería sucio. */
  --grano-op: .03;
  --vineta: radial-gradient(135% 100% at 50% 40%, transparent 58%, rgba(74,55,44,.10) 100%);
}

.bg-static{ opacity:.6 }
.hero__grid{ display:none }   /* la grilla es lenguaje técnico; acá estorba */

/* ── Tipografía editorial ──
   El titular entero en serif. Es el cambio que más se nota y el que
   hace que esta demo no se parezca a ninguna de las otras tres. */
.h1, .h2{ font-family:var(--serif); font-weight:400; letter-spacing:-.01em }
.h1{ line-height:1.02 }
.h2{ line-height:1.06; max-width:20ch }
.h1 em, .h2 em{ font-style:italic; color:var(--accent) }
.eyebrow{ letter-spacing:.3em; font-size:.66rem; color:var(--muted) }
.eyebrow::before{ width:44px }

/* ── Hero a pantalla completa con foto de fondo ── */
.hero{ min-height:100svh }
.hero__foto{
  position:absolute; inset:0; z-index:0; overflow:hidden;
}
.hero__foto img{ width:100%; height:100%; object-fit:cover }
/* Velo claro: la foto tiene que estar, pero el texto tiene que ganar. */
.hero__foto::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(251,247,243,.96) 0%, rgba(251,247,243,.86) 42%, rgba(251,247,243,.35) 100%);
}
@media (max-width:900px){
  .hero__foto::after{ background:linear-gradient(180deg, rgba(251,247,243,.93) 42%, rgba(251,247,243,.72) 100%) }
}
.hero__title{ max-width:13ch }

/* ── El titular vivo, en variante METAL ──
   Es el mismo oro que corre por el fondo, pero adentro de las letras:
   la cinta y el titular tienen que leerse como el mismo material, o son
   dos efectos sueltos en la misma pantalla.

   ⚠ La parada del medio NO puede ser casi blanca. En un tema crema, un
   oro muy aclarado adentro de una letra se lee como si la letra
   estuviera rota. Va un dorado medio: contrasta contra el marrón del
   texto y contra el fondo al mismo tiempo. */
.titulo-vivo{
  --tv-1:#2B1F17;
  --tv-2:#A9754C;
  --tv-3:#D9B36A;
  --tv-luz:9s;
  --tv-ola:6.4s;
  --tv-alto:-5px;
}
.hero__lead.destella{ --dest-base:var(--text-2); --dest-luz:#A9754C; animation-duration:12s }

/* ── Halo de fondo detrás de la lista de precios ──
   La cinta de oro cruza toda la pantalla y en algún momento pasa por
   encima de esta lista. Un precio tapado es una página rota, por linda
   que esté; y correr la cinta no alcanza, porque cruza a cualquier
   altura según dónde estés en el scroll.

   La solución no es bajar el fondo: es que el texto se defienda. Un
   halo del color de la página alrededor de cada letra es invisible
   cuando no hay nada detrás y recorta la letra contra el oro cuando lo
   hay. Es el mismo truco de los subtítulos sobre imagen. */
.tarifas span, .tarifas b{
  text-shadow:0 0 7px var(--bg), 0 0 4px var(--bg), 0 0 2px var(--bg);
}

/* ── Tarjetas sin caja ──
   En un tema editorial la caja ensucia: dejamos sólo una línea arriba.
   Menos tinta, más aire. */
.tarjeta{
  background:none; backdrop-filter:none; border:0;
  border-top:1px solid var(--line-strong);
  border-radius:0; padding:1.6rem 0 0;
}
.tarjeta:hover{ background:none; transform:translateY(-3px); border-color:var(--accent) }
.tarjeta h4{ font-family:var(--serif); font-weight:400; font-size:1.35rem; margin-bottom:.5rem }

/* ── Galería a dos columnas, más grande ── */
.galeria{ grid-template-columns:repeat(2,1fr); gap:clamp(.8rem,2vw,1.4rem) }
.galeria img{ aspect-ratio:3/4 }
.galeria figcaption{
  font-family:var(--serif); font-size:.95rem; letter-spacing:.02em;
  background:linear-gradient(180deg, transparent, rgba(43,31,23,.62));
}

/* ── Sello del hero ──
   Abajo a la derecha, donde no pelea con el titular. En vertical
   desaparece: ahí el espacio es del texto. */
.hero__sello{
  position:absolute; right:clamp(1.5rem,5vw,4rem); bottom:clamp(2rem,7vh,5rem);
  z-index:2;
}
@media (max-width:900px){ .hero__sello{ display:none } }
.sello text{ font-family:var(--font); font-size:10.6px; letter-spacing:.22em }

/* ── Cinta editorial ──
   Sin bordes: en un tema de revista una línea arriba y abajo la
   convertiría en un widget. Que respire. */
.cinta{ border:0; padding-block:clamp(1.4rem,4vw,3rem) }
.cinta--grande .cinta__pista{ font-family:var(--serif); font-weight:400; letter-spacing:-.02em }

/* ── Cifras ── */
.cifras{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.4rem,4vw,3rem) }
@media (max-width:700px){ .cifras{ grid-template-columns:1fr; gap:1.6rem } }
.cifras div{ border-top:1px solid var(--line-strong); padding-top:1.1rem }
.cifras b{
  display:block; font-family:var(--serif); font-weight:400;
  font-size:clamp(2.4rem,5vw,3.6rem); line-height:1; color:var(--accent);
}
.cifras span{ font-size:.86rem; color:var(--muted) }

/* ── Lista de precios ── */
.tarifas{ border-top:1px solid var(--line-strong) }
.tarifas li{
  display:flex; align-items:baseline; gap:1rem;
  padding:1.05rem 0; border-bottom:1px solid var(--line);
}
.tarifas span:first-child{ font-family:var(--serif); font-size:1.15rem; color:var(--text) }
.tarifas i{ flex:1; border-bottom:1px dotted var(--line-strong); transform:translateY(-4px) }
.tarifas b{ font-weight:500; color:var(--accent); white-space:nowrap }

#quienes .hero__media img{ aspect-ratio:3/4; object-fit:cover }

/* ── El reflejo de los títulos de sección ──
   El mismo oro con filo del titular del hero. Va en la variante METAL
   y no en la lisa por una razón concreta: en el hero el <h1> ya es
   metal, y si los <h2> llevaran el degradado suave se leerían como dos
   materiales distintos en la misma página —oro pulido arriba, plástico
   abajo—.

   ⚠ Las paradas están calibradas para un tema CLARO y no se pueden
   subir de brillo. En crema, un oro muy aclarado adentro de una letra
   no se lee como reflejo: se lee como si la letra estuviera rota o
   como un error de impresión. La parada del medio es un dorado medio
   (#A9754C) que contrasta contra el marrón del texto Y contra el
   fondo, y la de arriba (#D9B36A) es el punto más claro que aguanta. */
.reflejo{
  --rf-1:#2B1F17;
  --rf-2:#A9754C;
  --rf-3:#D9B36A;
  --rf-luz:9s;
}

/* ── Las seis tarjetas que giran ──
   Acá el dorso NO va en el acento pelado. El nude de Casa Lumé
   (#A9754C) sobre un tema crema es un marrón medio: a tarjeta llena se
   lee a cartón, que es exactamente lo contrario de lo que vende la
   marca. Va un degradado del nude al dorado claro, que es el mismo par
   de colores que usa la cinta de metal del fondo y el reflejo de los
   títulos: la tarjeta dada vuelta se lee como un pedazo de esa cinta.

   ⚠ El degradado va en background-image y el color plano en background
   por separado, porque --gira-color se sigue usando para el borde del
   frente al apuntarlo: si se lo reemplazara por el degradado, el borde
   quedaría sin color. */
.tarjeta-gira{
  --gira-color:#A9754C;
  --gira-tinta:#FFF8EE;
  --gira-fondo:rgba(255,255,255,.72);
}
.gira__dorso{
  background-image:linear-gradient(148deg,#C08A5C 0%, #A9754C 44%, #8A5A36 100%);
}
.gira__dorso h4{ font-family:var(--serif); font-weight:400; letter-spacing:-.01em }
/* El frente, con la sombra suave del tema: en un fondo claro un borde
   de un píxel no alcanza para que la tarjeta se despegue del papel. */
.tarjeta-gira .gira__frente{ box-shadow:var(--sombra-panel) }