/* =========================================================
   Gustito Banquetería · sistema visual v3
   Paleta y tipografías del Manual de Marca v6
   Ajuste acordado en reunión del 21-08-2026: menos rectas y
   menos cuadrados; esquinas orgánicas, ondas en los separadores
   y botones redondeados. La jerarquía la sigue haciendo la
   tipografía.
   ========================================================= */

@font-face{font-family:'Bricolage';src:url('../fonts/bricolage-800.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/inter-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/inter-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/inter-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}

:root{
  /* Grano de papel: textura de ruido muy suave para que ningún fondo
     quede plano (pedido del 21-08). Una tinta oscura para fondos claros
     y una clara para fondos oscuros o terracota. */
  --grano-oscuro:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .12 0 0 0 0 .23 0 0 0 0 .24 0 0 0 .022 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --grano-claro:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .93 0 0 0 0 .89 0 0 0 .075 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  /* Campo de ondas grande: el gesto de la raya de la marca, repetido como
     paisaje al fondo de las secciones oscuras y del cierre. */
  --ondas-crema:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='980' height='620'%3E%3Cg fill='none' stroke='%23EEE4DB' stroke-width='2.5' stroke-linecap='round' stroke-opacity='.08'%3E%3Cpath d='M-20 90 Q 145 25 310 90 T 640 90 T 970 90 T 1300 90'/%3E%3Cpath d='M-20 215 Q 145 150 310 215 T 640 215 T 970 215 T 1300 215'/%3E%3Cpath d='M-20 340 Q 145 275 310 340 T 640 340 T 970 340 T 1300 340'/%3E%3Cpath d='M-20 465 Q 145 400 310 465 T 640 465 T 970 465 T 1300 465'/%3E%3Cpath d='M-20 590 Q 145 525 310 590 T 640 590 T 970 590 T 1300 590'/%3E%3C/g%3E%3C/svg%3E");
  --ondas-petroleo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='980' height='620'%3E%3Cg fill='none' stroke='%231F3A3D' stroke-width='2.5' stroke-linecap='round' stroke-opacity='.075'%3E%3Cpath d='M-20 90 Q 145 25 310 90 T 640 90 T 970 90 T 1300 90'/%3E%3Cpath d='M-20 215 Q 145 150 310 215 T 640 215 T 970 215 T 1300 215'/%3E%3Cpath d='M-20 340 Q 145 275 310 340 T 640 340 T 970 340 T 1300 340'/%3E%3Cpath d='M-20 465 Q 145 400 310 465 T 640 465 T 970 465 T 1300 465'/%3E%3Cpath d='M-20 590 Q 145 525 310 590 T 640 590 T 970 590 T 1300 590'/%3E%3C/g%3E%3C/svg%3E");
  --petroleo:#1F3A3D;
  --petroleo-hondo:#16292B;
  --salvia:#CDD4B1;
  --terracota:#964A2D;
  --terracota-hondo:#7C3B22;
  --crema:#EEE4DB;
  --crema-suave:#F5EFE9;
  --texto-oscuro:#D9E2E0;
  --linea:rgba(31,58,61,.22);
  --linea-osc:rgba(238,228,219,.24);
  --ancho:1240px;
  --gap:clamp(64px,8vw,132px);
  --e:cubic-bezier(.16,.84,.34,1);
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:1.0625rem;line-height:1.6;color:var(--petroleo);
  background:var(--grano-oscuro) var(--crema);-webkit-font-smoothing:antialiased;
}
@media(min-width:900px){body{font-size:1.125rem}}
img{max-width:100%;height:auto;display:block}
a{color:var(--terracota);text-underline-offset:.2em;text-decoration-thickness:1px}
a:hover{color:var(--petroleo)}
:focus-visible{outline:3px solid var(--terracota);outline-offset:3px}
.dark :focus-visible,.hero :focus-visible{outline-color:var(--salvia)}
.saltar{position:absolute;left:-9999px}
.saltar:focus{left:12px;top:12px;z-index:200;background:var(--terracota);color:var(--crema);padding:10px 16px}

/* ---------- tipografía ---------- */
h1,h2,h3{font-family:'Bricolage',sans-serif;font-weight:800;color:var(--petroleo)}
h1{font-size:clamp(2.4rem,6.4vw,5rem);line-height:.98;letter-spacing:-.028em}
h2{font-size:clamp(1.85rem,4.4vw,3.4rem);line-height:1.02;letter-spacing:-.024em}
h3{font-size:clamp(1.12rem,1.9vw,1.5rem);line-height:1.16;letter-spacing:-.012em}
.dark h1,.dark h2,.dark h3{color:var(--crema)}
p{max-width:62ch}
.bajada{font-size:clamp(1.08rem,1.55vw,1.3rem);line-height:1.48;max-width:52ch}
.dark p,.dark li,.dark .bajada{color:var(--texto-oscuro)}
strong,b{font-weight:600}
.dark strong,.dark b{color:var(--crema)}

.rot{font-size:.74rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--terracota);display:block}
.dark .rot{color:var(--salvia)}

/* ---------- estructura ---------- */
.env{width:min(100% - 40px,var(--ancho));margin-inline:auto}
@media(min-width:900px){.env{width:min(100% - 88px,var(--ancho))}}
section{padding-block:var(--gap)}
/* Fondos con vida: cada tipo de sección lleva su lavado de color
   (acuarela salvia/terracota), el campo de ondas o ambos, además del
   grano de papel. Nada queda plano. */
section:not(.dark):not(.hondo):not(.suave):not(.hero):not(.banda):not(.cierre){
  background-image:var(--grano-oscuro),
    radial-gradient(880px 540px at 94% -4%,rgba(205,212,177,.42),transparent 62%),
    radial-gradient(760px 500px at -8% 104%,rgba(150,74,45,.085),transparent 58%);
  background-position:left top,center,center;
  background-repeat:repeat,no-repeat,no-repeat;
  background-color:var(--crema);
}
section.dark{
  background-image:radial-gradient(940px 620px at 102% -6%,rgba(205,212,177,.14),transparent 58%);
  background-repeat:no-repeat;
  background-color:var(--petroleo);
}
section.hondo{background:var(--petroleo-hondo)}
section.suave{
  background-image:var(--grano-oscuro),
    radial-gradient(1000px 580px at -8% -12%,rgba(205,212,177,.5),transparent 60%),
    radial-gradient(840px 540px at 106% 106%,rgba(150,74,45,.09),transparent 56%);
  background-position:left top,center,center;
  background-repeat:repeat,no-repeat,no-repeat;
  background-color:var(--crema-suave);
}

/* Campo de ondas colocado a propósito: en cada sección entra desde un
   lado distinto, alternándose al bajar (pedido del 21-08). La capa vive
   bajo el contenido y sobre el color de fondo. */
section,.pie{position:relative;isolation:isolate}
.ondas-d::before,.ondas-i::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:var(--ondas-petroleo);background-repeat:no-repeat;
  background-position:right -200px top -60px}
