/* La web pública de Gregória — «al estilo Szabo con los tonos del salón».
   Aprobada por Roberto el 04/09/2026 («me gusta todo»); el mockup vive en
   docs/mockups/web-completa.html y las decisiones bloque por bloque en la
   memoria del proyecto.

   Tonos: yeso y crema del salón, latón de los apliques, el negro de los arcos
   en vez del vino de Szabo, champagne de la marca sólo para lo que se toca.
   Serif (Instrument Serif, servida local) para lo grande; Satoshi para todo
   lo demás en versalitas espaciadas. El logo es siempre la imagen.

   Esta hoja la comparten la portada y la reserva: la cabecera y el pie son
   los mismos. La reserva trae además reserva.css con su propia voz. */

:root {
  --crema: #F4F0EA;
  --yeso: #EAE4DB;
  --yeso-2: #E0D8CD;
  --blanco: #FBF9F6;
  --negro: #0C0B09;
  --negro-2: #141210;
  --tinta: #171310;
  --laton: #B8955F;
  --champagne: #C9A876;
  --champagne-2: #E2CBA4;
  --gris: #8F8A83;
  --gris-2: #B5AFA7;
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --sans: "Satoshi", -apple-system, system-ui, sans-serif;
  --tr: .14em;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.web {
  margin: 0;
  background: var(--negro);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--laton); outline-offset: 3px; }

.serif { font-family: var(--serif); font-weight: 400; line-height: 1.04; letter-spacing: -.015em; }
.eyebrow { font-size: 10.5px; letter-spacing: var(--tr); text-transform: uppercase; font-weight: 500; }
.small { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; line-height: 1.9; }
.pill {
  display: inline-block; border-radius: 999px; padding: 13px 26px;
  font-size: 11px; letter-spacing: var(--tr); text-transform: uppercase; font-weight: 500;
  border: 1px solid currentColor; transition: background .25s, color .25s;
}
.pill.blanco { background: var(--blanco); color: var(--tinta); border-color: var(--blanco); }
.pill.blanco:hover { background: var(--champagne-2); border-color: var(--champagne-2); }
.pill.laton { border-color: var(--laton); color: var(--tinta); }
.pill.laton:hover { background: var(--champagne); border-color: var(--champagne); }
.link-u { font-size: 11px; letter-spacing: var(--tr); text-transform: uppercase; font-weight: 500; border-bottom: 1px solid currentColor; padding-bottom: 5px; }
.wrap { max-width: 1360px; margin: 0 auto; padding: 0 40px; }
@media (max-width: 760px) { .wrap { padding: 0 20px; } }

/* Todo el contenido va por encima del pie: es el telón que se descubre. */
.pagina { position: relative; z-index: 2; background: var(--crema); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .7); }

/* ── 1 · Cabecera (escritorio: franja de marcas, logo centrado, menú) ──── */
.marcas {
  background: var(--negro); color: var(--gris-2);
  display: flex; justify-content: center; gap: 56px; padding: 11px 20px;
  font-size: 10px; letter-spacing: .24em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden;
}
.marcas b { color: var(--crema); font-weight: 600; }
header.cab { background: var(--crema); border-bottom: 1px solid rgba(23, 19, 16, .08); }
header.cab .top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 22px 0 14px; }
header.cab .logo { height: 40px; width: auto; margin: 0 auto; }
header.cab .ico { display: flex; gap: 22px; align-items: center; }
header.cab .ico.r { justify-content: flex-end; }
header.cab .ico a { display: inline-flex; }
header.cab .ico svg { width: 18px; height: 18px; stroke: var(--tinta); fill: none; stroke-width: 1.5; }
nav.menu { display: flex; justify-content: center; gap: 34px; padding: 8px 0 20px; }
nav.menu a { font-size: 11px; letter-spacing: var(--tr); text-transform: uppercase; font-weight: 500; padding-bottom: 4px; border-bottom: 1px solid transparent; }
nav.menu a.on, nav.menu a:hover { border-bottom-color: var(--laton); }

