/* ═══════════════════════════════════════════════════════════
   BRASAL — catering y eventos
   Noche, brasa y mantel.

   ⚠ ES LA SEGUNDA DEMO OSCURA, Y ESO ES EL PROBLEMA A RESOLVER.
   Marena (hotel) ya es verde profundo con dorado. Si ésta sale
   "oscura con dorado" también, las dos se leen como la misma
   plantilla pintada distinto, que es exactamente lo que las demos
   están para desmentir. Lo que las separa, en orden de peso:

     1 · LA TEMPERATURA. Marena es verde —vegetal, húmedo, spa—.
         Brasal es marrón quemado y naranja de brasa: seco, caliente,
         de fuego. Son los dos oscuros, y no se parecen en nada.
     2 · EL FONDO. Allá cáusticas de pileta; acá carbón encendido.
     3 · LAS FOTOS. Allá arquitectura y agua, casi sin gente; acá
         manos, platos y mesas llenas. El catering se vende con gente
         alrededor de la mesa, no con el salón vacío.
     4 · LA TIPOGRAFÍA. Allá la serif es un acento; acá los titulares
         son serif enteros, en cuerpos grandes: es un rubro de carta
         de restaurante, no de folleto de hotel.
     5 · LAS ESQUINAS. Allá 2 px. Acá 10 px, que es lo que separa una
         marca de servicio hospitalario de una de lujo distante.

   ⚠ Y el tercer color de data-paleta tiene que ser EXACTAMENTE el
   --bg (#120C09): el flujo pinta todos los píxeles de la pantalla y,
   si no coincide, se ve el escalón donde termina el canvas.
   ═══════════════════════════════════════════════════════════ */

:root{
  /* Marrón de leña apagada, no negro. El negro puro con naranja
     encima se lee a cartel de parrilla de ruta; el marrón sostiene la
     brasa sin gritar. */
  --bg:          #120C09;
  --bg-2:        #1A110C;
  --surface:     #221710;
  --surface-2:   #2C1E16;
  --line:        rgba(245,232,216,.11);
  --line-strong: rgba(245,232,216,.22);

  /* El texto es color mantel: sobre marrón cálido el blanco puro
     vibra y encima delata que el fondo no es neutro. */
  --text:        #F5E8D8;
  --text-2:      #D6C3AC;
  --muted:       #97836D;

  /* La brasa. Aparece poco y siempre en cosas chicas —botones, el
     filete de los titulares, los números—. Un naranja de este voltaje
     usado de más convierte cualquier página en una promoción. */
  --accent:      #E0713A;
  --accent-2:    #F09455;
  --accent-deep: #A94B1E;
  --on-accent:   #120C09;
  --glow:        rgba(224,113,58,.34);
  --glow-soft:   rgba(224,113,58,.12);

  --vidrio:        linear-gradient(165deg,rgba(245,232,216,.09),rgba(245,232,216,.03));
  --vidrio-fuerte: linear-gradient(165deg,rgba(245,232,216,.16),rgba(245,232,216,.05));
  --campo-bg:      rgba(10,7,5,.5);

  --font:  'Inter', ui-sans-serif, system-ui, sans-serif;
  --serif: 'Instrument Serif', Georgia, serif;
  --tracking-h: -.018em;
  --radius:      10px;
  --radius-sm:   6px;
  --radius-pill: 100px;

  --sh-depth: 0 10px 38px rgba(0,0,0,.72);
  --sh-lit:   0 0 24px rgba(224,113,58,.30);
  --sh-hover: 0 0 22px rgba(240,148,85,.78), 0 0 54px rgba(224,113,58,.30);
  --sh-suave: 0 2px 14px rgba(0,0,0,.62);
  --sombra-panel: 0 40px 90px -58px rgba(0,0,0,.95);

  --grano-op: .055;
  /* El primer tramo llega al 62 %: más temprano y el negro le cae
     encima al titular, que arranca cerca del borde izquierdo. */
  --vineta: radial-gradient(108% 92% at 50% 44%, transparent 62%, rgba(8,5,3,.55) 100%);
}