.ondas-i::before{background-position:left -200px bottom -80px}
.dark.ondas-d::before,.dark.ondas-i::before,
.hondo.ondas-d::before,.hondo.ondas-i::before,
.cierre.ondas-d::before,.cierre.ondas-i::before,
.pie.ondas-d::before,.pie.ondas-i::before{background-image:var(--ondas-crema)}
.dark a:not(.btn){color:var(--salvia)}
.dark a:not(.btn):hover{color:var(--crema)}

/* El registro: la hairline ahora es una onda dibujada, no una recta.
   (Reunión 21-08: "que las líneas sean ondas".) */
.reg{
  display:flex;align-items:baseline;justify-content:space-between;gap:24px;
  border-top:none;padding-top:19px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='8'%3E%3Cpath d='M0 4 Q 9 1 18 4 T 36 4' fill='none' stroke='%231F3A3D' stroke-opacity='.34' stroke-width='1.4'/%3E%3C/svg%3E") repeat-x left top;
  margin-bottom:clamp(30px,4.2vw,54px);
}
.dark .reg{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='8'%3E%3Cpath d='M0 4 Q 9 1 18 4 T 36 4' fill='none' stroke='%23EEE4DB' stroke-opacity='.38' stroke-width='1.4'/%3E%3C/svg%3E")}
.reg .idx{font-size:.74rem;font-weight:500;letter-spacing:.2em;color:rgba(31,58,61,.52);white-space:nowrap}
.dark .reg .idx{color:rgba(217,226,224,.6)}

/* Retícula editorial: el texto no siempre arranca en el margen */
.desfase{display:grid;gap:clamp(24px,4vw,64px)}
@media(min-width:960px){
  .desfase{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start}
  .desfase.invertida{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
}

/* La ondita de la marca bajo los títulos de sección: un trazo a mano,
   a juego con el campo de ondas de los fondos. */
.desfase h2::after,.desfase h1::after,.dos-col h2::after,.centrado h2::after,.cierre h2::after{
  content:"";display:block;width:78px;height:13px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='78' height='13'%3E%3Cpath d='M3 8.5 Q 13 2.5 23 8.5 T 43 8.5 T 63 8.5 Q 68 11.5 75 6.5' fill='none' stroke='%23964A2D' stroke-width='4.2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/contain;
  margin-top:clamp(14px,1.8vw,20px)}
.centrado h2::after{margin-inline:auto}
.dark .desfase h2::after,.dark .dos-col h2::after,.hondo .dos-col h2::after,
.dark .centrado h2::after,.cierre h2::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='78' height='13'%3E%3Cpath d='M3 8.5 Q 13 2.5 23 8.5 T 43 8.5 T 63 8.5 Q 68 11.5 75 6.5' fill='none' stroke='%23CDD4B1' stroke-width='4.2' stroke-linecap='round'/%3E%3C/svg%3E")}

/* ---------- cabecera ---------- */
.cab{background:var(--petroleo);position:sticky;top:0;z-index:60}
.cab-in{display:flex;align-items:center;gap:22px;padding-block:15px}
.cab a.marca{flex:0 0 auto;display:block}
.cab a.marca img{width:142px}
.nav{margin-left:auto;display:flex;align-items:center;gap:21px}
.nav a{color:var(--crema);text-decoration:none;font-size:.92rem;font-weight:500;white-space:nowrap}
.nav a:hover,.nav a[aria-current="page"]{color:var(--salvia)}
/* El ítem de la ley como botón especial: es EL servicio con Gustito */
@media(min-width:1040px){
  .nav a.nav-ley{border:1.5px solid rgba(205,212,177,.6);border-radius:999px;
    padding:8px 15px;transition:background .2s var(--e),border-color .2s var(--e)}
  .nav a.nav-ley:hover,.nav a.nav-ley[aria-current="page"]{
    background:rgba(205,212,177,.14);border-color:var(--salvia)}
}
.hamb{margin-left:auto;background:none;border:1.5px solid var(--salvia);color:var(--crema);
  font:inherit;font-size:.82rem;font-weight:600;padding:9px 16px;cursor:pointer;letter-spacing:.08em;text-transform:uppercase;border-radius:999px}
@media(min-width:1040px){.hamb{display:none}}
@media(max-width:1039px){
  .nav{position:fixed;inset:62px 0 auto 0;background:var(--petroleo);flex-direction:column;
    align-items:flex-start;gap:0;padding:8px 24px 26px;border-top:1px solid var(--linea-osc);display:none}
  .nav.abierta{display:flex}
  .nav a{padding:14px 0;width:100%;border-bottom:1px solid var(--linea-osc);font-size:1.05rem}
  .nav .btn{margin-top:18px;border-bottom:none;width:auto}
}

/* ---------- botones ---------- */
.btn{
  display:inline-block;background:var(--terracota);color:var(--crema);
  font-weight:600;font-size:.96rem;line-height:1;padding:17px 28px;
  text-decoration:none;border:2px solid var(--terracota);cursor:pointer;font-family:inherit;
  border-radius:999px;
  transition:background .22s var(--e),border-color .22s var(--e),color .22s var(--e);
}
.btn:hover{background:var(--terracota-hondo);border-color:var(--terracota-hondo);color:var(--crema)}
.btn.linea{background:transparent;color:var(--petroleo);border-color:var(--petroleo)}
.btn.linea:hover{background:var(--petroleo);color:var(--crema)}
.dark .btn.linea,.hero .btn.linea{color:var(--crema);border-color:var(--salvia)}
.dark .btn.linea:hover,.hero .btn.linea:hover{background:var(--salvia);color:var(--petroleo);border-color:var(--salvia)}
.btn.chico{padding:12px 18px;font-size:.88rem}
.botonera{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}

/* ---------- portada: foto a sangre con el titular encima ---------- */
.hero{position:relative;min-height:min(90vh,880px);display:flex;align-items:flex-end;
  background:var(--petroleo);overflow:hidden;isolation:isolate}
.hero-bg{position:absolute;inset:0;z-index:-1}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 42%}
@media(max-width:760px){.hero-bg img{object-position:62% 72%}}
.hero-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(178deg,rgba(22,41,43,.62) 0%,rgba(22,41,43,.74) 42%,rgba(22,41,43,.95) 100%)}
.hero .env{padding-block:clamp(76px,14vh,150px) clamp(46px,7vh,84px)}
.hero .rot{color:var(--salvia);margin-bottom:clamp(20px,3vh,34px)}
.hero h1{font-size:clamp(2.9rem,8.6vw,7.2rem);line-height:.93;letter-spacing:-.035em;color:var(--crema);max-width:13ch}
.hero .bajada{color:var(--texto-oscuro);margin-top:clamp(24px,3.4vh,38px);max-width:50ch}
/* La frase de oficio, destacada con fondo (jerarquía 2 del hero),
   y la frase de equipo como tercera línea (reunión 21-08). */