/* Celular: barra flotante sobre el héroe (sólo en la portada) y barra
   sólida en las demás páginas. */
.mbar { display: none; }
.mbar-solida { display: none; }
@media (max-width: 760px) {
  .marcas, header.cab { display: none; }
  .mbar {
    display: grid; position: absolute; left: 0; right: 0; top: 0; z-index: 5;
    grid-template-columns: 1fr auto 1fr; align-items: center; padding: 16px 18px; color: var(--crema);
  }
  .mbar-solida {
    display: grid; position: static; grid-template-columns: 1fr auto 1fr; align-items: center;
    padding: 16px 18px; color: var(--tinta); background: var(--crema); border-bottom: 1px solid rgba(23, 19, 16, .08);
  }
  .mbar .ham, .mbar-solida .ham { width: 22px; background: none; border: 0; padding: 0; cursor: pointer; color: inherit; }
  .mbar .ham i, .mbar-solida .ham i { display: block; height: 1.5px; background: currentColor; margin: 5px 0; }
  .mbar .logo, .mbar-solida .logo { height: 28px; width: auto; margin: 0 auto; }
  /* El tercer hijo es el <a> de la cuenta: es él quien va a la derecha, no su icono. */
  .mbar > a:last-child, .mbar-solida > a:last-child { justify-self: end; display: inline-flex; }
  .mbar svg, .mbar-solida svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.5; }
}

/* Menú abierto en celular: negro, ítems en serif grande, «Reservar» y la
   dirección al pie. Abre con un checkbox y un label: anda sin JavaScript. */
.menu-m { display: none; }
@media (max-width: 760px) {
  .menu-m-chk:checked ~ .menu-m { display: block; position: fixed; inset: 0; z-index: 20; }
  /* Estilo vidrio, letras chicas y sencillas (Roberto, 27/09). */
  .menu-m .hoja {
    position: absolute; inset: 0; background: rgba(16, 14, 12, .58); color: var(--crema);
    backdrop-filter: blur(22px) saturate(1.15); -webkit-backdrop-filter: blur(22px) saturate(1.15);
    display: flex; flex-direction: column; padding: 18px 22px 30px;
  }
  .menu-m .cerrar { align-self: flex-end; color: var(--crema); font-size: 30px; line-height: 1; cursor: pointer; padding: 4px 6px; }
  .menu-m nav { margin-top: 18px; display: flex; flex-direction: column; }
  .menu-m nav a { font-family: var(--sans); font-size: 19px; font-weight: 400; line-height: 1.2; letter-spacing: .03em; padding: 15px 0;
                  border-bottom: 1px solid rgba(255, 255, 255, .10); }
  /* En el celular esas secciones no existen (la portada es video y pie). */
  .menu-m nav a[href="/#santuario"], .menu-m nav a[href="/#fundador"] { display: none; }
  .menu-m .abajo { margin-top: auto; }
  .menu-m .abajo .pill { display: block; text-align: center; background: var(--champagne); color: var(--negro); border-color: var(--champagne); }
  .menu-m .abajo .dir { margin: 20px 0 0; color: var(--gris-2); }
  body:has(.menu-m-chk:checked) { overflow: hidden; }
}

/* ── 2 · Héroe ─────────────────────────────────────────────────────────── */
.hero {
  position: relative; min-height: 80vh; display: grid; place-items: center; text-align: center;
  color: var(--crema); background: var(--negro) center/cover no-repeat; isolation: isolate;
  background-image: var(--bg);
}
/* En el celular la foto vertical del salón va casi entera. */
@media (max-width: 700px) { .hero { background-image: var(--bg-m, var(--bg)); } }
.hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 18, 16, .38), rgba(20, 18, 16, .58)); z-index: -1; }
.hero .in { padding: 110px 20px 80px; max-width: 900px; }
.hero .eyebrow { color: var(--champagne-2); margin-bottom: 22px; }
.hero h1 { font-size: clamp(42px, 6.2vw, 80px); margin: 0; text-wrap: balance; }
.hero .sub { color: var(--gris-2); margin-top: 20px; }
.hero .pill { margin-top: 34px; }