.bg-static{
  background:
    radial-gradient(58% 46% at 62% 30%, #3A1E0E, transparent 70%),
    radial-gradient(70% 58% at 34% 96%, #0A0705, transparent 74%),
    var(--bg);
}

/* ── Los titulares en serif, y grandes ──
   Es lo que más la separa de Marena. Un rubro que vive de una carta
   escrita a mano pide la letra de una carta, no la de un folleto. */
.h1, .h2{ font-family:var(--serif); font-weight:400; letter-spacing:-.012em }
.h1{ line-height:.98 }
.h3{ font-family:var(--font); font-weight:500; letter-spacing:-.01em }
.eyebrow{ letter-spacing:.22em }

/* ── El hero ── */
.hero--brasal{ min-height:100svh; display:flex; align-items:center; position:relative }
.hero--brasal .hero__inner{ position:relative; z-index:3; max-width:44rem }
/* El margen no sobra: la serif va con interlineado 0,98 y sin esto el
   párrafo se le mete abajo de las descendentes de la última línea. */
.hero--brasal .h1{ margin-bottom:clamp(1.4rem,3vw,2.2rem) }
.hero--brasal .hero__lead{ max-width:38ch; color:var(--text-2) }

/* ── El titular vivo, en variante BRASA ──
   El color no cruza de blanco a blanco pasando por naranja: arranca
   color mantel, pasa por la brasa y sale por el amarillo del rescoldo.
   Tres colores distintos y no dos iguales con uno en el medio: eso es
   lo que hace que se lea como CALOR recorriendo la palabra y no como un
   reflejo yendo y viniendo.

   Va más rápido que las otras dos demos —5,4 s contra 8,5 y 9— porque
   el fuego se mueve rápido. Es la misma pieza en las tres landings y
   suena distinta en cada una sólo por los tiempos, que es exactamente
   lo que tiene que pasar. */
.titulo-vivo{
  --tv-1:#F5E8D8;
  --tv-2:#E0713A;
  --tv-3:#FFCE8C;
  --tv-luz:5.4s;
  --tv-ola:3.6s;
  --tv-alto:-7px;
}
/* El titular es serif y de cuerpo grande: partido en letras, el
   interletrado por omisión lo abre de más. */
.hero--brasal .titulo-vivo{ letter-spacing:-.025em }
.hero__lead.destella{ --dest-base:var(--text-2); --dest-luz:#FFB06B; animation-duration:8s }
.hero__acciones{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:clamp(1.8rem,4vw,2.6rem) }

/* La foto del hero va a todo el ancho, detrás, y bien tapada: es
   atmósfera, no información. Con la foto legible el titular pelea
   contra las velas y pierde. */
/* ⚠ UN SOLO DEGRADADO, NO MÁSCARA + DEGRADADO.
   La primera versión llevaba las dos cosas y donde se cruzaban quedaba
   un corte diagonal visible abajo a la derecha, que se leía como un
   error de recorte de la foto. El degradado solo alcanza y no puede
   dejar filos: es una transición y nada más. */
.hero__foto{ position:absolute; inset:0; z-index:1; overflow:hidden }
.hero__foto img{ width:100%; height:100%; object-fit:cover; opacity:.40 }
.hero__foto::after{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(90deg,var(--bg) 2%,rgba(18,12,9,.86) 34%,rgba(18,12,9,.34) 100%),
    linear-gradient(0deg,var(--bg) 1%,transparent 26%);
}

/* ── La franja de formatos ── */
.formatos{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(.9rem,2vw,1.5rem) }
@media (max-width:860px){ .formatos{ grid-template-columns:1fr } }
.formato{
  position:relative; overflow:hidden;
  border:1px solid var(--line); border-radius:var(--radius);
  background:var(--vidrio);
  transition:transform .55s var(--ease), border-color .45s var(--ease),
             box-shadow .55s var(--ease);
}
/* ── La brasa que se enciende en el borde ──
   Una tarjeta con borde gris es una tarjeta de plantilla. Lo que la
   saca de ahí no es más borde: es que el borde tenga un estado. Al
   pasar el mouse, una línea de brasa se dibuja de izquierda a derecha
   por arriba y la caja se levanta un poco.

   ⚠ El resplandor va en box-shadow y se anima con opacity, nunca con
   `filter` ni animando la sombra en sí: una sombra que cambia de radio
   repinta la tarjeta entera en cada cuadro. */
.formato::before{
  content:''; position:absolute; inset:0 0 auto; height:2px; z-index:2;
  background:linear-gradient(90deg, transparent, var(--accent) 22%, #FFC58A 50%, var(--accent) 78%, transparent);
  transform:scaleX(0); transform-origin:0 50%;
  transition:transform .7s var(--ease);
}
@media (hover:hover){
  .formato:hover{
    transform:translateY(-6px);
    border-color:var(--line-strong);
    box-shadow:0 30px 70px -40px rgba(0,0,0,.9), 0 0 0 1px rgba(224,113,58,.18);
  }
  .formato:hover::before{ transform:scaleX(1) }
  /* La foto gira apenas y se acerca. El giro es lo que lo saca de
     "zoom de plantilla": un plano que se agranda es un zoom; un plano
     que se agranda TORCIDO es una cámara que se movió. */
  .formato:hover .formato__foto img{ transform:scale(1.09) rotate(-1.4deg); opacity:1 }
  .formato:hover .formato__ord{ opacity:.9; transform:translateY(0) }
}
.formato__foto{ position:relative; aspect-ratio:3/2; overflow:hidden }
.formato__foto img{
  width:100%; height:100%; object-fit:cover; opacity:.85;
  transition:transform 1.1s var(--ease), opacity .6s var(--ease);
}
/* El ordinal, en serif y muy tenue, encima de la foto. Es el detalle
   que dice «esto es una colección de tres» sin escribirlo. */
.formato__ord{
  position:absolute; z-index:2; left:.9rem; bottom:.5rem;
  font-family:var(--serif); font-size:clamp(2.2rem,4.4vw,3.2rem);
  line-height:1; color:#F5E8D8; opacity:.42;
  transform:translateY(8px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
  text-shadow:0 4px 22px rgba(0,0,0,.8);
  pointer-events:none;
}
.formato__txt{ padding:clamp(1.2rem,2.6vw,1.8rem) }
/* El h3 de base está calibrado para un titular de sección, no para el
   rótulo de una tarjeta: a tamaño de sección, «Casamientos» compite con
   el h2 que tiene arriba y la jerarquía se da vuelta. */
.formato h3{ margin:0 0 .6rem; font-size:clamp(1.25rem,2.2vw,1.6rem) }
.formato p{ margin:0; color:var(--text-2); font-size:.95rem; line-height:1.6 }
/* Chapita, no renglón suelto. La cantidad de gente es el dato que más
   se busca en este rubro —antes que el precio—, y un dato que se busca
   tiene que poder encontrarse de un vistazo. */
.formato__desde{
  display:inline-block; margin-top:1rem;
  padding:.34rem .7rem;
  font-size:.78rem; letter-spacing:.06em; color:var(--accent-2);
  border:1px solid rgba(224,113,58,.3); border-radius:100px;
  background:rgba(224,113,58,.07);
}

/* ── Lo que llega, en tres pasos, sin una palabra técnica ── */
.simple__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.4rem,3vw,2.6rem) }
@media (max-width:860px){ .simple__grid{ grid-template-columns:1fr } }
.simple__paso b{
  display:block; font-family:var(--serif); font-size:clamp(2.4rem,5vw,3.4rem);
  line-height:1; color:var(--accent); font-weight:400; margin-bottom:.6rem;
}
.simple__paso h3{ margin:0 0 .5rem; font-size:1.12rem }
.simple__paso p{ margin:0; color:var(--text-2); line-height:1.65 }

/* ── La ficha de números ── */
.cifras{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(.8rem,2vw,1.4rem) }
@media (max-width:760px){ .cifras{ grid-template-columns:repeat(2,1fr) } }
.cifra{
  padding:clamp(1.1rem,2.4vw,1.7rem); text-align:center;
  border:1px solid var(--line); border-radius:var(--radius); background:var(--vidrio);
}
.cifra b{
  display:block; font-family:var(--serif); font-weight:400;
  font-size:clamp(2.2rem,5vw,3.4rem); line-height:1; color:var(--accent-2);
}
.cifra span{ display:block; margin-top:.5rem; font-size:.78rem; color:var(--muted); letter-spacing:.04em }

/* ── La carta ── */
.carta{ display:grid; gap:.2rem; margin-top:clamp(1.6rem,3vw,2.4rem) }
.carta__fila{
  display:flex; align-items:baseline; gap:.9rem;
  padding:.95rem 0; border-bottom:1px solid var(--line);
}
.carta__fila b{ font-family:var(--serif); font-weight:400; font-size:1.18rem; white-space:nowrap }
.carta__fila i{ flex:1; border-bottom:1px dotted var(--line-strong); transform:translateY(-.25em) }
.carta__fila span{ color:var(--text-2); font-size:.92rem; white-space:nowrap }
@media (max-width:640px){
  .carta__fila{ flex-wrap:wrap; gap:.35rem }
  .carta__fila i{ display:none }
  .carta__fila span{ width:100%; color:var(--muted) }
}

/* ── La sección que se pincha ──
   ⚠ .process__grid y .process__aside NO están en base.css: viven en el
   style.css de la landing del estudio. Usarlas acá sin escribirlas es
   pedir una sección pegada que nunca se pega, y no hay ningún error
   que lo avise: la sección se ve normal y el efecto simplemente no
   ocurre. Van escritas acá, en el tema.

   Y no funciona si CUALQUIER ancestro tiene overflow distinto de
   visible. Es la causa del 90 % de los "no anda". En vertical se
   apaga: pegar algo en una pantalla de teléfono es comerse media
   pantalla. */
.process__grid{
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.3fr);
  gap:clamp(2.5rem,6vw,5.5rem); align-items:start;
}
.process__aside{
  position:sticky;
  top:calc(var(--header-h) + clamp(2rem,7vh,5rem));
}
@media (max-width:900px){
  .process__grid{ grid-template-columns:1fr; gap:clamp(1.6rem,5vw,2.4rem) }
  .process__aside{ position:static }
}

/* ── El retrato del equipo ── */
/* ⚠ minmax(0,…) Y NO .9fr A SECAS.
   Una pista `fr` tiene mínimo automático: no baja del contenido más
   ancho que le toque. Anidada adentro de otra grilla, ese mínimo
   empuja y la fila termina un píxel más ancha que la ventana. Un
   píxel no se ve, pero aparece la barra de scroll horizontal en toda
   la página. Salió a 900 px de ancho —de los del medio, los que nadie
   prueba— y en ningún otro. minmax(0,…) le saca el piso a la pista y
   deja que se achique. */
.equipo__grid{
  display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(1.8rem,4vw,3.4rem); align-items:center;
}
@media (max-width:900px){ .equipo__grid{ grid-template-columns:minmax(0,1fr) } }
.equipo__foto{
  position:relative; border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--sombra-panel);
}
.equipo__foto img{ width:100%; height:auto; display:block }

/* ── La banda de la brasa ──
   Va como hija directa de la sección, nunca dentro de .container, y
   nunca con width:100vw: 100vw incluye la barra de scroll y abre
   desborde horizontal en todo el sitio. */
.banda--brasa{ position:relative; overflow:hidden; border-block:1px solid var(--line) }
.banda--brasa img{ width:100%; height:clamp(240px,42vh,460px); object-fit:cover; opacity:.55 }
.banda--brasa .banda__frase{
  position:absolute; inset:auto 0 0 0; padding:clamp(1.4rem,4vw,3rem);
  background:linear-gradient(180deg,transparent,rgba(18,12,9,.9));
  font-family:var(--serif); font-size:clamp(1.4rem,3.6vw,2.6rem);
  line-height:1.15; max-width:22ch;
}

/* ── En vertical ── */
@media (max-width:760px){
  .hero__foto{ -webkit-mask-image:none; mask-image:none }
  .hero__foto img{ opacity:.26 }
  .hero--brasal .hero__lead{ max-width:30ch }
}

/* ── El reflejo de los títulos de sección ──
   La brasa del hero, en los <h2>. Termina en el amarillo caliente y no
   en el crudo del texto: la letra queda tibia un segundo después de
   que pasó la luz, que es lo que hace algo recién apagado. */
.reflejo{
  --rf-1: var(--text);
  --rf-2: var(--accent);
  --rf-3: #FFCE8C;
  --rf-luz: 6s;
}

/* ── Los tres pasos: el número es el que se mueve ──
   Entraban con un reveal-up, o sea los tres subiendo iguales, y tres
   bloques iguales que suben juntos se leen como UN bloque. Ahora entran
   girando y desfasados (initGiro alterna el sentido), que es lo que los
   convierte en tres cosas.

   Pero lo que saca a la sección de lo estático no es la entrada: es que
   el número esté vivo cuando ya entró. Antes era un 1 naranja plano.
   Ahora es una brasa: degradado vertical recortado a la letra, del
   amarillo de la punta de la llama al rojo del carbón de abajo, y
   detrás un resplandor que respira.

   ⚠ El resplandor late con `transform` y `opacity`, nunca con
   `filter` ni con `box-shadow`. Un box-shadow animado repinta el
   elemento entero en cada cuadro y son tres a la vez; con transform lo
   resuelve la placa y no cuesta nada. */
.simple__paso{ position:relative }
.simple__paso b{
  position:relative; z-index:1;
  font-size:clamp(3.2rem,7.5vw,5.2rem);
  background-image:linear-gradient(178deg,
    #FFE0A3 0%, #FFCE8C 22%, #E0713A 62%, #A94B1E 100%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
}
.simple__paso::before{
  content:''; position:absolute; z-index:0; pointer-events:none;
  left:-.35em; top:-.30em; width:2.6em; height:2.6em;
  font-size:clamp(3.2rem,7.5vw,5.2rem);   /* la brasa mide como el número */
  border-radius:50%;
  background:radial-gradient(circle at 50% 55%,
    rgba(255,180,90,.34) 0%,
    rgba(224,113,58,.20) 38%,
    transparent 68%);
  transform:scale(.9);
  animation:brasaLatir 4.6s ease-in-out infinite;
}
.simple__paso:nth-child(2)::before{ animation-delay:-1.5s }
.simple__paso:nth-child(3)::before{ animation-delay:-3.1s }
@keyframes brasaLatir{
  0%, 100%{ transform:scale(.9);  opacity:.75 }
  50%     { transform:scale(1.07); opacity:1 }
}

/* ── «El fuego no se apura» ──
   Era un pie de foto de cuerpo 2,6 rem tapado por un degradado negro.
   Es la única frase de la página que no explica nada y no vende nada:
   es la marca hablando. Una frase así, o es grande, o sobra.

   Ahora ocupa el ancho útil de la banda, arranca en el cuerpo de un
   titular de sección, y le cruza la misma luz de brasa que a los
   títulos —con la ventaja de que .reflejo se pausa cuando la banda no
   está en pantalla, que es la mayor parte del tiempo—.

   Debajo de la letra hay dos capas de fuego, no una: un resplandor
   ancho y quieto que le da cama al texto, y encima dos lenguas que
   suben y se deshacen desfasadas. Con una sola capa se lee a
   degradado naranja; son las dos juntas, moviéndose a distinta
   velocidad, las que se leen como brasas. */
/* ⚠ SIN max-width, Y ACÁ ESTÁ LA TRAMPA. La regla vieja tenía
   `inset:auto 0 0 0` MÁS `max-width:22ch`: la caja quedaba anclada a la
   izquierda y cortada a la mitad del ancho de la banda. Con la frase
   chica no se veía; con la frase grande, la caja creció para arriba y
   su degradado oscuro pasó a ser un RECTÁNGULO visible en la mitad
   izquierda de la foto, con un borde recto que cruzaba la imagen.

   El quiebre de renglón no lo hacía el max-width igual: lo hace el
   <br> que está en el HTML. Así que la caja va a todo el ancho —el
   degradado tapa parejo— y el texto se acomoda solo.

   Y el degradado arranca en .25 y no en transparente: la primera línea
   ahora cae sobre la parte más clara de la foto, que son las llamas. */
.banda--brasa .banda__frase{
  font-size:clamp(2rem,5.6vw,4.4rem);
  line-height:1.02; max-width:none; width:100%;
  letter-spacing:-.02em;
  padding:clamp(2rem,6vw,4.2rem) clamp(1.4rem,4vw,3rem);
  background:linear-gradient(180deg,
    transparent 0%, rgba(18,12,9,.42) 22%, rgba(18,12,9,.74) 52%, rgba(18,12,9,.94) 100%);
}
.banda--brasa .banda__frase{
  --rf-1:#FFF0DC;
  --rf-2:#FF8A3D;
  --rf-3:#FFCE8C;
  --rf-luz:5.2s;
}
/* Las lenguas de fuego.

   ⚠ VAN EN LOS PSEUDOELEMENTOS DE LA FRASE, NO DE LA BANDA, y esto lo
   descubrí poniéndolas mal primero. En la banda quedaban DEBAJO de la
   caja de la frase, y esa caja tiene un degradado que llega al 94 % de
   negro: las llamas se veían por fuera del texto y desaparecían justo
   detrás de él, que es donde tenían que verse.

   Adentro de la frase, con `isolation:isolate` en el padre y
   `z-index:-1` en el pseudo, la llama queda ARRIBA del degradado
   oscuro y DEBAJO del texto. Es el único lugar de la pila donde sirve.

   Dos capas y no una: un resplandor ancho y lento, y otro más chico,
   más rápido y desfasado. Con una sola se lee a degradado naranja; son
   las dos moviéndose a distinta velocidad las que se leen como brasas.
   Las dos se mueven con transform y opacity, así que no repintan. */
.banda--brasa .banda__frase{ position:absolute; z-index:2; isolation:isolate }
.banda--brasa .banda__frase::before,
.banda--brasa .banda__frase::after{
  content:''; position:absolute; z-index:-1; pointer-events:none;
  left:0; right:0; bottom:0; height:88%;
  background:radial-gradient(52% 100% at 22% 100%,
    rgba(255,138,61,.50) 0%, rgba(224,113,58,.22) 44%, transparent 74%);
  transform-origin:50% 100%;
  animation:llama 6.5s ease-in-out infinite;
  mix-blend-mode:screen;
}
.banda--brasa .banda__frase::after{
  background:radial-gradient(40% 100% at 58% 100%,
    rgba(255,206,140,.40) 0%, rgba(255,138,61,.16) 48%, transparent 76%);
  animation-duration:4.9s; animation-delay:-2.2s;
}
@media (prefers-reduced-motion:reduce){
  .simple__paso::before,
  .banda--brasa .banda__frase::before,
  .banda--brasa .banda__frase::after{ animation:none }
}