.hero .marca-linea{margin-top:clamp(22px,3.4vh,36px);max-width:none}
.hero .frase-marca{display:inline;font-family:'Bricolage',sans-serif;font-weight:800;
  font-size:clamp(1.22rem,2.7vw,1.95rem);line-height:1.55;letter-spacing:-.012em;
  color:var(--petroleo);background:var(--salvia);padding:.14em .5em;
  border-radius:14px 18px 10px 16px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
/* la tercera frase va en una sola línea (reunión 21-08, segunda ronda) */
.hero .marca-linea+.bajada{margin-top:clamp(14px,2vh,20px);font-size:clamp(.95rem,1.22vw,1.1rem);max-width:none}
.hero .abajo{margin-top:clamp(34px,5vh,60px);font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(217,226,224,.62)}

/* ---------- las tres puertas: filas editoriales, no tres tarjetas iguales ---------- */
.puertas{border-top:1px solid var(--linea)}
.puerta{
  display:grid;gap:6px 40px;align-items:baseline;
  border-bottom:1px solid var(--linea);padding:clamp(24px,3.4vw,40px) 0;
  text-decoration:none;color:inherit;position:relative;
  transition:padding-left .3s var(--e),background-color .3s var(--e);
}
@media(min-width:900px){
  .puerta{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr) 2.2rem}
  .puerta:hover{padding-left:22px;background:var(--salvia)}
}
.puerta .n{font-family:'Bricolage',sans-serif;font-weight:800;
  font-size:clamp(1.35rem,2.9vw,2.15rem);line-height:1.04;letter-spacing:-.02em;color:var(--petroleo)}
.puerta p{font-size:1rem;color:var(--petroleo);max-width:42ch;opacity:.86}
.puerta .fl{font-family:'Bricolage',sans-serif;font-size:1.5rem;color:var(--terracota);
  justify-self:end;transition:transform .3s var(--e)}
.puerta:hover .fl{transform:translateX(8px);color:var(--petroleo)}

/* ---------- cifras: una grande y el resto en fila, con hairlines ---------- */
.cifras{display:grid;gap:0;border-top:1px solid var(--linea-osc)}
@media(min-width:820px){.cifras{grid-template-columns:1.5fr 1fr 1fr 1fr}}
.cifra{padding:clamp(22px,2.6vw,32px) clamp(18px,2vw,28px) clamp(22px,2.6vw,32px) 0;
  border-bottom:1px solid var(--linea-osc)}
@media(min-width:820px){
  .cifra{border-bottom:none;border-right:1px solid var(--linea-osc)}
  .cifra:last-child{border-right:none}
  .cifra+.cifra{padding-left:clamp(18px,2vw,28px)}
}
.cifra .n{font-family:'Bricolage',sans-serif;font-weight:800;
  font-size:clamp(2.2rem,4.4vw,3.2rem);line-height:.92;color:var(--salvia);letter-spacing:-.03em}
.cifra:first-child .n{font-size:clamp(3rem,7vw,5.4rem)}
.cifra .d{font-size:.92rem;line-height:1.4;margin-top:14px;max-width:24ch;color:var(--texto-oscuro)}
.cifras.claro{border-top-color:var(--linea)}
.cifras.claro .cifra{border-color:var(--linea)}
.cifras.claro .n{color:var(--terracota)}
.cifras.claro .d{color:var(--petroleo)}

/* ---------- servicios: grilla escalonada, no tres tarjetas iguales ---------- */
.tarjetas{display:grid;gap:clamp(30px,3.4vw,52px)}
@media(min-width:700px){.tarjetas{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1060px){
  .tarjetas{grid-template-columns:repeat(3,1fr)}
  .tarjeta:nth-child(3n+2){margin-top:clamp(30px,4vw,64px)}
  .tarjeta:nth-child(3n+3){margin-top:clamp(14px,2vw,30px)}
}
/* cuatro formatos: dos por fila, con leve desnivel */
.tarjetas.cuatro{grid-template-columns:1fr}
@media(min-width:700px){
  .tarjetas.cuatro{grid-template-columns:repeat(2,1fr)}
  .tarjetas.cuatro .tarjeta{margin-top:0}
  .tarjetas.cuatro .tarjeta:nth-child(even){margin-top:clamp(18px,2.6vw,44px)}
}
.tarjetas.cuatro .tarjeta img{aspect-ratio:4/3}
.tarjeta{position:relative}
.tarjeta .marco{overflow:hidden;border-radius:22px 26px 18px 24px}
.tarjeta img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .7s var(--e)}
.tarjeta:nth-child(3n+2) img{aspect-ratio:3/4}
.tarjeta:nth-child(3n+3) img{aspect-ratio:1/1}
.tarjeta:hover img{transform:scale(1.035)}
.tarjeta h3{margin:22px 0 9px}
.tarjeta p{font-size:.98rem;max-width:36ch;opacity:.88}
.tarjeta .precio{margin-top:16px;font-weight:600;color:var(--terracota);font-size:1rem}
.tarjeta .min{font-size:.86rem;opacity:.72;margin-top:3px}

/* ---------- notas y cajas ---------- */
.nota{border-left:2px solid var(--terracota);padding:4px 0 4px 24px;margin-block:32px;max-width:62ch}
.nota .rot{margin-bottom:9px}
.dark .nota{border-left-color:var(--salvia)}
.caja{background:var(--salvia);padding:clamp(26px,3vw,38px);margin-block:36px;max-width:66ch;
  border-radius:20px 26px 18px 24px}
