:root { --brand:#1268e8; --navy:#07152d; --ink:#0f172a; }
html { scroll-behavior:smooth; }
body { text-rendering:optimizeLegibility; overflow-x:hidden; }
a { cursor:pointer; }
.site-header { background:linear-gradient(180deg,rgba(4,13,31,.72),rgba(4,13,31,.06)); }
.brand-lockup { display:flex; align-items:center; gap:.85rem; min-width:0; }
.brand-logo-frame { display:grid; place-items:center; width:230px; height:68px; overflow:hidden; }
.brand-logo-frame img { width:100%; height:100%; object-fit:contain; }
.brand-divider { width:1px; height:48px; background:rgba(255,255,255,.35); }
.porto-logo-frame { display:grid; place-items:center; width:210px; height:58px; border-radius:.7rem; background:#fff; padding:.8rem 1rem; }
.porto-logo-frame img { width:100%; height:100%; object-fit:contain; }
.header-cta { align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.35); border-radius:999px; padding:.75rem 1.2rem; color:#fff; font-size:.85rem; font-weight:800; backdrop-filter:blur(12px); transition:.2s ease; }
.header-cta:hover { background:#fff; color:var(--brand); }
.hero-section { position:relative; min-height:780px; overflow:hidden; background:var(--navy); }
.hero-photo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.hero-overlay { background:linear-gradient(90deg,rgba(3,10,25,.98) 0%,rgba(3,10,25,.9) 58%,rgba(3,10,25,.46) 100%),linear-gradient(0deg,rgba(3,10,25,.38),transparent 55%); }
.hero-content { display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:1.35rem; min-height:780px; padding-top:8rem; padding-bottom:2.5rem; }
.hero-copy { max-width:990px; }
.hero-eyebrow { display:inline-flex; align-items:center; gap:.5rem; margin-bottom:1rem; color:#93c5fd; font-size:.75rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.hero-eyebrow svg { width:17px; }
.hero-copy h1 { max-width:980px; color:#fff; font-size:clamp(2.5rem,4.6vw,4.25rem); font-weight:800; line-height:1.02; letter-spacing:-.045em; text-wrap:balance; }
.hero-subtitle { max-width:920px; margin-top:1.2rem; color:#dbe4f0; font-size:1.05rem; line-height:1.65; }
.hero-actions { display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; }
.hero-cta { display:inline-flex; align-items:center; justify-content:center; gap:.55rem; min-height:52px; padding:.85rem 1.3rem; border:1px solid transparent; border-radius:999px; font-size:.9rem; font-weight:800; transition:transform .2s ease,background .2s ease,border-color .2s ease; }
.hero-cta:hover { transform:translateY(-2px); }
.hero-cta svg { width:19px; }
.hero-cta-primary { background:#168f45; color:#fff; box-shadow:0 14px 32px rgba(22,143,69,.28); }
.hero-cta-primary:hover { background:#1aa652; }
.hero-cta-secondary { border-color:rgba(255,255,255,.4); background:rgba(7,21,45,.55); color:#fff; backdrop-filter:blur(10px); }
.hero-cta-secondary:hover { border-color:#fff; background:rgba(255,255,255,.1); }
.hero-benefits { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.65rem; width:min(100%,1040px); }
.hero-benefit { display:flex; align-items:center; gap:.75rem; min-height:112px; padding:1rem; border:1px solid rgba(147,197,253,.28); border-radius:1rem; color:#fff; background:linear-gradient(135deg,rgba(18,104,232,.34),rgba(7,21,45,.76)); box-shadow:0 14px 30px rgba(0,0,0,.16); backdrop-filter:blur(12px); }
.benefit-icon { display:grid; place-items:center; width:42px; height:42px; flex:0 0 42px; border-radius:.75rem; color:#fff; background:rgba(255,255,255,.1); }
.benefit-icon svg { width:23px; height:23px; stroke-width:1.8; }
.hero-benefit strong,.hero-benefit small { display:block; }
.hero-benefit strong { font-size:.86rem; line-height:1.25; }
.hero-benefit small { margin-top:.32rem; color:#cbd5e1; font-size:.68rem; line-height:1.4; }
.primary-action { display:inline-flex; align-items:center; justify-content:center; gap:.6rem; min-height:54px; padding:.9rem 1.4rem; border-radius:999px; background:var(--brand); color:#fff; font-weight:800; box-shadow:0 14px 35px rgba(18,104,232,.3); transition:transform .2s ease,background .2s ease; }
.primary-action:hover { transform:translateY(-2px); background:#287bf0; }
.primary-action svg { width:19px; }
.primary-action-light { background:#fff; color:#1559bd; }
.primary-action-light:hover { background:#eff6ff; }
.section-heading p { color:var(--brand); font-size:.75rem; font-weight:800; letter-spacing:.2em; text-transform:uppercase; }
.section-heading h2 { margin-top:.7rem; max-width:760px; font-size:clamp(2rem,4vw,3rem); font-weight:800; line-height:1.08; letter-spacing:-.035em; }
.section-heading.text-center h2 { margin-inline:auto; }
.section-heading span { display:block; margin-top:1rem; color:#64748b; line-height:1.7; }
.why-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.why-card { position:relative; overflow:hidden; min-height:230px; padding:1.6rem; border:1px solid #e2e8f0; border-radius:1.3rem; background:#fff; transition:.25s ease; }
.why-card::after { content:""; position:absolute; right:-50px; bottom:-60px; width:130px; height:130px; border-radius:50%; background:#eff6ff; transition:.25s ease; }
.why-card:hover { transform:translateY(-4px); border-color:#bfdbfe; box-shadow:0 18px 45px rgba(15,23,42,.09); }
.why-icon { display:grid; place-items:center; width:50px; height:50px; border-radius:1rem; background:#eaf3ff; color:var(--brand); }
.why-card h3 { margin-top:1.2rem; font-size:1.05rem; font-weight:800; }
.why-card p { position:relative; z-index:1; margin-top:.55rem; color:#64748b; font-size:.88rem; line-height:1.65; }
.service-card { display:flex; align-items:flex-start; gap:1rem; min-height:145px; padding:1.35rem; border:1px solid #e2e8f0; border-radius:1.2rem; background:#fff; transition:.25s ease; }
.service-card:hover { transform:translateY(-3px); box-shadow:0 15px 35px rgba(15,23,42,.08); }
.service-icon { display:grid; place-items:center; width:46px; height:46px; flex:0 0 46px; border-radius:.85rem; background:#eff6ff; color:var(--brand); }
.service-icon svg { width:23px; }
.service-card h3 { font-size:.98rem; font-weight:800; }
.service-card p { margin-top:.4rem; color:#64748b; font-size:.8rem; line-height:1.55; }
.brand-marquee { display:flex; overflow:hidden; mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.brand-marquee-track { display:flex; width:max-content; animation:marquee 44s linear infinite; }
.brand-logo-item { display:flex; width:135px; flex:0 0 135px; flex-direction:column; align-items:center; gap:.55rem; color:#64748b; font-size:.68rem; font-weight:700; }
.brand-logo-item img { width:44px; height:44px; object-fit:contain; opacity:.55; filter:grayscale(1); transition:.2s; }
.brand-logo-item:hover img { opacity:.9; filter:grayscale(0); }
.women-section { background:linear-gradient(135deg,#eff6ff 0%,#fff 55%,#eef2ff 100%); }
.women-panel { display:grid; grid-template-columns:minmax(300px,.72fr) minmax(0,1.28fr); min-height:420px; overflow:hidden; border:1px solid #dbeafe; border-radius:1.6rem; background:#07152d; box-shadow:0 25px 60px rgba(15,23,42,.14); }
.women-image { position:relative; min-height:420px; }
.women-image::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent 60%,#07152d 100%); }
.women-image img { width:100%; height:100%; object-fit:cover; object-position:center 34%; }
.women-copy { align-self:center; padding:2.7rem 3.2rem; color:#fff; }
.women-kicker { display:inline-flex; align-items:center; gap:.5rem; color:#60a5fa; font-size:.75rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase; }
.women-kicker svg { width:18px; }
.women-copy h2 { margin-top:1rem; max-width:650px; font-size:clamp(1.8rem,3.2vw,2.8rem); font-weight:800; line-height:1.08; letter-spacing:-.04em; }
.women-copy>p { margin-top:1.2rem; color:#cbd5e1; line-height:1.75; }
.women-highlights { display:flex; flex-wrap:wrap; gap:.7rem; margin:1.4rem 0; }
.women-highlights span { display:inline-flex; align-items:center; gap:.45rem; padding:.55rem .75rem; border:1px solid rgba(255,255,255,.14); border-radius:.75rem; color:#e2e8f0; font-size:.75rem; font-weight:700; background:rgba(255,255,255,.05); }
.women-highlights svg { width:16px; color:#60a5fa; }
.brand-grid { background-image:radial-gradient(rgba(37,99,235,.17) 1px,transparent 1px); background-size:22px 22px; }
.step-card { border:1px solid rgba(255,255,255,.1); border-radius:1.2rem; padding:1.5rem; background:rgba(255,255,255,.05); }
.step-card span { color:#3b82f6; font-size:2.1rem; font-weight:900; }
.step-card h3 { margin-top:1rem; font-weight:800; }
.step-card p { margin-top:.5rem; color:#94a3b8; font-size:.82rem; line-height:1.6; }
.gallery-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); grid-auto-rows:220px; gap:.75rem; }
.gallery-item { overflow:hidden; border-radius:1rem; background:#172033; }
.gallery-item-1 { grid-column:span 2; }
.gallery-item img { width:100%; height:100%; object-fit:cover; transition:transform .45s ease; }
.gallery-item:hover img { transform:scale(1.035); }
.floating-contact { position:fixed; right:1.1rem; bottom:1.1rem; z-index:50; display:flex; flex-direction:column; gap:.65rem; opacity:1; transition:opacity .2s ease,transform .2s ease; }
.hero-in-view .floating-contact { opacity:0; pointer-events:none; transform:translateY(12px); }
.float-button { display:flex; align-items:center; justify-content:center; width:58px; height:58px; padding:0; border:1px solid rgba(255,255,255,.2); border-radius:50%; color:#fff; box-shadow:0 12px 30px rgba(0,0,0,.25); transition:.2s ease; }
.float-button:hover { transform:translateX(-3px); }
.float-button svg { width:24px; }
.float-button span { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.float-call { background:#1268e8; }
.float-whatsapp { background:#16a34a; }
.reveal { opacity:0; transform:translateY(18px); transition:opacity .65s ease,transform .65s ease; }
.reveal.is-visible { opacity:1; transform:translateY(0); }
@keyframes marquee { to { transform:translateX(-50%); } }
@media (max-width:900px) { .why-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .brand-logo-frame { width:190px; } .porto-logo-frame { width:175px; } .women-panel { grid-template-columns:1fr; } .women-image { min-height:360px; } .women-image::after { background:linear-gradient(0deg,#07152d 0%,transparent 42%); } .women-copy { padding:2rem; } .gallery-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:639px) {
  .site-header>div { padding-block:.65rem; } .brand-lockup { width:100%; justify-content:center; gap:.6rem; } .brand-logo-frame { width:166px; height:52px; } .brand-divider { height:38px; } .porto-logo-frame { width:145px; height:44px; padding:.65rem .75rem; }
  .hero-section,.hero-content { min-height:820px; } .hero-photo { object-position:62% center; } .hero-overlay { background:linear-gradient(180deg,rgba(3,10,25,.84),rgba(3,10,25,.97)); } .hero-content { justify-content:center; gap:1rem; padding-top:6rem; padding-bottom:1.5rem; }
  .hero-eyebrow { margin-bottom:.7rem; font-size:.62rem; letter-spacing:.1em; } .hero-copy h1 { font-size:2rem; line-height:1.06; } .hero-subtitle { margin-top:.85rem; font-size:.86rem; line-height:1.5; }
  .hero-actions { display:grid; width:100%; gap:.6rem; } .hero-cta { width:100%; min-height:48px; }
  .hero-benefits { grid-template-columns:repeat(2,minmax(0,1fr)); gap:.4rem; width:100%; } .hero-benefit { flex-direction:row; align-items:center; min-height:92px; gap:.55rem; padding:.7rem; border-radius:.85rem; } .benefit-icon { width:32px; height:32px; flex-basis:32px; border-radius:.6rem; } .benefit-icon svg { width:18px; height:18px; } .hero-benefit strong { font-size:.69rem; line-height:1.18; } .hero-benefit small { font-size:.56rem; line-height:1.25; }
  .primary-action { width:100%; }
  .why-section,.services-section,.women-section,.location-section { padding-block:3.5rem; } .why-grid { grid-template-columns:1fr; } .why-card { min-height:auto; } .service-card { min-height:auto; }
  .women-panel { border-radius:1.35rem; } .women-image { min-height:0; height:310px; } .women-copy { padding:1.5rem; } .women-copy h2 { font-size:1.75rem; } .women-highlights { display:grid; grid-template-columns:1fr; } .gallery-grid { grid-auto-rows:150px; } .gallery-item-1 { grid-column:span 2; }
  .floating-contact { right:.75rem; bottom:.75rem; left:auto; flex-direction:column; } .float-button { width:58px; height:58px; }
  .reveal { opacity:1; transform:none; transition:none; }
  footer { padding-bottom:6rem !important; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .reveal { opacity:1; transform:none; transition:none; } .brand-marquee-track { animation-play-state:paused; } }