/* ===== Oli Studio — estilos ===== */
@font-face{font-family:'Moliga DEMO';src:url('assets/Moliga_DEMO.otf') format('opentype');font-weight:normal;font-display:swap;}
:root{
  --marino:#1B297E; --mostaza:#E6B54C; --peri:#9EB9EE; --salvia:#69846E;
  --tinta:#24263A; --blanco:#FFFFFF; --peri-soft:#EEF3FC;
  --wrap:1080px; --title:'Moliga DEMO',Georgia,serif; --round:'Fredoka',system-ui,sans-serif; --body:'Outfit',system-ui,sans-serif;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;font-family:var(--body);color:var(--tinta);background:var(--blanco);line-height:1.7;-webkit-font-smoothing:antialiased;}
h1,h2,h3{font-family:var(--title);color:var(--marino);line-height:1.05;margin:0;font-weight:normal;letter-spacing:1px;text-transform:uppercase;}
p{margin:0;} img{max-width:100%;display:block;} a{color:inherit;}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px;}
.section{position:relative;overflow:hidden;}
.frame{border-radius:22px;overflow:hidden;background:var(--peri-soft);}
.frame img{width:100%;height:100%;object-fit:cover;display:block;}

/* marcador de foto (reemplázalo por tu imagen) */
.ph{display:flex;align-items:center;justify-content:center;text-align:center;
    background:#D9E3F5;color:var(--marino);font-family:var(--round);font-weight:500;
    font-size:.95rem;padding:16px;border:1.5px dashed #9EB9EE;}

/* olitas */
.olita{position:absolute;pointer-events:none;z-index:0;}
.olita svg{width:190px;height:auto;display:block;}
.drift-a{animation:drift-a 9s ease-in-out infinite;}
.drift-b{animation:drift-b 11s ease-in-out infinite;}
@keyframes drift-a{0%,100%{transform:translate(0,0);}50%{transform:translate(10px,-8px);}}
@keyframes drift-b{0%,100%{transform:translate(0,0);}50%{transform:translate(-12px,7px);}}
.squig{position:absolute;pointer-events:none;opacity:.5;z-index:0;}
.squig img{width:100%;height:auto;}

.header{padding:26px 0 6px;}
.header .logo{height:54px;width:auto;margin:0 auto;display:block;}

.hero{padding:28px 0 62px;}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;position:relative;z-index:1;}
.hero .frame{aspect-ratio:4/5;}
.pill{display:inline-block;background:var(--mostaza);color:var(--marino);font-family:var(--round);font-weight:500;font-size:14px;padding:5px 15px;border-radius:999px;margin-bottom:18px;}
.hero h1{font-size:clamp(2.4rem,5.4vw,3.6rem);margin-bottom:18px;}
.lead{font-size:1.08rem;max-width:34ch;margin-bottom:26px;}
.disclaimer{margin-top:16px;font-size:.92rem;color:rgba(27,41,126,.75);max-width:38ch;}
.cta{display:inline-block;font-family:var(--round);font-weight:600;font-size:1.05rem;background:var(--marino);color:var(--blanco);text-decoration:none;padding:14px 30px;border-radius:12px;transition:transform .2s ease,background .2s ease;}
.cta:hover{background:#141f5e;transform:translateY(-2px);}

.band{background:var(--mostaza);padding:15px 24px;text-align:center;}
.band span{font-family:var(--round);font-weight:600;font-size:1.08rem;color:var(--marino);}
.band .dot{opacity:.55;margin:0 14px;}

.productos{padding:74px 0;}
.productos h2{font-size:clamp(2rem,4.4vw,2.7rem);margin-bottom:6px;}
.productos .sub{color:var(--salvia);margin-bottom:40px;font-size:1.02rem;text-transform:none;}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:28px;position:relative;z-index:1;}
.card{text-align:center;}
.card .frame{aspect-ratio:1/1;margin-bottom:16px;}
.card h3{font-size:1.5rem;margin-bottom:4px;}
.card p{font-size:.96rem;color:var(--tinta);margin-bottom:12px;}
.tag{display:inline-block;font-family:var(--round);font-weight:500;font-size:.85rem;color:var(--marino);border:1.5px solid var(--marino);border-radius:999px;padding:4px 16px;}

.historia{padding:44px 0 90px;}
.historia-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:stretch;position:relative;z-index:1;}
.historia .frame{position:relative;}
.historia .frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.historia h2{font-size:clamp(1.9rem,4.4vw,2.5rem);margin-bottom:14px;}
.historia p{font-size:1.05rem;max-width:44ch;}

.footer{background:var(--marino);color:var(--blanco);padding:56px 0 26px;position:relative;overflow:hidden;}
.footer-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start;position:relative;z-index:1;}
.footer .logo{height:46px;width:auto;margin-bottom:8px;}
.footer h2{color:var(--blanco);font-size:1.5rem;margin-bottom:12px;}
.footer p{color:rgba(255,255,255,.85);}
.contacto{margin-top:6px;font-size:.98rem;}
.contacto a{color:var(--peri);text-decoration:none;}
.contacto a:hover{color:var(--mostaza);}
.copyright{margin-top:40px;font-size:.85rem;color:rgba(255,255,255,.55);position:relative;z-index:1;}

@media (max-width:760px){
  .hero-grid,.historia-grid,.footer-grid{grid-template-columns:1fr;gap:30px;}
  .historia .frame{aspect-ratio:4/5;}
}
@media (prefers-reduced-motion:reduce){.drift-a,.drift-b{animation:none;}}