.caja .rot{color:var(--petroleo);margin-bottom:12px}
.caja p,.caja li{color:var(--petroleo);max-width:none}
.caja p+p{margin-top:13px}
.caja a:not(.btn){color:var(--petroleo);text-decoration:underline}
.caja a:not(.btn):hover{color:var(--terracota)}
.dark .caja{background:#2C4A4B}
.dark .caja .rot{color:var(--salvia)}
.dark .caja p,.dark .caja li{color:var(--texto-oscuro)}
.dark .caja a:not(.btn){color:var(--salvia)}
.cita{background:#fff;border-left:3px solid var(--terracota);padding:28px 30px;margin-block:32px;max-width:66ch}

/* ---------- pasos ----------
   Reunión 21-08: los pasos van sin números a la vista; en su lugar,
   una semilla orgánica. El orden lo da la lectura. */
.pasos{margin-top:8px;max-width:80ch;border-top:1px solid var(--linea)}
.dark .pasos{border-top-color:var(--linea-osc)}
.paso{display:grid;grid-template-columns:26px 1fr;gap:5px 16px;padding:22px 0;border-bottom:1px solid var(--linea)}
.dark .paso{border-bottom-color:var(--linea-osc)}
.paso .num{font-size:0;line-height:0;width:15px;height:15px;margin-top:7px;
  background:var(--terracota);border-radius:58% 42% 55% 45%/50% 58% 42% 50%}
.dark .paso .num{background:var(--salvia)}
.paso .t{font-family:'Bricolage',sans-serif;font-weight:800;font-size:1.08rem;line-height:1.2;color:var(--petroleo)}
.dark .paso .t{color:var(--crema)}
.paso .c{grid-column:2;font-size:.98rem;line-height:1.48;opacity:.9}
.dark .paso .c{color:var(--texto-oscuro)}

/* ---------- listas ---------- */
ul.marca{list-style:none;margin-top:20px;max-width:62ch}
ul.marca li{position:relative;padding-left:22px;margin-bottom:12px}
ul.marca li::before{content:"";position:absolute;left:0;top:.66em;width:9px;height:2px;background:var(--terracota)}
.dark ul.marca li::before{background:var(--salvia)}

/* ---------- tablas ---------- */
.tabla-env{overflow-x:auto;margin-block:30px}
table{border-collapse:collapse;width:100%;min-width:460px;font-size:.98rem}
th{background:transparent;color:var(--terracota);text-align:left;padding:0 16px 12px 0;
  font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;border-bottom:1px solid var(--linea)}
.dark th{color:var(--salvia);border-bottom-color:var(--linea-osc)}
td{padding:16px 16px 16px 0;border-bottom:1px solid var(--linea);vertical-align:top}
.dark td{border-bottom-color:var(--linea-osc);color:var(--texto-oscuro)}
td.k{font-weight:600;color:var(--petroleo)}
.dark td.k{color:var(--crema)}

/* ---------- acordeón del centro de respuestas ----------
   Reunión 21-08: la respuesta abierta se marca sola (recuadro con
   fondo y color), con más aire, y separada de la pregunta siguiente. */
.faq{border-top:1px solid var(--linea);margin-top:6px}
.dark .faq{border-top-color:var(--linea-osc)}
.faq details{border-bottom:1px solid var(--linea)}
.dark .faq details{border-bottom-color:var(--linea-osc)}
.faq details[open]{
  background:#fff;border:1.5px solid var(--linea);
  border-radius:20px 26px 18px 24px;
  padding-inline:clamp(18px,3vw,34px);
  margin-block:16px 22px;
  box-shadow:0 18px 44px rgba(31,58,61,.09);
}
.faq details[open] summary{color:var(--terracota)}
.faq details[open] .cuerpo{padding-right:0}
.faq summary{
  cursor:pointer;list-style:none;display:block;position:relative;
  padding:clamp(20px,2.5vw,28px) 56px clamp(20px,2.5vw,28px) 0;
  font-family:'Bricolage',sans-serif;font-weight:800;
  font-size:clamp(1.05rem,2vw,1.5rem);line-height:1.18;letter-spacing:-.018em;color:var(--petroleo);
  transition:color .2s var(--e);
}
.dark .faq summary{color:var(--crema)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::marker{content:""}
.faq summary:hover{color:var(--terracota)}
.dark .faq summary:hover{color:var(--salvia)}
.faq summary::before,.faq summary::after{
  content:"";position:absolute;right:10px;top:calc(50% - 1px);
  width:20px;height:2px;background:var(--terracota);transition:transform .32s var(--e),opacity .32s var(--e)}
.dark .faq summary::before,.dark .faq summary::after{background:var(--salvia)}
.faq summary::after{transform:rotate(90deg)}
.faq details[open] summary::after{transform:rotate(0deg);opacity:0}
.faq .cuerpo{padding:0 clamp(0px,6vw,90px) clamp(26px,3vw,34px) 0}
.faq .cuerpo p{font-size:1.02rem;line-height:1.55;max-width:60ch}
.faq .cuerpo h2{font-size:clamp(1.12rem,1.9vw,1.42rem);line-height:1.2;margin:28px 0 10px}
.faq .cuerpo h3{font-size:1.05rem;margin:20px 0 8px}
/* la respuesta corta: el recuadro verde acompaña todo el ancho y respira */
.faq .corta{margin:4px 0 22px;border-radius:16px 20px 14px 18px;max-width:none}
.faq .corta p{max-width:66ch}
/* "Más información": el detalle largo se abre solo si se quiere leer */
.faq .mas{margin:0 0 24px;border:none}
/* el desplegable interno no repite la tarjeta blanca del exterior */
.faq .mas[open]{background:transparent;border:none;box-shadow:none;
  border-radius:0;padding-inline:0;margin-block:0 26px}
.faq .mas>summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:9px;
  font-family:'Inter',sans-serif;font-weight:600;font-size:.95rem;letter-spacing:0;
  color:var(--terracota);padding:2px 0;position:static}
.faq .mas>summary::-webkit-details-marker{display:none}
.faq .mas>summary::marker{content:""}
.faq .mas>summary::before{content:none}
.faq .mas>summary .txt{border-bottom:1.5px solid var(--terracota);padding-bottom:2px}
.faq .mas>summary::after{content:"+";position:static;width:auto;height:auto;background:none;
  transform:none;font-family:'Bricolage',sans-serif;font-weight:800;font-size:1.15rem;line-height:1;
  color:var(--terracota)}
.faq .mas[open]>summary::after{content:"–";transform:none;opacity:1}
.faq .mas>.mas-cuerpo{margin-top:16px;padding-left:clamp(0px,1.6vw,18px)}
/* (la regla del antiguo enlace "leer más" se retiró: ahora .mas es el
   desplegable interno de cada respuesta) */
.faq .cuerpo .mas{display:block;border-bottom:none;padding-bottom:0}
.faq .g{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--terracota);
  font-weight:600;display:block;margin-bottom:9px;opacity:.85}
.dark .faq .g{color:var(--salvia)}
.faq details:target summary{color:var(--terracota)}
/* Apertura suave donde el navegador la soporte. Si no, abre igual, sin animación. */
@supports (interpolate-size: allow-keywords){
  @media(prefers-reduced-motion:no-preference){
    .faq details{interpolate-size:allow-keywords}
    .faq details::details-content{
      block-size:0;opacity:0;overflow:clip;
      transition:content-visibility .38s allow-discrete,opacity .34s var(--e),block-size .38s var(--e)}
    .faq details[open]::details-content{block-size:auto;opacity:1}
  }
}

/* ---------- artículos ---------- */
.articulo{max-width:66ch}
.articulo h2{font-size:clamp(1.4rem,2.6vw,2rem);margin-top:48px;margin-bottom:16px}
.articulo h3{margin-top:32px;margin-bottom:10px;color:var(--terracota)}
.articulo p+p{margin-top:16px}
.corta{background:var(--salvia);padding:clamp(24px,2.8vw,32px);font-size:1.1rem;line-height:1.5;margin-block:30px;
  border-radius:16px 20px 14px 18px}
.corta p{max-width:none}
.migas{font-size:.86rem;margin-bottom:22px}
.fuente{font-size:.86rem;opacity:.78;margin-top:38px;border-top:1px solid var(--linea);padding-top:16px}

/* ---------- calculadora ---------- */
.calc{border:2px solid var(--petroleo);padding:clamp(24px,3.4vw,44px);margin-top:40px;border-radius:22px 26px 20px 24px}
.calc-campos{display:grid;gap:24px}
@media(min-width:720px){.calc-campos{grid-template-columns:1fr 1fr}}
label{display:block;font-weight:600;font-size:.98rem;margin-bottom:8px}
.ayuda{font-size:.86rem;opacity:.76;font-weight:400;display:block;margin-top:4px}
input[type=number],input[type=text],input[type=email],input[type=tel],input[type=date],input[type=time],select,textarea{
  width:100%;font-family:inherit;font-size:1.05rem;padding:14px 17px;
  border:1.5px solid var(--petroleo);background:#fff;color:var(--petroleo);border-radius:14px}
textarea{min-height:130px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:3px solid var(--terracota);outline-offset:1px}
.resultado{margin-top:38px;border-top:2px solid var(--petroleo);padding-top:32px;scroll-margin-top:100px}
.resultado[hidden]{display:none}
.destacado{background:var(--petroleo);color:var(--crema);padding:clamp(26px,3.4vw,42px);margin-bottom:8px;
  border-radius:18px 22px 16px 20px}
.destacado .et{font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--salvia);font-weight:600}
.destacado .grande{font-family:'Bricolage',sans-serif;font-weight:800;
  font-size:clamp(2.6rem,7.4vw,4.6rem);line-height:.96;color:var(--crema);margin-top:14px;letter-spacing:-.032em}
.destacado .sub{color:var(--texto-oscuro);margin-top:14px;font-size:1.02rem;max-width:50ch}
.parcial{display:grid;gap:8px;grid-template-columns:1fr}
@media(min-width:680px){.parcial{grid-template-columns:1fr 1fr}}
.parcial .celda{background:var(--salvia);padding:24px 26px;border-radius:16px 20px 14px 18px}
.parcial .celda .et{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--petroleo);opacity:.8}
.parcial .celda .v{font-family:'Bricolage',sans-serif;font-weight:800;font-size:1.75rem;margin-top:9px;color:var(--petroleo);letter-spacing:-.02em}
.parcial .celda .n{font-size:.9rem;margin-top:7px;line-height:1.42}
.equivale{background:#fff;border-left:3px solid var(--terracota);padding:26px 28px;margin-top:2px}
.equivale .et{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--terracota)}
.equivale p{margin-top:11px}
.aviso{font-size:.88rem;opacity:.8;margin-top:22px;max-width:66ch}
.error{color:#8C2D18;font-weight:600;margin-top:15px}

/* ---------- formularios ---------- */
.form{max-width:640px;margin-top:36px}
.campo{margin-bottom:24px}
.dark label{color:var(--crema)}
.dark .ayuda{color:var(--texto-oscuro)}
.legal{font-size:.86rem;opacity:.78;margin-top:18px;max-width:58ch}
.doble{display:grid;gap:24px}
@media(min-width:640px){.doble{grid-template-columns:1fr 1fr}}

/* ---------- bandas de foto ---------- */
.banda{padding-block:0}
.banda img{width:100%;aspect-ratio:21/8;object-fit:cover}
@media(max-width:700px){.banda img{aspect-ratio:3/2}}
.dos-col{display:grid;gap:clamp(32px,4.4vw,64px);align-items:center}
@media(min-width:900px){
  .dos-col{grid-template-columns:1fr 1fr}
  .dos-col.ancha-izq{grid-template-columns:1.18fr .82fr}
  .dos-col.ancha-der{grid-template-columns:.82fr 1.18fr}
}
.dos-col img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:24px 30px 20px 26px}
.dos-col img.alta{aspect-ratio:3/4}

