/* =========================================================
   Derivia — landing de producto
   Paleta: la del logo original (src/assets/derivia-logo.png de la
   app), medida sobre el archivo el 2026-09-21: marino #0B1729 /
   #152337, dorado #D7873D → #EFA85C → #FDC170, plata #E2DBD3.
   Tipografía: Playfair Display + DM Sans, las mismas de la app;
   Cinzel solo para la palabra DERIVIA, como en el logo.
   Tono: marino profundo y dorado con brillo, alto contraste.
   Mobile-first.
   ========================================================= */

:root{
  --marino:       #0B1729;
  --marino-2:     #152337;
  --marino-3:     #1E3354;
  --noche:        #060E1A;

  --oro:          #EFA85C;
  --oro-2:        #D7873D;
  --oro-cl:       #FDC170;
  --oro-brillo:   #FFE6B8;
  --oro-tinta:    #A9651F;   /* dorado legible sobre fondo claro */
  --metal:        linear-gradient(100deg, #D7873D 0%, #FDC170 38%, #FFE6B8 50%, #EFA85C 64%, #C9782F 100%);

  --marfil:       #F8F5F0;
  --marfil-2:     #EFE9E0;
  --plata:        #E2DBD3;
  --tinta:        #0F1E33;
  --tinta-suave:  #43546B;
  --filete:       rgba(15,30,51,.13);
  --filete-cl:    rgba(253,193,112,.16);

  --ancho:        1240px;
  --radio:        18px;
  --curva:        cubic-bezier(.2,.7,.2,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:"DM Sans", -apple-system, "Segoe UI", sans-serif;
  font-size:17px;
  line-height:1.65;
  color:var(--tinta);
  background:var(--marfil);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
p{ margin:0 0 1em; }

h1,h2,h3{
  font-family:"Playfair Display", Georgia, serif;
  font-weight:600;
  line-height:1.06;
  letter-spacing:-.015em;
  margin:0;
}
h3{ font-size:1.22rem; line-height:1.25; letter-spacing:0; }
em{ font-style:italic; font-weight:500; color:var(--oro-tinta); }

/* El dorado metálico del logo, aplicado a texto */
.metal, .fondo-oscuro em{
  background:var(--metal); background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
  animation:brillo 9s ease-in-out infinite;
}
@keyframes brillo{ 0%,100%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } }

.saltar{ position:absolute; left:-9999px; top:0; z-index:200; background:var(--oro); color:var(--marino); padding:10px 16px; }
.saltar:focus{ left:0; }
:focus-visible{ outline:2px solid var(--oro); outline-offset:4px; }

.contenedor{ width:100%; max-width:var(--ancho); margin-inline:auto; padding-inline:22px; }
@media (min-width:900px){ .contenedor{ padding-inline:40px; } }

/* ===================== BOTONES ===================== */

.boton{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 28px; border-radius:999px;
  font-weight:700; font-size:.96rem; letter-spacing:.01em;
  text-decoration:none; border:1.5px solid transparent; cursor:pointer;
  transition:transform .35s var(--curva), box-shadow .35s var(--curva), background .3s, color .3s, border-color .3s;
}
.boton span{ transition:transform .35s var(--curva); }
.boton:hover span{ transform:translateX(4px); }
.boton--oro{
  background:linear-gradient(135deg, var(--oro-cl), var(--oro) 50%, var(--oro-2));
  color:var(--marino);
  box-shadow:0 14px 34px -12px rgba(239,168,92,.7), inset 0 1px 0 rgba(255,255,255,.55);
}
.boton--oro:hover{ transform:translateY(-2px); box-shadow:0 22px 44px -12px rgba(239,168,92,.85), inset 0 1px 0 rgba(255,255,255,.55); }
.boton--whatsapp{
  background:linear-gradient(180deg, #25D366, #1EBE5A); color:#fff;
  box-shadow:0 14px 34px -12px rgba(37,211,102,.6), inset 0 1px 0 rgba(255,255,255,.35);
}
.boton--whatsapp:hover{ transform:translateY(-2px); background:linear-gradient(180deg, #2BE070, #128C7E); box-shadow:0 22px 44px -12px rgba(37,211,102,.75); }
.boton--vidrio{
  color:#fff; border-color:rgba(253,193,112,.4);
  background:rgba(253,193,112,.06); backdrop-filter:blur(10px);
}
.boton--vidrio:hover{ background:rgba(253,193,112,.14); border-color:var(--oro-cl); }
.boton--linea{ color:#fff; border-color:rgba(253,193,112,.45); }
.boton--linea:hover{ border-color:var(--oro-cl); background:rgba(253,193,112,.08); }
.boton--chico{ padding:10px 22px; font-size:.9rem; }
.boton--grande{ padding:18px 34px; font-size:1.02rem; }

/* ===================== RÓTULOS Y TITULARES ===================== */

.rotulo{
  display:flex; align-items:center; gap:14px; margin:0 0 26px;
  font-size:.74rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--tinta-suave);
}
.rotulo::before{ content:""; width:38px; height:1px; background:currentColor; opacity:.5; }
.rotulo__num{ color:var(--oro-tinta); }
.rotulo--claro{ color:rgba(226,219,211,.72); }
.rotulo--claro::before{ background:var(--oro); opacity:.8; }
.rotulo--claro .rotulo__num, .rotulo--claro b{ color:var(--oro-cl); }
.rotulo__texto b{ font-weight:700; margin:0 4px; }

.titular{ font-size:clamp(2.2rem, 6vw, 4.3rem); }
.titular--claro{ color:#fff; }
.titular--medio{ font-size:clamp(2rem, 4.4vw, 3.1rem); }
.entrada{ max-width:40em; margin-top:26px; font-size:1.08rem; color:var(--tinta-suave); }

/* ===================== CABECERA ===================== */

.cabecera{
  position:fixed; top:0; left:0; right:0; z-index:80;
  transition:background .4s, border-color .4s, backdrop-filter .4s;
  border-bottom:1px solid transparent;
}
.cabecera.solida{
  background:rgba(11,23,41,.84); backdrop-filter:blur(14px) saturate(1.3);
  border-bottom-color:rgba(253,193,112,.14);
}
.cabecera__caja{ display:flex; align-items:center; justify-content:space-between; min-height:78px; gap:18px; }
.marca{ display:inline-flex; align-items:center; gap:12px; text-decoration:none; }
.marca__logo{
  width:46px; height:46px; flex:none; border-radius:12px;
  box-shadow:0 8px 22px -8px rgba(0,0,0,.7), 0 0 0 1px rgba(253,193,112,.18);
}
.marca__texto{
  font-family:"Cinzel", "Playfair Display", serif; font-size:1.36rem; font-weight:600;
  letter-spacing:.08em; color:var(--plata);
}
.marca__texto b{ font-weight:600; color:var(--oro); }

.nav{ display:none; align-items:center; gap:30px; }
.nav a{ color:rgba(226,219,211,.8); text-decoration:none; font-size:.92rem; font-weight:500; transition:color .25s; }
.nav a:hover{ color:var(--oro-cl); }
.nav a.boton{ color:var(--marino); }

.hamburguesa{
  display:flex; flex-direction:column; justify-content:center; gap:5px;
  width:44px; height:44px; background:rgba(253,193,112,.06); cursor:pointer;
  border:1px solid rgba(253,193,112,.3); border-radius:12px;
}
.hamburguesa span{ display:block; height:1.5px; width:20px; margin-inline:auto; background:var(--oro-cl); transition:transform .25s, opacity .25s; }
.cabecera.abierta{ background:var(--marino); }
.cabecera.abierta .hamburguesa span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.cabecera.abierta .hamburguesa span:nth-child(2){ opacity:0; }
.cabecera.abierta .hamburguesa span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }
.cabecera.abierta .nav{
  display:flex; position:absolute; top:100%; left:0; right:0;
  flex-direction:column; align-items:stretch; gap:0;
  padding:6px 22px 24px; background:var(--marino);
  border-bottom:1px solid rgba(253,193,112,.14);
}
.cabecera.abierta .nav a{ padding:15px 0; border-bottom:1px solid rgba(253,193,112,.1); font-size:1.02rem; }
.cabecera.abierta .nav a.boton{ margin-top:16px; border-bottom:none; }
@media (min-width:960px){
  .nav{ display:flex; }
  .hamburguesa{ display:none; }
}

/* ===================== PORTADA ===================== */

.portada{
  position:relative; min-height:100vh; min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  color:#fff; overflow:hidden;
  padding-top:110px;
  background:
    radial-gradient(55% 60% at 78% 38%, rgba(239,168,92,.30), transparent 62%),
    radial-gradient(45% 55% at 8% 12%, rgba(46,86,150,.45), transparent 65%),
    radial-gradient(60% 50% at 50% 110%, rgba(215,135,61,.16), transparent 70%),
    linear-gradient(180deg, var(--marino-2), var(--marino) 55%, var(--noche));
}
/* Trama fina, como el papel del logo: da textura sin apagar el color */
.portada::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(253,193,112,.12) 1px, transparent 1.2px);
  background-size:26px 26px;
  mask-image:radial-gradient(70% 70% at 70% 40%, #000, transparent 75%);
  -webkit-mask-image:radial-gradient(70% 70% at 70% 40%, #000, transparent 75%);
}
.portada__ondas{
  position:absolute; z-index:0; pointer-events:none;
  width:680px; left:calc(100% - 205px); top:50%;
  translate:-50% -50%;
}
.portada__ondas .orbita{ fill:none; stroke:rgba(253,193,112,.38); stroke-width:1.2; }
.portada__ondas .orbita--punteada{ stroke-dasharray:2 9; stroke-linecap:round; stroke:rgba(253,193,112,.55); stroke-width:2; }
.portada__ondas .orbita--tenue{ stroke:rgba(253,193,112,.16); }
.portada__ondas .onda{ fill:none; stroke:var(--oro-cl); stroke-width:1.6; transform-origin:300px 300px; opacity:0; animation:onda 4.8s cubic-bezier(.2,.6,.3,1) infinite; }
.portada__ondas .onda:nth-of-type(2){ animation-delay:1.6s; }
.portada__ondas .onda:nth-of-type(3){ animation-delay:3.2s; }
.portada__ondas .colega{ fill:var(--oro-cl); filter:drop-shadow(0 0 6px rgba(253,193,112,.9)); }
.portada__ondas .colega--chico{ fill:#FFE6B8; }
.portada__ondas .giro{ transform-origin:300px 300px; animation:giro 60s linear infinite; }
.portada__ondas .giro--rapido{ animation-duration:42s; animation-direction:reverse; }
.portada__ondas .giro--lejano{ animation-duration:90s; }
@keyframes onda{ 0%{ transform:scale(1); opacity:.7; } 100%{ transform:scale(1.9); opacity:0; } }
@keyframes giro{ to{ transform:rotate(360deg); } }

.portada__caja{ position:relative; z-index:2; display:grid; gap:40px; align-items:end; }
.portada h1{ font-size:clamp(2.8rem, 7vw, 6.3rem); line-height:.98; letter-spacing:-.025em; margin:0 0 30px; text-shadow:0 10px 40px rgba(0,0,0,.35); }
.portada h1 span{ display:block; white-space:nowrap; }
.bajada{ max-width:31em; font-size:1.1rem; color:rgba(226,219,211,.85); }
.bajada strong{ color:var(--oro-cl); font-weight:600; }
.portada__acciones{ display:flex; flex-wrap:wrap; gap:12px; margin-top:34px; }

.portada__escena{ position:relative; display:none; }
.portada__movil{
  position:relative; z-index:1;
  width:min(330px, 100%); margin-left:auto; margin-right:40px;
  filter:drop-shadow(0 50px 60px rgba(0,0,0,.65)) drop-shadow(0 0 80px rgba(239,168,92,.28));
  rotate:-4deg;
}
.aviso-flotante{
  position:absolute; z-index:2; left:-10px; top:22%;
  display:flex; align-items:center; gap:14px;
  padding:14px 20px 14px 14px; border-radius:18px;
  background:rgba(248,245,240,.95); color:var(--tinta);
  backdrop-filter:blur(12px);
  box-shadow:0 30px 50px -20px rgba(0,0,0,.6), 0 0 0 1px rgba(253,193,112,.5);
  animation:flotar 6s ease-in-out infinite;
}
.aviso-flotante__icono{
  width:44px; height:44px; border-radius:13px; flex:none;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg,#37AEE2,#1E96C8);
  box-shadow:0 0 0 6px rgba(55,174,226,.18);
}
.aviso-flotante__icono svg{ width:22px; height:22px; }
.aviso-flotante strong{ display:block; font-size:.98rem; }
.aviso-flotante small{ display:block; font-size:.8rem; color:var(--tinta-suave); }
@keyframes flotar{ 0%,100%{ translate:0 0; } 50%{ translate:0 -10px; } }

.portada__pie{
  position:relative; z-index:2;
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:14px;
  margin-top:56px; padding-top:22px; padding-bottom:30px;
  border-top:1px solid var(--filete-cl);
  font-size:.84rem; color:rgba(226,219,211,.6);
}
.portada__pie p{ margin:0; }
.bajar{ color:var(--oro-cl); text-decoration:none; letter-spacing:.14em; text-transform:uppercase; font-size:.72rem; font-weight:700; }
.bajar span{ display:inline-block; margin-left:8px; animation:bajar 2.2s ease-in-out infinite; }
@keyframes bajar{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(5px); } }

@media (min-width:960px){
  .portada__caja{ grid-template-columns:1.35fr .65fr; }
  .portada__escena{ display:block; }
}

/* ===================== CINTA ===================== */

.cinta{
  background:linear-gradient(90deg, var(--oro-2), var(--oro-cl) 50%, var(--oro-2));
  color:var(--marino); overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.12);
}
.cinta__pista{
  display:flex; align-items:center; gap:34px; width:max-content;
  padding:20px 0; animation:cinta 38s linear infinite;
  font-family:"Playfair Display", serif; font-style:italic; font-weight:600; font-size:clamp(1.4rem, 3vw, 2.1rem);
}
.cinta__pista i{ font-style:normal; font-size:.7em; opacity:.6; }
@keyframes cinta{ to{ transform:translateX(-50%); } }

/* ===================== SECCIONES ===================== */

.seccion{ padding:96px 0; position:relative; }
@media (min-width:900px){ .seccion{ padding:140px 0; } }
.seccion--pegada{ padding-top:0; }
.seccion--marfil{ background:var(--marfil); }
.seccion--marino{
  background:
    radial-gradient(70% 55% at 10% 0%, rgba(46,86,150,.4), transparent 60%),
    radial-gradient(60% 55% at 100% 100%, rgba(239,168,92,.16), transparent 60%),
    var(--marino);
  color:rgba(226,219,211,.82);
  overflow:hidden;
}

/* Editorial: cabeza a la izquierda, cuerpo a la derecha */
.editorial{ display:grid; gap:48px; }
.editorial__cabeza .titular{ max-width:11em; }
.editorial__cabeza--ancha .titular{ max-width:14em; }
@media (min-width:960px){
  .editorial{ grid-template-columns:1fr 1fr; gap:80px; align-items:start; }
  .editorial__cabeza{ position:sticky; top:130px; }
}
.capitular{ font-size:1.12rem; color:var(--tinta-suave); }
.capitular::first-letter{
  float:left; font-family:"Playfair Display", serif; font-size:4.6em; line-height:.82;
  padding:8px 12px 0 0; color:var(--oro-2);
}
.indice{ list-style:none; margin:44px 0 0; padding:0; }
.indice li{
  display:grid; grid-template-columns:54px 1fr; gap:10px;
  padding:26px 0; border-top:1px solid var(--filete);
}
.indice li:last-child{ border-bottom:1px solid var(--filete); }
.indice__num{ font-family:"Playfair Display", serif; font-style:italic; font-size:1.5rem; color:var(--oro-2); line-height:1.1; }
.indice h3{ margin-bottom:6px; }
.indice p{ margin:0; color:var(--tinta-suave); font-size:.98rem; }

/* Cómo funciona */
.cabeza-centrada{ text-align:center; max-width:880px; margin:0 auto 70px; }
.cabeza-centrada .rotulo{ justify-content:center; }
.cabeza-centrada .rotulo::after{ content:""; width:38px; height:1px; background:var(--oro); opacity:.8; }

.funciona{ display:grid; gap:50px; align-items:center; }
.funciona__escena{ position:relative; display:flex; justify-content:center; perspective:1400px; }
.funciona__halo{
  position:absolute; width:80%; aspect-ratio:1; top:50%; left:50%; translate:-50% -50%;
  background:radial-gradient(circle, rgba(239,168,92,.42), transparent 62%);
  filter:blur(24px);
}
.funciona__movil{
  position:relative; width:min(310px, 76vw);
  filter:drop-shadow(0 60px 70px rgba(0,0,0,.55));
  transform:rotateY(-14deg) rotateX(6deg) rotateZ(2deg);
  transition:transform 1.2s var(--curva);
}
.pasos{ list-style:none; margin:0; padding:0; }
.paso{
  display:grid; grid-template-columns:78px 1fr; gap:10px; align-items:start;
  padding:28px 0; border-top:1px solid var(--filete-cl);
}
.paso:last-child{ border-bottom:1px solid var(--filete-cl); }
.paso__num{
  font-family:"Playfair Display", serif; font-size:2.6rem; line-height:1;
  background:var(--metal); -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
}
.paso h3{ color:#fff; margin-bottom:6px; font-size:1.35rem; }
.paso p{ margin:0; font-size:.98rem; }
@media (min-width:960px){
  .funciona{ grid-template-columns:.9fr 1.1fr; gap:90px; }
}

.cita{ margin:80px auto 0; max-width:900px; text-align:center; }
.cita p{
  font-family:"Playfair Display", serif; font-size:clamp(1.45rem, 3vw, 2.15rem);
  line-height:1.35; color:#fff; margin:0;
}
.cita::before{
  content:"“"; display:block; font-family:"Playfair Display", serif;
  font-size:5rem; line-height:.6; color:var(--oro); margin-bottom:14px;
}

/* El panel en su escenario */
.seccion--panel{ padding-bottom:110px; }
.escenario{
  position:relative; margin:70px 0 80px; padding:70px 18px 50px;
  background:
    radial-gradient(60% 70% at 50% 40%, rgba(46,86,150,.55), transparent 70%),
    linear-gradient(180deg, var(--marino-2), var(--noche));
  overflow:hidden; perspective:1800px;
}
@media (min-width:900px){ .escenario{ padding:110px 40px 80px; } }
.escenario__luz{
  position:absolute; width:60%; height:60%; left:20%; top:6%;
  background:radial-gradient(ellipse, rgba(239,168,92,.3), transparent 65%);
  filter:blur(40px);
}
.escenario__figura{ position:relative; max-width:1180px; margin:0 auto; }
.escenario__panel{
  width:100%;
  border-radius:clamp(10px, 2vw, 22px);
  box-shadow:0 80px 120px -40px rgba(0,0,0,.75), 0 0 0 1px rgba(253,193,112,.25);
  transform:rotateX(14deg) scale(.94);
  transform-origin:50% 100%;
  transition:transform .2s linear;
  will-change:transform;
}
.escenario__figura picture{ display:block; }
@media (max-width:720px){
  .escenario__figura picture{ max-width:440px; margin:0 auto; }
  .escenario__panel{ border-radius:18px; }
}
.escenario__figura figcaption{
  margin-top:26px; text-align:center; font-size:.78rem; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(226,219,211,.45);
}

.baldosas{ display:grid; gap:0; border-top:1px solid var(--filete); }
@media (min-width:720px){ .baldosas{ grid-template-columns:1fr 1fr; } }
@media (min-width:1080px){ .baldosas{ grid-template-columns:repeat(3,1fr); } }
.baldosa{ padding:34px 28px 34px 0; border-bottom:1px solid var(--filete); position:relative; transition:background .3s; }
@media (min-width:720px){
  .baldosa{ padding:38px 34px; border-right:1px solid var(--filete); }
  .baldosa:hover{ background:#fff; }
}
.baldosa__punto{
  display:block; width:12px; height:12px; border-radius:50%;
  background:var(--tono); margin-bottom:22px;
  box-shadow:0 0 0 6px color-mix(in srgb, var(--tono) 18%, transparent);
}
.baldosa h3{ margin-bottom:10px; font-size:1.4rem; }
.baldosa p{ margin:0; color:var(--tinta-suave); font-size:.98rem; }
.baldosa--pronto h3, .baldosa--pronto p{ opacity:.62; }
.etiqueta{
  display:inline-block; margin-left:8px; vertical-align:middle;
  font-family:"DM Sans", sans-serif; font-size:.64rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  padding:4px 10px; border-radius:999px; border:1px solid currentColor; color:var(--oro-tinta);
}

/* Consultar: marino, con el dorado al frente */
.consultar__caja{ display:grid; gap:40px; align-items:end; }
@media (min-width:960px){ .consultar__caja{ grid-template-columns:1.1fr .9fr; gap:80px; } }
.consultar__texto p{ font-size:1.1rem; color:rgba(226,219,211,.85); }
.consultar__acciones{ display:flex; flex-wrap:wrap; gap:12px; margin:30px 0 22px; }
.consultar__dato{ font-size:.9rem !important; letter-spacing:.02em; color:var(--oro-cl) !important; }

/* Preguntas */
.preguntas__caja{ display:grid; gap:40px; padding-top:110px; }
@media (min-width:960px){ .preguntas__caja{ grid-template-columns:.8fr 1.2fr; gap:80px; } }
.preguntas{ border-top:1px solid var(--filete); }
.pregunta{ border-bottom:1px solid var(--filete); }
.pregunta summary{
  list-style:none; cursor:pointer; position:relative;
  padding:24px 44px 24px 0;
  font-family:"Playfair Display", serif; font-size:1.2rem; font-weight:600;
}
.pregunta summary::-webkit-details-marker{ display:none; }
.pregunta summary::after{
  content:""; position:absolute; right:4px; top:50%; width:14px; height:14px;
  translate:0 -50%;
  background:
    linear-gradient(var(--oro-2),var(--oro-2)) center/100% 1.5px no-repeat,
    linear-gradient(var(--oro-2),var(--oro-2)) center/1.5px 100% no-repeat;
  transition:transform .35s var(--curva);
}
.pregunta[open] summary::after{ transform:rotate(45deg); }
.pregunta p{ margin:0 0 26px; max-width:40em; color:var(--tinta-suave); }

/* ===================== PIE ===================== */

.pie{
  background:
    radial-gradient(50% 60% at 50% 0%, rgba(239,168,92,.14), transparent 70%),
    var(--noche);
  color:rgba(226,219,211,.6); padding:80px 0 30px; overflow:hidden;
}
.pie__marca{ display:flex; align-items:center; gap:22px; margin:0 0 50px; }
.pie__logo{
  width:110px; height:110px; border-radius:24px; flex:none;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.8), 0 0 60px -10px rgba(239,168,92,.35);
}
.pie__gigante{
  margin:0; font-family:"Cinzel", "Playfair Display", serif; font-weight:600;
  font-size:clamp(2.1rem, 10vw, 8.5rem); line-height:.9; letter-spacing:.06em;
  color:var(--plata); white-space:nowrap;
}
.pie__gigante b{ font-weight:600; color:var(--oro); }
@media (max-width:600px){
  .pie__marca{ gap:16px; }
  .pie__logo{ width:72px; height:72px; border-radius:16px; }
}
.pie__caja{
  display:grid; gap:26px; padding-bottom:30px; border-bottom:1px solid var(--filete-cl);
}
@media (min-width:760px){ .pie__caja{ grid-template-columns:1fr auto; align-items:center; } }
.pie__lema{ margin:0; font-family:"Playfair Display", serif; font-size:1.2rem; color:rgba(226,219,211,.85); }
.pie__enlaces{ display:flex; flex-wrap:wrap; gap:10px 26px; }
.pie__enlaces a{ color:rgba(226,219,211,.62); text-decoration:none; font-size:.92rem; }
.pie__enlaces a:hover{ color:var(--oro-cl); }
.pie__legales{
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:16px;
  padding-top:24px; font-size:.84rem; color:rgba(226,219,211,.42);
}
.pie__legales p{ margin:0; }

/* Crédito Procesos Inteligentes */
.pi-credit{ display:inline-flex; align-items:center; gap:9px; color:inherit; text-decoration:none; transition:color .25s ease; }
.pi-credit img{ height:19px; width:auto; display:block; opacity:.82; transition:opacity .25s ease; }
.pi-credit:hover img{ opacity:1; }
.pi-credit:hover{ color:rgba(226,219,211,.8); }

/* ===================== MOVIMIENTO ===================== */

.js .revelar{ opacity:0; transform:translateY(28px); transition:opacity 1s var(--curva), transform 1s var(--curva); }
.js .revelar.visto{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation:none !important; transition:none !important; }
  .js .revelar{ opacity:1; transform:none; }
  .escenario__panel{ transform:none; }
}