/* ── 2b · Héroe en el celular: el video y el menú de la web que ya tenían
   (Roberto, 27/09: «para que no cambie tanto», «quiero que sea igual»).
   En escritorio no existe. ── */
.hero-vid, .hero .in-movil { display: none; }
@media (max-width: 700px) {
  .hero { min-height: 100svh; place-items: end stretch; text-align: left; }
  /* El video ya viene en color normal (SDR): el de Wix era HDR y cada
     teléfono lo pintaba distinto. Sin filtros; sólo un velo para leer encima. */
  .hero-vid { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2;
              filter: brightness(.88) saturate(.9); }
  /* El velo que se va a negro hacia abajo (Roberto, 27/09: «así resaltan las letras»). */
  .hero::before { background: linear-gradient(180deg, rgba(0, 0, 0, .28) 0%, rgba(0, 0, 0, .30) 38%, rgba(0, 0, 0, .58) 64%, rgba(0, 0, 0, .90) 100%); }
  /* Sólo el héroe y el pie. */
  .solo-escritorio { display: none; }
  /* La banda negra de arriba con el borde curvo, como en la web que tenían
     (Roberto, 27/09): así el menú y la cuenta no se pierden sobre el video. */
  body:has(.hero .in-movil) .mbar { background: #000; padding: 18px 18px 30px; border-radius: 0 0 50% 50% / 0 0 38px 38px; z-index: 6; }
  body:has(.hero .in-movil) .mbar .ham i { background: #fff; }
  body:has(.hero .in-movil) .mbar svg { stroke: #fff; }
  body:has(.hero .in-movil) .hero .in-movil { padding-top: 96px; }
  .hero .in-escritorio { display: none; }
  .hero .in-movil { display: block; width: 100%; padding: 76px 18px calc(22px + env(safe-area-inset-bottom, 0px)); }
  .hm-logo { display: block; width: 50%; max-width: 200px; height: auto; margin: 0 0 4px -3px; filter: drop-shadow(0 2px 14px rgba(0, 0, 0, .35)); }
  .hm-fila { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
  .hm-t { margin: 0; font-family: var(--sans); font-weight: 700; font-size: clamp(36px, 10.4vw, 44px); line-height: 1.02; letter-spacing: -.01em;
          color: #fff; text-shadow: 0 2px 18px rgba(0, 0, 0, .3); }
  .hm-redes { display: flex; gap: 10px; padding-bottom: 4px; }
  .hm-redes a { display: grid; place-items: center; width: 30px; height: 30px; }
  .hm-redes svg { width: 27px; height: 27px; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .35)); }
  .hm-sub { margin: 8px 0 14px; font-size: 15px; font-weight: 300; color: var(--crema); text-shadow: 0 1px 10px rgba(0, 0, 0, .35); }
  .hm-btn { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 18px;
            border-radius: 999px; font-size: 14.5px; font-weight: 500; text-decoration: none; }
  .hm-btn + .hm-btn { margin-top: 9px; }
  .hm-btn svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
  .hm-btn .chispa { fill: currentColor; stroke: none; width: 18px; height: 18px; }
  .hm-btn.claro { background: linear-gradient(90deg, #EADFC4, #F6F2EA); color: var(--tinta); font-weight: 600; box-shadow: 0 12px 28px -14px rgba(0, 0, 0, .7); }
  .hm-btn.vidrio { background: rgba(244, 240, 234, .18); color: var(--crema); border: 1px solid rgba(244, 240, 234, .28);
                   backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
  /* Los rituales que se abren ahí mismo (opción C, 01/10). Cerrados son el
     botón de vidrio de siempre; abierto, la cabecera clara y la lista. */
  .hm-rit { border-radius: 24px; overflow: hidden; background: rgba(244, 240, 234, .18); border: 1px solid rgba(244, 240, 234, .28);
            backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
  .hm-rit + .hm-rit { margin-top: 9px; }
  .hm-rit[open] { background: rgba(16, 14, 12, .82); border-color: rgba(244, 240, 234, .22); }
  .hm-rit summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px;
                    min-height: 48px; padding: 0 20px; font-size: 14.5px; font-weight: 500; color: var(--crema); cursor: pointer; }
  .hm-rit summary::-webkit-details-marker { display: none; }
  .hm-rit[open] summary { background: linear-gradient(90deg, #EADFC4, #F6F2EA); color: var(--tinta); font-weight: 600; }
  .hm-rit summary:focus-visible, .hm-sv:focus-visible { outline: 2px solid var(--champagne-2); outline-offset: -2px; }
  .hm-mas { position: relative; width: 13px; height: 13px; flex: 0 0 auto; }
  .hm-mas::before, .hm-mas::after { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 1.6px; background: currentColor; border-radius: 2px; }
  .hm-mas::after { transform: rotate(90deg); transition: transform .2s; }
  .hm-rit[open] .hm-mas::after { transform: rotate(0deg); }
  .hm-sv { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; padding: 11px 20px;
           border-top: 1px solid rgba(244, 240, 234, .08); color: var(--crema); text-decoration: none; }
  .hm-sv:hover, .hm-sv:active { background: rgba(244, 240, 234, .06); }
  .hm-sv b { grid-column: 1; grid-row: 1; font-size: 14px; font-weight: 500; }
  .hm-sv small { grid-column: 1; grid-row: 2; font-size: 12px; color: #B9AFA2; }
  .hm-sv em { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-style: normal; font-size: 13.5px; font-weight: 500;
              color: var(--champagne-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .hm-ver { margin-top: 9px; }
  /* El logo grande ya está en el héroe: el de la barra sobra. */
  /* El logo blanco al centro de la banda negra (Roberto, 27/09). */
  body:has(.hero .in-movil) .mbar .logo { visibility: visible; height: 30px; }
}

/* ── 3 · Declaración (yeso) ────────────────────────────────────────────── */
.decl { background: var(--yeso); text-align: center; padding: 96px 20px; }
.decl .eyebrow { color: var(--laton); }
.decl h2 { font-size: clamp(34px, 4.4vw, 56px); max-width: 16ch; margin: 14px auto 0; text-wrap: balance; }
.linea-laton { width: 44px; height: 1px; background: var(--laton); margin: 22px auto; }
.decl .small { color: var(--gris); max-width: 52ch; margin: 0 auto; }

/* ── 4 · Servicios (la cinta) ──────────────────────────────────────────── */
.serv { padding: 80px 0 70px; }
.serv .cab { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: 28px; }
.serv .cab h2 { font-size: clamp(34px, 4vw, 50px); margin: 0; }
.cinta { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 40px 8px; scrollbar-width: none; }
.cinta::-webkit-scrollbar { display: none; }
.cinta .c {
  flex: 0 0 clamp(260px, 30vw, 420px); aspect-ratio: 3 / 4; border-radius: 14px; overflow: hidden;
  position: relative; background: var(--yeso); scroll-snap-align: start; display: block;
}
.cinta .c img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.cinta .c:hover img { transform: scale(1.04); }
.cinta .c .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 60px 22px 22px; background: linear-gradient(180deg, transparent, rgba(20, 18, 16, .55) 35%, rgba(20, 18, 16, .88)); color: var(--crema); }
.cinta .c .cap .serif { font-size: 26px; margin-top: 4px; }
.cinta .c .cap .pr { color: var(--champagne-2); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; margin-top: 4px; }
@media (max-width: 760px) { .cinta { padding: 0 20px 8px; } .cinta .c { flex-basis: 76%; } }

/* ── 5 · La panorámica del salón ───────────────────────────────────────── */
.pano {
  position: relative; aspect-ratio: 21 / 9; display: grid; place-items: center; text-align: center;
  color: var(--crema); background: var(--negro) center/cover no-repeat; isolation: isolate; padding: 40px 20px;
}
.pano::before { content: ""; position: absolute; inset: 0; background: rgba(20, 18, 16, .42); z-index: -1; }
.pano .eyebrow { color: var(--champagne-2); margin-bottom: 14px; }
.pano h2 { font-size: clamp(36px, 5vw, 64px); margin: 0; }
@media (max-width: 760px) { .pano { aspect-ratio: 4 / 5; } }

/* ── 6 · Marcas aliadas (yeso) ─────────────────────────────────────────── */
.aliadas { background: var(--yeso); display: flex; justify-content: center; gap: 64px; align-items: center; flex-wrap: wrap; padding: 38px 20px; }
.aliadas span { font-family: var(--serif); font-size: 26px; letter-spacing: .06em; color: var(--laton); }
.aliadas span b { font-family: var(--sans); font-weight: 600; font-size: 17px; letter-spacing: .24em; }

/* ── 7 · El fundador (crema, retrato en arco negro) ────────────────────── */
.fund { display: grid; grid-template-columns: 1.1fr .9fr; gap: 70px; align-items: center; padding: 96px 0; }
.fund h2 { font-size: clamp(34px, 4.2vw, 54px); margin: 12px 0 0; }
.fund .eyebrow { color: var(--laton); }
.fund p { color: var(--gris); margin: 22px 0 0; max-width: 46ch; }
.fund p b { color: var(--tinta); font-weight: 600; }
.fund .pill { margin-top: 26px; }
.fund .retrato {
  aspect-ratio: 4 / 5; background: var(--negro); border-radius: 999px 999px 14px 14px;
  position: relative; overflow: hidden; display: grid; place-items: end center; color: var(--gris-2); padding-bottom: 26px;
}
.fund .retrato img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fund .retrato::before { content: ""; position: absolute; inset: 9px; border: 1px solid rgba(184, 149, 95, .4); border-radius: 990px 990px 10px 10px; z-index: 1; pointer-events: none; }
.fund .retrato .eyebrow { position: relative; z-index: 1; }
@media (max-width: 860px) { .fund { grid-template-columns: 1fr; gap: 34px; padding: 64px 0; } }

/* ── 8 · Banda de cierre ───────────────────────────────────────────────── */
.banda {
  position: relative; min-height: 460px; display: grid; place-items: center; text-align: center;
  color: var(--crema); background: var(--negro) center/cover no-repeat; isolation: isolate; padding: 80px 20px;
}
.banda::before { content: ""; position: absolute; inset: 0; background: rgba(20, 18, 16, .55); z-index: -1; }
.banda h2 { font-size: clamp(40px, 6vw, 76px); margin: 0; }
.banda .small { color: var(--gris-2); max-width: 54ch; margin: 18px auto 0; }

/* ── 9 · Instagram ─────────────────────────────────────────────────────── */
.ig-sec { padding: 80px 0 90px; text-align: center; }
.ig-sec h2 { font-size: clamp(32px, 4vw, 48px); margin: 0; }
.ig-sec .eyebrow { color: var(--gris); margin-top: 8px; display: inline-block; }
.ig { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 30px; }
.ig a { aspect-ratio: 1; background: var(--yeso); overflow: hidden; display: block; }
.ig a img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.ig a:hover img { transform: scale(1.04); }
@media (max-width: 760px) { .ig { grid-template-columns: repeat(2, 1fr); } }

/* ── 10 · El telón ─────────────────────────────────────────────────────── */
footer.pie {
  position: sticky; bottom: 0; z-index: 1; background: var(--negro); color: var(--crema);
  min-height: 100vh; display: flex; flex-direction: column; overflow: hidden; isolation: isolate;
}
footer.pie::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5; background: radial-gradient(60% 50% at 50% 100%, rgba(201, 168, 118, .22), transparent 70%); }
footer.pie::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .06; mix-blend-mode: screen; background: repeating-linear-gradient(0deg, #fff 0 1px, transparent 1px 3px); }
/* En la reserva el pie no es un telón: cierra la página y ya. */
footer.pie.corto { position: static; min-height: 0; }
.pie .in {
  position: relative; z-index: 1; padding: 64px 48px 0;
  display: grid; grid-template-columns: minmax(300px, 1fr) minmax(0, 1.15fr); gap: 40px; align-items: start;
  flex: 1; max-width: 1360px; width: 100%; margin: 0 auto;
}
.pie .vivo { font-size: 10px; white-space: nowrap; letter-spacing: .2em; text-transform: uppercase; color: var(--champagne); display: flex; align-items: center; gap: 10px; }
.pie .vivo .pto { width: 6px; height: 6px; border-radius: 50%; background: var(--champagne); animation: late 2.4s ease-out infinite; }
@keyframes late { 0% { box-shadow: 0 0 0 0 rgba(201, 168, 118, .55); } 100% { box-shadow: 0 0 0 12px rgba(201, 168, 118, 0); } }
.pie .preg { font-family: var(--serif); font-size: clamp(44px, 6vw, 84px); line-height: .98; letter-spacing: -.025em; margin: 16px 0 0; max-width: 11ch; }
.pie .preg em { font-style: italic; color: var(--champagne); }
.pie .cta {
  margin-top: 28px; white-space: nowrap; display: inline-flex; align-items: center; gap: 14px;
  padding: 18px 30px; border-radius: 999px; border: 1px solid var(--champagne);
  font-size: 11px; letter-spacing: var(--tr); text-transform: uppercase; font-weight: 500; color: var(--crema);
  position: relative; overflow: hidden; cursor: pointer; transition: color .35s;
}
.pie .cta::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, var(--champagne-2), var(--champagne)); transform: scaleX(0); transform-origin: left; transition: transform .45s cubic-bezier(.2, .8, .2, 1); z-index: -1; }
.pie .cta:hover { color: var(--negro); }
.pie .cta:hover::before { transform: scaleX(1); }
.pie .cta .fl { transition: transform .35s; }
.pie .cta:hover .fl { transform: translateX(6px); }
.pie .cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding-top: 10px; min-width: 0; }
.pie .lab { font-size: 9px; letter-spacing: .22em; text-transform: uppercase; font-weight: 600; color: var(--gris); margin-bottom: 10px; }
.pie .col a { display: block; font-size: 11px; letter-spacing: var(--tr); text-transform: uppercase; font-weight: 500; color: var(--crema); margin: 0 0 10px; width: fit-content; max-width: 100%; position: relative; }
.pie .col a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: var(--champagne); transform: scaleX(0); transform-origin: left; transition: transform .3s; }
.pie .col a:hover::after { transform: scaleX(1); }
.pie .col p { margin: 0 0 8px; font-size: 12px; letter-spacing: .03em; line-height: 1.6; color: var(--gris-2); }
.pie .base {
  position: relative; z-index: 1; display: flex; justify-content: space-between; gap: 20px;
  padding: 22px 48px 0; border-top: 1px solid rgba(244, 240, 234, .08);
  font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--gris);
  max-width: 1360px; width: 100%; margin: 0 auto;
}
.pie .base a { border-bottom: 1px solid transparent; }
.pie .base a:hover { border-bottom-color: var(--gris); }
.pie .firma { position: relative; z-index: 1; display: grid; place-items: center; padding: 30px 20px 34px; }
.pie .firma img { height: 36px; width: auto; opacity: .92; filter: brightness(.96) sepia(.08); }
@media (max-width: 760px) {
  footer.pie { min-height: 0; }
  .pie .in { grid-template-columns: 1fr; padding: 44px 20px 0; gap: 30px; }
  .pie .vivo { white-space: normal; }
  .pie .preg { font-size: 44px; }
  .pie .cols { grid-template-columns: 1fr 1fr; gap: 18px; }
  .pie .base { padding: 26px 20px 0; flex-direction: column; gap: 6px; }
  .pie .firma { padding: 24px 20px 28px; }
  .pie .firma img { height: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}