/* ---------- cierre ---------- */
.cierre{color:var(--crema);padding-block:var(--gap);background:var(--terracota)}
.cierre h2{color:var(--crema);max-width:16ch}
.cierre p{color:#F6EAE3;margin-top:20px}
.cierre .btn{background:var(--crema);color:var(--terracota-hondo);border-color:var(--crema)}
.cierre .btn:hover{background:var(--petroleo);border-color:var(--petroleo);color:var(--crema)}
.cierre .btn.linea{background:transparent;color:var(--crema);border-color:var(--crema)}
.cierre .btn.linea:hover{background:var(--crema);color:var(--terracota-hondo)}

/* ---------- pie ----------
   El padding inferior grande deja libre la esquina del botón de
   WhatsApp: antes tapaba los enlaces legales. */
.pie{color:var(--texto-oscuro);padding-block:64px 118px;font-size:.94rem;background:var(--petroleo-hondo)}
.pie a{color:var(--texto-oscuro);text-decoration:none}
.pie a:hover{color:var(--salvia)}
.pie-grid{display:grid;gap:38px}
@media(min-width:820px){.pie-grid{grid-template-columns:1.5fr 1fr 1fr 1fr}}
.pie h4{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--salvia);font-weight:600;margin-bottom:16px;font-family:'Inter',sans-serif}
.pie ul{list-style:none}
.pie li{margin-bottom:10px}
.pie img.marca{width:168px;margin-bottom:20px}
.pie .lema{font-family:'Bricolage',sans-serif;font-weight:800;color:var(--salvia);font-size:1.2rem;margin-top:22px;letter-spacing:-.015em}
.pie-fin{border-top:1px solid var(--linea-osc);margin-top:48px;padding-top:24px;
  display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;font-size:.85rem;opacity:.78}

/* ---------- whatsapp ---------- */
.wa{position:fixed;right:18px;bottom:18px;z-index:70;background:var(--terracota);color:var(--crema);
  text-decoration:none;font-weight:600;font-size:.93rem;padding:14px 22px;border:2px solid var(--crema);
  border-radius:999px;
  opacity:0;pointer-events:none;transform:translateY(12px);
  transition:background .22s var(--e),opacity .3s var(--e),transform .3s var(--e)}
.wa.on{opacity:1;pointer-events:auto;transform:none}
.wa:hover{background:var(--petroleo);color:var(--crema)}
.sin-js .wa{opacity:1;pointer-events:auto;transform:none}

/* =========================================================
   MOVIMIENTO
   Revelado único por elemento. 420 ms, 26 px, sin repetición.
   Se apaga solo con prefers-reduced-motion.
   ========================================================= */
@media(prefers-reduced-motion:no-preference){
  .rv{opacity:0;transform:translateY(26px);
      transition:opacity .42s var(--e),transform .42s var(--e)}
  .rv.visible{opacity:1;transform:none}
  .rv[data-esp="1"]{transition-delay:.06s}
  .rv[data-esp="2"]{transition-delay:.12s}
  .rv[data-esp="3"]{transition-delay:.18s}
  .rv[data-esp="4"]{transition-delay:.24s}
}
.sin-js .rv{opacity:1;transform:none}

/* =========================================================
   MODO BORRADOR · marca los datos inventados
   Para apagarlo: quitar class="borrador" del <body>
   ========================================================= */
