/* ============================================================
   Portada: elegir entre SOMOS FAMA (productos) y SOMOS OURCREDIT (créditos)
   ============================================================ */
:root{
  --ease:cubic-bezier(.22,1,.36,1);
  --fuente-display:"Bricolage Grotesque","Plus Jakarta Sans",system-ui,sans-serif;
  --fuente-texto:"Plus Jakarta Sans",system-ui,-apple-system,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body.portada{margin:0;font-family:var(--fuente-texto);background:#1a0a06;color:#fff;-webkit-font-smoothing:antialiased;min-height:100svh}
a{color:inherit;text-decoration:none}
h1,h2,p{margin:0}
.solo-lector{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
 
/* barra superior */
.p-top{position:absolute;inset:0 0 auto 0;z-index:20;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:clamp(14px,2.4vw,26px) clamp(16px,3vw,36px);pointer-events:none}
.p-top>*{pointer-events:auto}
.p-pregunta{font-family:var(--fuente-display);font-weight:700;font-size:clamp(1rem,1.5vw,1.25rem);letter-spacing:-.02em;text-shadow:0 2px 14px rgba(0,0,0,.45)}
.p-portal{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:999px;font-weight:700;font-size:.85rem;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.38);backdrop-filter:blur(10px);transition:background .3s,color .3s}
.p-portal svg{width:16px;height:16px}
.p-portal:hover{background:#fff;color:#1a0a06}
 
/* los dos lados */
.lados{display:flex;height:100svh;min-height:600px}
.lado{position:relative;flex:1 1 0;display:flex;align-items:flex-end;min-width:0;container-type:inline-size;transition:flex .85s var(--ease)}
.lado .marco{position:absolute;inset:0;overflow:hidden}
.lado .marco img{width:100%;height:100%;object-fit:cover;transform:scale(1.08);transition:transform 1.2s var(--ease)}
.lado .marco::after{content:"";position:absolute;inset:0}
.lado-f .marco::after{background:linear-gradient(to top,rgba(58,12,3,.97) 6%,rgba(110,24,7,.7) 42%,rgba(138,29,8,.38) 100%)}
.lado-c .marco::after{background:linear-gradient(to top,rgba(14,28,84,.97) 6%,rgba(30,58,138,.7) 42%,rgba(37,75,190,.38) 100%)}
.lado-f{z-index:2}
 
.lado .cont{position:relative;z-index:3;width:100%;align-self:stretch;justify-content:flex-end;padding:clamp(24px,4vw,64px);padding-bottom:clamp(64px,9vh,110px);display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.razon{font-weight:700;font-size:1rem;padding:7px 14px;border-radius:999px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.34);backdrop-filter:blur(8px)}
.lado h2{font-family:var(--fuente-display);font-weight:800;font-size:clamp(3rem,13cqi,8.6rem);line-height:.88;letter-spacing:-.025em;font-optical-sizing:none;margin-block:6px 4px}
.lado .desc{font-size:clamp(.98rem,1.25vw,1.2rem);line-height:1.55;max-width:34ch;color:rgba(255,255,255,.92)}
.chips{display:flex;flex-wrap:wrap;gap:8px;max-width:46ch}
.chips span{font-size:.8rem;font-weight:600;padding:6px 12px;border-radius:99px;border:1px solid rgba(255,255,255,.4);color:rgba(255,255,255,.95)}
.entrar{display:inline-flex;align-items:center;gap:12px;margin-top:10px;padding:15px 24px;border-radius:16px;background:#fff;font-weight:800;font-size:.95rem;letter-spacing:-.01em;box-shadow:0 18px 40px -16px rgba(0,0,0,.55);transition:transform .4s var(--ease),box-shadow .4s}
.lado-f .entrar{color:#6E1807}
.lado-c .entrar{color:#1E3A8A}
.entrar svg{width:18px;height:18px;transition:transform .4s var(--ease)}
.lado:hover .entrar svg,.lado:focus-visible .entrar svg{transform:translateX(6px)}
.lado:hover .entrar{transform:translateY(-3px)}
.visto{display:none;font-size:.78rem;font-weight:700;padding:5px 12px;border-radius:99px;background:#F6B04A;color:#3A0C03}
.lado.es-ultimo .visto{display:inline-block}
.lado:focus-visible{outline:4px solid #fff;outline-offset:-10px}
 
/* sello central: acompaña a la costura aunque cambie el ancho */
.sello{position:absolute;z-index:6;top:50%;right:0;transform:translate(50%,-50%);width:clamp(96px,11vw,150px);aspect-ratio:1;border-radius:50%;background:#fff;padding:7px;display:grid;place-items:center;box-shadow:0 20px 50px -12px rgba(0,0,0,.55);pointer-events:none}
.sello img{width:100%;height:100%;object-fit:contain;border-radius:50%}
.sello::after{content:"";position:absolute;inset:-9px;border-radius:50%;border:2px solid rgba(255,255,255,.55);animation:onda 2.6s ease-out infinite}
@keyframes onda{0%{transform:scale(.92);opacity:.9}100%{transform:scale(1.28);opacity:0}}
 
/* pie */
.p-pie{position:absolute;inset:auto 0 0 0;z-index:20;display:flex;justify-content:center;gap:clamp(12px,3vw,32px);flex-wrap:wrap;padding:14px 20px;font-size:.78rem;font-weight:600;color:rgba(255,255,255,.88);text-shadow:0 1px 8px rgba(0,0,0,.5);pointer-events:none}
 
/* expansión al apuntar (solo con puntero fino) */
@media (hover:hover) and (min-width:861px){
  .lados:hover .lado{flex-grow:.8}
  .lados .lado:hover,.lados .lado:focus-visible{flex-grow:1.4}
  .lado:hover .marco img,.lado:focus-visible .marco img{transform:scale(1)}
}
 
/* entrada: una sola secuencia al cargar */
@media (prefers-reduced-motion:no-preference){
  .lado-f .marco{animation:abrir-i 1.1s var(--ease) both}
  .lado-c .marco{animation:abrir-d 1.1s var(--ease) both}
  .lado .cont>*{animation:subir .9s var(--ease) both}
  .lado .cont>*:nth-child(1){animation-delay:.35s}
  .lado .cont>*:nth-child(2){animation-delay:.45s}
  .lado .cont>*:nth-child(3){animation-delay:.55s}
  .lado .cont>*:nth-child(4){animation-delay:.65s}
  .lado .cont>*:nth-child(5){animation-delay:.75s}
  .lado .cont>*:nth-child(6){animation-delay:.85s}
  .sello{animation:sello-in .9s var(--ease) .7s both}
  .p-top,.p-pie{animation:aparecer .8s ease 1s both}
}
@keyframes abrir-i{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
@keyframes abrir-d{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0)}}
@keyframes subir{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes aparecer{from{opacity:0}to{opacity:1}}
@keyframes sello-in{from{opacity:0;transform:translate(50%,-50%) scale(.6)}to{opacity:1;transform:translate(50%,-50%) scale(1)}}
@media (prefers-reduced-motion:reduce){.lado,.lado .marco img,.entrar,.entrar svg{transition:none}.sello::after{animation:none;opacity:0}}
 
/* móvil: se apilan */
@media (max-width:860px){
  .lados{flex-direction:column;height:auto;min-height:100svh}
  .lado{flex:1 0 auto;min-height:50svh}
  .lado .cont,.lado-f .cont,.lado-c .cont{padding:28px 22px 44px}
  .lado-f .cont{padding-top:96px}
  .lado-c .cont{padding-top:70px}
  .lado h2{font-size:clamp(3rem,15vw,4.6rem)}
  .sello{top:auto;right:50%;bottom:0;transform:translate(50%,50%);width:96px}
  @keyframes sello-in{from{opacity:0;transform:translate(50%,50%) scale(.6)}to{opacity:1;transform:translate(50%,50%) scale(1)}}
  .p-pie{position:static;background:#1a0a06;padding:18px 20px 22px}
  .p-pregunta{font-size:1rem}
}
 
/* Marca de cada lado: logo + nombre, juntos, justo encima del título */
.marca-lado{display:flex;align-items:center;gap:clamp(12px,1.4vw,18px);margin-bottom:6px}
.tarjeta-logo{flex:none;display:block}
.tarjeta-logo img{
  display:block;height:clamp(84px,11.5vh,118px);width:auto;max-width:min(220px,50cqi);object-fit:contain;
  background:#fff;border-radius:50%;padding:5px;
  box-shadow:0 14px 30px -12px rgba(0,0,0,.55);
  transition:transform .5s var(--ease);
}
.lado:hover .tarjeta-logo img,.lado:focus-visible .tarjeta-logo img{transform:scale(1.05)}
.marca-lado .razon{font-size:clamp(.95rem,1.15vw,1.12rem)}
@media (max-width:860px){
  .tarjeta-logo img{height:80px}
  .lado-f .cont{padding-top:84px}
  .lado-c .cont{padding-top:48px}
}