.borrador .ph{background:#FBE9A0;box-shadow:0 0 0 3px #FBE9A0;color:#3B2E00}
.borrador .ph a{color:#6B4B00}
.aviso-borrador{position:fixed;left:0;right:0;bottom:0;z-index:90;background:#3B2E00;color:#FBE9A0;
  font-size:.8rem;padding:9px 16px;text-align:center;letter-spacing:.03em}
body:not(.borrador) .aviso-borrador{display:none}
.borrador .wa{bottom:52px}

@media print{.cab,.wa,.aviso-borrador,.cierre{display:none}.rv{opacity:1;transform:none}}

/* Descargo legal: visible, no letra chica escondida */
.descargo{color:var(--tenue,rgba(31,58,61,.72));font-size:.92rem;line-height:1.6;max-width:74ch;
  border-left:3px solid rgba(31,58,61,.24);padding-left:16px;margin-top:clamp(26px,3.4vw,40px)}
.dark .descargo,.hondo .descargo{color:rgba(228,232,214,.78);border-left-color:rgba(228,232,214,.3)}


/* Los índices de sección envuelven en pantallas chicas en vez de desbordar */
@media(max-width:640px){
  .reg{flex-wrap:wrap;row-gap:4px}
  .reg .idx{white-space:normal;text-align:left}
}


/* Encabezado compacto de la página de respuestas: el título ocupaba una
   pantalla entera y dejaba una sola pregunta a la vista. Así la lista de
   las trece se ve casi completa al llegar. */
.cabe-lista{max-width:56ch}
.cabe-lista h1{font-size:clamp(1.9rem,4vw,2.9rem);line-height:1.08}
.cabe-lista .bajada{margin-top:12px;font-size:1rem}
/* la sección de la lista arranca más arriba y respira menos entre grupos,
   para que se vean varias preguntas de una sin hacer scroll */
section:has(.cabe-lista){padding-top:clamp(18px,2.4vw,30px)}
section:has(.cabe-lista) .reg{padding-top:14px}

/* Aviso de texto legal pendiente de revisión del abogado. Es independiente
   del modo borrador: se quita a mano cuando el abogado devuelva el texto. */
.caja.pendiente{background:#FBE9A0;color:#3B2E00;border:none}
.caja.pendiente .rot{color:#6B4B00}

/* Dos entradas en la portada: quien busca catering y quien busca cumplir la
   ley llegan por caminos distintos y necesitan ver el suyo de inmediato. */
.dos-puertas{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:clamp(22px,3vw,32px);max-width:920px}
@media (max-width:720px){.dos-puertas{grid-template-columns:1fr}}
.puerta{display:flex;flex-direction:column;gap:6px;padding:24px;border-radius:20px 26px 16px 22px;
  background:rgba(243,237,231,.94);border:2px solid transparent;text-decoration:none;color:var(--petroleo);
  transition:transform .08s ease,border-color .12s ease}
.puerta:hover{border-color:var(--terracota);transform:translateY(-2px)}
.puerta .et{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--terracota)}
.puerta .t{font-family:var(--titulo,'Bricolage',sans-serif);font-weight:800;font-size:1.35rem;line-height:1.1}
.puerta .c{font-size:.9rem;color:var(--tenue);flex:1}
.puerta .ir{font-weight:700;font-size:.92rem;color:var(--terracota);margin-top:4px}
.puerta.destacada{background:var(--petroleo);color:var(--crema)}
.puerta.destacada .t{color:var(--blanco)}
.puerta.destacada .c{color:rgba(243,237,231,.8)}
.puerta.destacada .et,.puerta.destacada .ir{color:#F0B090}

/* Servicio anunciado pero todavía no disponible */
.pronto{display:inline-block;vertical-align:3px;margin-left:8px;font-family:var(--cuerpo,inherit);
  font-size:.62rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  background:var(--crema);color:var(--terracota);border:1px solid var(--terracota);
  border-radius:99px;padding:3px 9px}

/* La multa, destacada igual que el contrato, y la invitación a cotizar */
.resultado .destacado.multa{margin-top:14px;background:var(--crema);border:2px solid var(--terracota)}
.resultado .destacado.multa .grande{color:var(--terracota)}
/* el destacado normal va sobre petróleo; sobre crema hay que recuperar el contraste */
.resultado .destacado.multa .et{color:var(--terracota)}
.resultado .destacado.multa .sub{color:var(--petroleo)}
.caja.invita{margin-top:14px}
.caja.invita .botonera{margin-top:14px}

/* Cierre de cada respuesta: la página informa, pero también tiene que
   mostrar cómo Gustito resuelve ese caso concreto. */
.cierre-resp{margin-top:26px;padding:20px 22px;background:var(--crema);border-left:4px solid var(--terracota);border-radius:6px 18px 16px 12px}
.cierre-resp .rot{display:block;color:var(--terracota);margin-bottom:6px}
.cierre-resp p{margin:0 0 14px;font-size:.94rem}


/* ── Landings internas: hero más bajo para que se vea lo que sigue ── */
.hero.baja{min-height:min(58vh,540px)}
.hero.baja h1{font-size:clamp(2.3rem,5.4vw,4.3rem)}
.hero.baja .env{padding-block:clamp(52px,9vh,96px) clamp(34px,5.5vh,58px)}
.hero.baja .bajada{margin-top:clamp(16px,2.4vh,26px)}

/* ── Los dos caminos: la comparación se lee en dos tarjetas, no en párrafos ── */
.vs{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:clamp(24px,3.2vw,40px)}
@media (max-width:720px){.vs{grid-template-columns:1fr}}
.vs .lado{background:var(--petroleo-hondo);padding:clamp(22px,3vw,36px);border-radius:16px;
  border:1px solid rgba(238,228,219,.12)}
.vs .lado .titulo{font-family:'Bricolage',sans-serif;font-weight:800;color:var(--crema);
  font-size:clamp(1.5rem,3vw,2.2rem);line-height:1.05;letter-spacing:-.02em}
.vs .lado .pre{margin-top:18px;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--texto-oscuro);font-weight:600}
.vs .lado .num{font-family:'Bricolage',sans-serif;font-weight:800;color:var(--salvia);
  font-size:clamp(2rem,4.2vw,3.2rem);line-height:1;letter-spacing:-.02em;margin-top:4px}
.vs .lado .pos{margin-top:6px;font-size:.9rem;color:var(--texto-oscuro)}
.vs .lado p{color:var(--texto-oscuro);margin-top:14px;font-size:.93rem;max-width:40ch;
  padding-top:14px;border-top:1px solid rgba(238,228,219,.14)}
.vs .lado.malo{border-color:rgba(192,90,42,.5)}
.vs .lado.malo .num{color:#E8A18B}
.botonera.centrada{justify-content:center}

/* lista con visto: información escaneable, no párrafos */
.lista-check{list-style:none;margin:18px 0 0;padding:0}
.lista-check li{position:relative;padding-left:30px;margin-bottom:12px;color:var(--texto-oscuro);font-size:.95rem}
.lista-check li::before{content:"✓";position:absolute;left:0;top:-1px;
  font-weight:800;color:var(--salvia);font-size:1.05rem}

/* ── La calculadora, enmarcada como protagonista ── */
.marco-calc{background:#fff;border:3px solid var(--petroleo);border-radius:18px;
  padding:clamp(18px,3vw,36px);margin-top:clamp(24px,3.2vw,40px);
  box-shadow:0 22px 60px rgba(31,58,61,.12)}
/* adentro del marco, el formulario no repite su propia caja */
.marco-calc .calc{border:0;padding:0;margin-top:0}

/* ── Bloque centrado (las trece preguntas, en grande) ── */
.centrado{max-width:780px;margin-inline:auto;text-align:center}
.centrado .rot{display:block;margin-bottom:14px}
.centrado h2{font-size:clamp(2.1rem,5vw,3.6rem)}
.centrado .bajada{max-width:52ch}
.centrado .botonera{justify-content:center}

/* descargo legal: una sola vez por página, al final y discreto */
.descargo-fin{padding:10px 0 34px;margin:0;font-size:.76rem;color:var(--tenue,rgba(31,58,61,.6));
  text-align:center;max-width:none}

/* frase que antecede a los botones: anclada al llamado, no flotando */
.pre-cta{margin-top:clamp(26px,3.4vw,42px);font-weight:600;font-size:1.05rem;max-width:48ch}
.pre-cta + .botonera{margin-top:16px}




/* =========================================================
   FOTOS Y VIDEOS DE LA SESIÓN · agosto 2026
   Video de fondo en el hero y en la banda de formatos, fotos
   de fondo con opacidad baja, retratos del equipo y galería.
   ========================================================= */

/* video de fondo del hero (portada) */
.hero-bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 42%}
@media(max-width:760px){.hero-bg video{object-position:55% 55%}}
/* con video, el velo se aclara arriba para que el video se vea;
   abajo sigue oscuro porque ahí vive el texto */
.hero.con-video .hero-bg::after{background:linear-gradient(178deg,rgba(22,41,43,.4) 0%,rgba(22,41,43,.56) 46%,rgba(22,41,43,.92) 100%)}

/* banda con video de fondo (título "Los formatos") */
.banda-video{overflow:hidden;padding-block:clamp(72px,10vw,150px)}
.banda-video .v-bg{position:absolute;inset:0;z-index:-2;pointer-events:none}
.banda-video .v-bg img,.banda-video .v-bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(1.14)}
.banda-video .v-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(22,41,43,.55),rgba(22,41,43,.38) 50%,rgba(22,41,43,.55))}
.banda-video .centrado{text-shadow:0 1px 22px rgba(22,41,43,.55)}

/* foto de fondo con opacidad baja: el color de la sección se mantiene
   y la foto queda como textura viva detrás del texto */
.fondo-foto{position:absolute;inset:0;z-index:-2;overflow:hidden;pointer-events:none}
.fondo-foto img{width:100%;height:100%;object-fit:cover;opacity:var(--fo,.15)}
.cierre .fondo-foto img{opacity:var(--fo,.18)}

/* retratos del equipo */
.equipo-grid{display:grid;gap:clamp(18px,2.6vw,32px);grid-template-columns:1fr 1fr;margin-top:clamp(28px,3.6vw,48px)}
@media(min-width:900px){.equipo-grid{grid-template-columns:repeat(4,1fr)}}
.equipo-grid figure{margin:0}
.equipo-grid img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:20px 24px 16px 22px}
.equipo-grid figcaption{margin-top:12px;line-height:1.35}
.equipo-grid .nom{font-family:'Bricolage',sans-serif;font-weight:800;font-size:1.12rem;color:var(--petroleo);display:block}
.equipo-grid .rol{font-size:.85rem;color:rgba(31,58,61,.68)}

/* las dos duplas de hermanos (Nosotros) */
.duplas{display:grid;gap:clamp(18px,2.8vw,36px);grid-template-columns:1fr 1fr;margin-top:clamp(28px,3.6vw,48px);max-width:940px}
@media(max-width:700px){.duplas{grid-template-columns:1fr}}
.duplas figure{margin:0}
.duplas img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:22px 26px 18px 24px}
.duplas figcaption{margin-top:11px;font-size:.94rem;color:rgba(31,58,61,.75)}

/* mini galería de servicios */
.galeria{display:grid;gap:clamp(12px,1.6vw,20px);grid-template-columns:repeat(3,1fr);margin-top:clamp(26px,3.4vw,44px)}
@media(max-width:700px){.galeria{grid-template-columns:1fr}}
.galeria img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:18px 22px 16px 20px}

/* foto integrada en una sección de texto (p. ej. junto al título de los pasos) */
.foto-suelta{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:24px 30px 20px 26px}

/* figura con leyenda (centro de respuestas) */
.figura-ley{margin:clamp(26px,3.4vw,44px) 0 0;max-width:660px}
.figura-ley img{width:100%;border-radius:20px 26px 18px 24px}
.figura-ley figcaption{margin-top:10px;font-size:.9rem;color:rgba(31,58,61,.72)}

video{max-width:100%}
/* con movimiento reducido, el video se esconde y queda la foto de respaldo */
@media(prefers-reduced-motion:reduce){.hero-bg video,.banda-video video{display:none}}

/* =========================================================
   CELULAR · revisión del 23-08-2026
   Tres cosas se arreglan acá, en este orden:
   1. Las fotos y los videos ahora tienen su propia banda visible
      arriba del titular. Antes ocupaban todo el fondo del hero y,
      como la pantalla es angosta y alta, de un video horizontal solo
      se veía una tira del centro tapada por el texto y el velo.
   2. La tipografía baja de escala. El titular de 43 px contra un
      cuerpo de 15 px hacía que todo lo demás se viera apretado.
   3. Menos aire perdido y bloques más cortos, para que la página
      no se sienta interminable al bajar con el pulgar.
   ========================================================= */
@media (max-width:720px){

  :root{--gap:clamp(46px,9.5vw,66px)}
  body{font-size:1rem;line-height:1.58}
  .env{width:min(100% - 42px,var(--ancho))}

  /* ---- cabecera más liviana ---- */
  .cab-in{padding-block:11px;gap:14px}
  .cab a.marca img{width:116px}
  .hamb{padding:8px 14px;font-size:.75rem;letter-spacing:.06em}
  @media(max-width:1039px){.nav{inset:56px 0 auto 0}}

  /* ---- escala tipográfica ---- */
  h1{font-size:clamp(1.95rem,7.4vw,2.5rem)}
  h2{font-size:clamp(1.55rem,6.2vw,2.05rem)}
  h3{font-size:1.08rem}
  .bajada{font-size:1rem;line-height:1.5}
  .rot{font-size:.68rem;letter-spacing:.16em}
  .reg{margin-bottom:22px;padding-top:15px}
  .reg .idx{font-size:.68rem}
  .btn{padding:14px 22px;font-size:.92rem}
  .btn.chico{padding:11px 16px;font-size:.84rem}
  .botonera{gap:10px;margin-top:26px}
  .desfase h2::after,.desfase h1::after,.dos-col h2::after,
  .centrado h2::after,.cierre h2::after{width:62px;height:11px;margin-top:12px}

  /* ---- EL HERO: la foto o el video se ven de verdad ----
     La imagen deja de cubrir todo el bloque y pasa a ocupar una banda
     propia arriba, con una relación de lados parecida a la del material
     original: así se ve casi el cuadro completo en vez de una tira.
     El velo se aclara donde está la imagen y se funde con el petróleo
     justo donde empieza el texto. */
  .hero{min-height:auto;--banda:min(46vh,320px)}
  .hero.baja{min-height:auto;--banda:min(41vh,278px)}
  .hero-bg{inset:0 0 auto 0;height:var(--banda)}
  .hero-bg img,.hero-bg video{height:100%;object-position:50% 42%}
  .hero-bg::after{background:linear-gradient(180deg,
      rgba(22,41,43,.34) 0%,
      rgba(22,41,43,.12) 40%,
      rgba(22,41,43,.58) 80%,
      #1F3A3D 100%)}
  .hero.con-video .hero-bg::after{background:linear-gradient(180deg,
      rgba(22,41,43,.28) 0%,
      rgba(22,41,43,.08) 42%,
      rgba(22,41,43,.55) 82%,
      #1F3A3D 100%)}
  .hero .env{padding-block:calc(var(--banda) - 16px) 32px}
  .hero.baja .env{padding-block:calc(var(--banda) - 14px) 30px}
  .hero .rot{margin-bottom:14px}
  .hero h1{font-size:clamp(2rem,8.4vw,2.65rem);line-height:1.02;max-width:none}
  .hero.baja h1{font-size:clamp(1.8rem,7.4vw,2.3rem)}
  .hero .marca-linea{margin-top:18px}
  .hero .frase-marca{font-size:1.05rem;line-height:1.5;border-radius:11px 14px 8px 12px}
  .hero .bajada{margin-top:14px;font-size:.95rem}
  .hero .marca-linea+.bajada{font-size:.92rem;margin-top:12px}

  /* las dos puertas: más compactas y separadas del fondo del hero */
  .dos-puertas{gap:10px;margin-top:24px}
  .puerta{padding:17px 16px;gap:4px;border-radius:16px 20px 13px 18px}
  .puerta .et{font-size:.66rem}
  .puerta .t{font-size:1.1rem;line-height:1.18}
  .puerta .c{font-size:.86rem;line-height:1.45}
  .puerta .ir{font-size:.86rem}
  .puerta.destacada{background:var(--petroleo-hondo);
    border-color:rgba(205,212,177,.28)}

  /* ---- la banda con video de fondo ----
     En pantalla angosta el texto caía sobre la parte más cargada del
     video. Se oscurece un punto más y se acorta la medida de línea. */
  .banda-video{padding-block:clamp(54px,13vw,74px)}
  .banda-video .v-bg::after{background:linear-gradient(180deg,
      rgba(22,41,43,.68),rgba(22,41,43,.56) 50%,rgba(22,41,43,.72))}
  .banda-video .centrado{max-width:23rem;margin-inline:auto}
  .banda-video h2{font-size:clamp(1.7rem,7vw,2.2rem)}
  .banda-video .bajada{font-size:.95rem}

  /* ---- fotos de fondo de sección ----
     Al 15 % se veían como una mancha. Ahora entran con más cuerpo por
     arriba y se desvanecen antes de llegar al texto. */
  .fondo-foto img{opacity:.3;
    -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 34%,transparent 82%);
    mask-image:linear-gradient(180deg,#000 0%,#000 34%,transparent 82%)}
  .cierre .fondo-foto img{opacity:.2;
    -webkit-mask-image:none;mask-image:none}

  /* ---- fotos del cuerpo: proporciones parejas y menos altas ---- */
  .tarjetas{gap:26px}
  .tarjeta img,
  .tarjeta:nth-child(3n+2) img,
  .tarjeta:nth-child(3n+3) img{aspect-ratio:3/2}
  .tarjeta h3{margin:16px 0 7px}
  .tarjeta p{font-size:.94rem}
  .dos-col{gap:26px}
  .dos-col img{aspect-ratio:3/2}
  .dos-col img.alta{aspect-ratio:4/5}
  .banda img{aspect-ratio:5/3}

  /* la galería se arma como mosaico en vez de tres fotos apiladas */
  .galeria{grid-template-columns:1fr 1fr;gap:9px}
  .galeria img{aspect-ratio:1/1}
  .galeria img:first-child{grid-column:1 / -1;aspect-ratio:16/10}

  /* las dos duplas de hermanos se leen como par, lado a lado */
  .duplas{grid-template-columns:1fr 1fr;gap:10px}
  .duplas img{border-radius:16px 20px 13px 18px}
  .duplas figcaption{font-size:.82rem;margin-top:8px;line-height:1.3}

  .equipo-grid{gap:14px}
  .equipo-grid img{border-radius:15px 18px 12px 16px}
  .equipo-grid .nom{font-size:1rem}
  .equipo-grid .rol{font-size:.8rem}
  .equipo-grid figcaption{margin-top:9px}

  .figura-ley figcaption{font-size:.85rem}

  /* ---- bloques de contenido ---- */
  .pasos{margin-top:4px}
  .paso{padding:18px 0;grid-template-columns:22px 1fr;gap:4px 13px}
  .paso .t{font-size:1rem}
  .paso .c{font-size:.92rem}
  .caja,.cita{padding:20px 18px;border-radius:16px 20px 14px 18px}
  .corta{padding:20px 18px;font-size:1rem}
  .nota{padding-left:18px;margin-block:26px}
  .faq summary{padding:18px 46px 18px 0;font-size:1.02rem}
  .faq details[open]{padding-inline:16px;margin-block:12px 18px}
  .faq .cuerpo{padding-bottom:24px}
  .faq .cuerpo p{font-size:.97rem}
  .marco-calc{padding:16px 13px}
  .calc-campos{gap:18px}
  .vs{gap:10px}
  .vs .lado{padding:20px 17px}
  .vs .lado .titulo{font-size:1.35rem}
  .vs .lado .num{font-size:2rem}
  .destacado{padding:24px 20px}
  .destacado .grande{font-size:clamp(2.1rem,9.5vw,2.9rem)}
  .parcial .celda{padding:19px 18px}
  .centrado h2{font-size:clamp(1.6rem,7vw,2.15rem)}
  .pre-cta{font-size:1rem;margin-top:26px}
  .cierre h2{max-width:none}
  .cierre-resp{padding:18px 17px}

  /* ---- pie y flotante ---- */
  .pie{padding-block:52px 104px;font-size:.9rem}
  .pie-grid{gap:30px}
  .pie img.marca{width:140px;margin-bottom:16px}
  .pie-fin{margin-top:34px;padding-top:20px}
  .wa{right:10px;bottom:10px;padding:11px 16px;font-size:.84rem}
  .descargo-fin{font-size:.74rem;padding-bottom:26px}
}

/* Pantallas muy angostas (iPhone SE y similares) */
@media (max-width:380px){
  .env{width:min(100% - 34px,var(--ancho))}
  .hero h1{font-size:1.95rem}
  .hero{--banda:min(42vh,272px)}
  .cab a.marca img{width:106px}
  .duplas,.galeria{grid-template-columns:1fr}
  .galeria img,.galeria img:first-child{aspect-ratio:16/10}
}