/* ===================================================================
   VELATORIOS THAMES — sistema visual (Fase 4)
   Una propuesta de Zuccotti Hnos. Sitio de un solo tema, siempre claro.
   =================================================================== */

:root{
  --navy:#0B1F33;
  --navy-deep:#071624;
  --paper:#FAF9F7;
  --mist:#E9ECEF;
  --silver:#B8BDC5;
  --ink:#1C2230;
  --ink-soft:#454E5C;
  --ink-faint:#7C8698;
  --brass:#B5976A;
  --brass-ink:#73593D;
  --line:#E4E2DC;
  --line-on-navy:#33455A;
  --white:#FFFFFF;
  --whatsapp:#2F6B52;
  --whatsapp-deep:#234F3D;
  --whatsapp-ink:#0A3820;

  --radius-sm:4px;
  --radius-md:8px;
  --radius-pill:100px;
  --shadow-card:0 1px 2px rgba(11,31,51,.06), 0 12px 28px rgba(11,31,51,.12);
  --shadow-float:0 8px 24px rgba(11,31,51,.28);

  --space-1:8px; --space-2:16px; --space-3:24px; --space-4:32px;
  --space-5:48px; --space-6:64px; --space-7:96px;

  --container:1180px;
  --ease:cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.01ms !important; transition-duration:.01ms !important;}
}

body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Archivo",system-ui,-apple-system,sans-serif;
  line-height:1.6; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:"Fraunces",Georgia,serif; font-weight:600; margin:0;
  color:var(--ink); text-wrap:balance; line-height:1.2;
}
p{margin:0 0 1em; color:var(--ink-soft); max-width:62ch;}
p:last-child{margin-bottom:0;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
button{font-family:inherit;}
:focus-visible{outline:2.5px solid var(--brass); outline-offset:3px;}

.container{max-width:var(--container); margin:0 auto; padding:0 24px;}
.skip-link{
  position:absolute; left:-9999px; top:0; background:var(--navy); color:#fff;
  padding:12px 20px; border-radius:0 0 6px 0; z-index:200; font-weight:600;
}
.skip-link:focus{left:0;}

.eyebrow{
  font-family:"IBM Plex Mono",monospace; font-size:12px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--brass-ink); margin:0 0 10px;
}
.eyebrow.on-navy{color:var(--brass);}
.data{font-family:"IBM Plex Mono",monospace;}

/* ---------- micro-bar ---------- */
.micro-bar{background:#081726; color:var(--silver);}
.micro-bar-inner{
  display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap;
  padding:7px 24px; font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.03em;
}
.micro-bar-inner span{display:inline-flex; align-items:center; gap:6px;}
.micro-bar-inner svg{width:12px; height:12px; stroke:var(--brass); fill:none; stroke-width:2;}
.micro-bar-divider{width:1px; height:12px; background:var(--line-on-navy);}
@media (max-width:560px){ .micro-bar-inner .micro-bar-divider, .micro-bar-inner .hide-mobile{display:none;} }

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:100; background:rgba(250,249,247,.94);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--line);
  transition:box-shadow .2s var(--ease);
}
.site-header.scrolled{box-shadow:0 6px 20px rgba(11,31,51,.08);}
.site-header .bar{display:flex; align-items:center; justify-content:space-between; height:76px; gap:20px;}
.brand{display:flex; flex-direction:column; line-height:1.15;}
.brand .name{font-family:"Fraunces",serif; font-weight:600; font-size:21px; letter-spacing:.01em;}
.brand .parent{font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint);}
.main-nav{display:flex; gap:28px; align-items:center;}
.main-nav a{position:relative; font-size:14.5px; font-weight:500; color:var(--ink-soft); padding:6px 0; transition:color .18s var(--ease);}
.main-nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--brass);
  transform:scaleX(0); transform-origin:left; transition:transform .25s var(--ease);
}
.main-nav a:hover{color:var(--navy);}
.main-nav a:hover::after, .main-nav a[aria-current="page"]::after{transform:scaleX(1);}
.main-nav a[aria-current="page"]{color:var(--navy);}
.header-actions{display:flex; align-items:center; gap:14px;}
.tel-inline{display:flex; align-items:center; gap:8px; font-family:"IBM Plex Mono",monospace; font-size:14px; color:var(--ink);}
.tel-inline svg{width:17px; height:17px; stroke:var(--brass-ink); fill:none; stroke-width:1.8;}
.nav-toggle{display:none; background:none; border:1px solid var(--line); border-radius:var(--radius-sm); width:42px; height:42px; align-items:center; justify-content:center; cursor:pointer;}
.nav-toggle svg{width:20px; height:20px; stroke:var(--ink); fill:none; stroke-width:1.8;}
.mobile-nav{display:none;}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-weight:600; font-size:14.5px; border-radius:var(--radius-sm); border:none;
  padding:14px 28px; cursor:pointer; transition:background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease), transform .12s var(--ease);
  white-space:nowrap;
}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--navy); color:#fff;}
.btn-primary:hover{background:var(--navy-deep);}
.btn-outline{background:transparent; color:var(--navy); border:1.5px solid var(--navy);}
.btn-outline:hover{background:var(--navy); color:#fff;}
.btn-outline-onnavy{background:transparent; color:var(--mist); border:1.5px solid var(--silver);}
.btn-outline-onnavy:hover{background:rgba(255,255,255,.08); border-color:var(--brass); color:#fff;}
.btn-whatsapp{background:var(--whatsapp); color:#fff; border-radius:var(--radius-pill); padding:14px 26px;}
.btn-whatsapp:hover{background:var(--whatsapp-deep);}
.btn-whatsapp svg{width:18px; height:18px; fill:currentColor;}
.btn-lg{padding:16px 32px; font-size:15.5px;}
.btn-sm{padding:10px 20px; font-size:13.5px;}
.btn-block{width:100%;}
.cta-group{display:flex; flex-wrap:wrap; gap:14px;}

/* ---------- sections / layout ---------- */
section{padding:var(--space-7) 0;}
section.tight{padding:var(--space-6) 0;}
.section-head{max-width:660px; margin:0 0 var(--space-4);}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center;}
.bg-mist{background:var(--mist);}
.bg-navy{background:linear-gradient(155deg,#0F2740 0%,#0B1F33 55%,#081726 100%); color:#fff;}
.bg-navy h1,.bg-navy h2,.bg-navy h3,.bg-navy h4{color:#fff;}
.bg-navy p{color:#C7CEDA;}
.bg-navy .line{border-color:var(--line-on-navy);}

.grid{display:grid; gap:var(--space-3);}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
@media (max-width:900px){ .grid-3,.grid-4{grid-template-columns:repeat(2,1fr);} }
@media (max-width:640px){ .grid-2,.grid-3,.grid-4{grid-template-columns:1fr;} }

/* ---------- hero ---------- */
.hero{background:linear-gradient(155deg,#0F2740 0%,#0B1F33 55%,#081726 100%); color:#fff; padding-top:var(--space-5);}
.hero .hero-text{padding-bottom:var(--space-5); max-width:800px;}
.hero h1{font-size:clamp(30px,4.6vw,50px); margin-bottom:18px; color:#fff;}
.hero .lede{font-size:17.5px; color:#C7CEDA; max-width:52ch; margin-bottom:28px;}
.hero-photo{width:100%; overflow:hidden; aspect-ratio:2.2/1; margin:0;}
.hero-photo img{width:100%; height:100%; object-fit:cover; filter:saturate(1.08) contrast(1.05);}
@media (max-width:900px){ .hero-photo{aspect-ratio:4/3;} }
@media (max-width:560px){ .hero-photo{aspect-ratio:1/1;} }

.page-hero{background:linear-gradient(155deg,#0F2740 0%,#0B1F33 55%,#081726 100%); color:#fff; padding:var(--space-6) 0 var(--space-5);}
.page-hero h1{font-size:clamp(28px,4vw,42px); max-width:20ch; color:#fff;}
.page-hero .lede{color:#C7CEDA; font-size:16.5px; max-width:60ch; margin-top:14px;}
.breadcrumb{font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--silver); margin-bottom:18px;}
.breadcrumb a{color:var(--silver); border-bottom:1px solid transparent;}
.breadcrumb a:hover{border-color:var(--brass); color:#fff;}

/* ---------- 24hs strip ---------- */
.strip-24{background:linear-gradient(155deg,#0F2740 0%,#0B1F33 55%,#081726 100%); color:#fff; padding:var(--space-4) 0;}
.strip-24 .wrap{display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;}
.strip-24 h3{font-size:20px; margin-bottom:4px; color:#fff;}
.strip-24 p{color:#C7CEDA; margin:0; font-size:14.5px;}

/* ---------- cards ---------- */
.card{background:#fff; border:1px solid var(--line); border-radius:var(--radius-md); padding:var(--space-3); box-shadow:var(--shadow-card);}
.svc-card svg{width:28px; height:28px; stroke:var(--brass-ink); fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; margin-bottom:14px;}
.svc-card h3{font-size:18px; margin-bottom:8px;}
.svc-card p{font-size:14px; margin-bottom:14px;}
.svc-card .link{font-size:13.5px; font-weight:600; color:var(--navy); display:inline-flex; align-items:center; gap:5px;}
.svc-card .link svg{width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2;}

.step-list{counter-reset:step; display:flex; flex-direction:column; gap:0;}
.step{display:flex; gap:20px; padding:22px 0; border-bottom:1px solid var(--line);}
.step:last-child{border-bottom:none;}
.step .num{counter-increment:step; font-family:"Fraunces",serif; font-weight:600; font-size:26px; color:var(--brass-ink); width:46px; flex:none;}
.step h3{font-size:17px; margin-bottom:5px;}
.step p{font-size:14.5px; margin:0;}

.photo-card{border-radius:var(--radius-md); overflow:hidden; aspect-ratio:4/5; box-shadow:var(--shadow-card); position:relative;}
.photo-card img{width:100%; height:100%; object-fit:cover; filter:saturate(1.08) contrast(1.05); transition:transform .5s var(--ease);}
.photo-card:hover img{transform:scale(1.04);}
.photo-card figcaption{position:absolute; left:0; right:0; bottom:0; padding:14px 16px; background:linear-gradient(180deg,transparent,rgba(11,31,51,.82)); color:#fff; font-size:13px; font-weight:500;}
.photo-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-2);}
@media (max-width:900px){ .photo-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .photo-grid{grid-template-columns:1fr;} }

.feature-row{display:flex; gap:14px; align-items:flex-start; padding:16px 0; border-bottom:1px solid var(--line);}
.feature-row:last-child{border-bottom:none;}
.feature-row svg{width:22px; height:22px; stroke:var(--brass-ink); fill:none; stroke-width:1.7; flex:none; margin-top:2px;}
.feature-row h4{font-size:15.5px; margin-bottom:3px;}
.feature-row p{font-size:13.5px; margin:0;}

.testi-empty{background:#F2F0EA; border:1.5px dashed #CFC8B8; border-radius:var(--radius-md); padding:var(--space-4); text-align:center; color:#8A857A; font-size:14px;}

.testi-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-3);}
@media (max-width:900px){ .testi-grid{grid-template-columns:1fr;} }
.testi-card{display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:var(--radius-md); padding:var(--space-3); box-shadow:var(--shadow-card);}
.testi-stars{color:var(--brass); letter-spacing:2px; font-size:14px; margin-bottom:12px;}
.testi-quote{font-family:"Fraunces",serif; font-style:italic; font-size:15px; color:var(--ink); line-height:1.55; margin-bottom:18px; flex:1;}
.testi-author{display:flex; align-items:baseline; justify-content:space-between; gap:10px; font-size:13px; padding-top:14px; border-top:1px solid var(--line);}
.testi-author .name{font-weight:600; color:var(--ink);}
.testi-author .sede{font-family:"IBM Plex Mono",monospace; font-size:10.5px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.04em; white-space:nowrap;}
.testi-source{margin-top:10px; display:flex; align-items:center; gap:6px; font-family:"IBM Plex Mono",monospace; font-size:10.5px; color:var(--ink-faint);}
.testi-source svg{width:12px; height:12px;}

.trust-band{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-3); text-align:center;}
.trust-band .item .n{font-family:"Fraunces",serif; font-size:32px; font-weight:600; color:var(--brass);}
.trust-band .item .l{font-family:"IBM Plex Mono",monospace; font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--silver); margin-top:4px;}
@media (max-width:768px){ .trust-band{grid-template-columns:repeat(2,1fr); gap:var(--space-4);} }

/* ---------- FAQ ---------- */
.faq-item{border-bottom:1px solid var(--line);}
.faq-q{width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; background:none; border:none; text-align:left; padding:20px 0; cursor:pointer; font-size:16px; font-weight:600; color:var(--ink); font-family:"Archivo",sans-serif;}
.faq-q svg{width:18px; height:18px; stroke:var(--brass-ink); fill:none; stroke-width:2; flex:none; transition:transform .25s var(--ease);}
.faq-item[data-open="true"] .faq-q svg{transform:rotate(180deg);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .3s var(--ease);}
.faq-a p{padding:0 0 20px; font-size:14.5px;}
.faq-item[data-open="true"] .faq-a{max-height:400px;}

/* ---------- forms ---------- */
.map-embed{border-radius:var(--radius-md); overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow-card);}
.map-embed iframe{width:100%; height:360px; border:0; display:block;}
.contact-card{background:#fff; border:1px solid var(--line); border-radius:var(--radius-md); padding:var(--space-4); box-shadow:var(--shadow-card);}
.contact-card dl{display:grid; grid-template-columns:auto 1fr; gap:10px 16px; margin:0;}
.contact-card dt{font-family:"IBM Plex Mono",monospace; font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-faint); align-self:center;}
.contact-card dd{margin:0; font-size:15px; color:var(--ink);}

/* ---------- footer ---------- */
.site-footer{background:var(--navy); color:#C7CEDA; padding:var(--space-6) 0 var(--space-4);}
.site-footer h4{color:#fff; font-family:"IBM Plex Mono",monospace; font-size:12px; letter-spacing:.08em; text-transform:uppercase; margin-bottom:16px; font-weight:600;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:var(--space-4);}
.footer-grid a{display:block; font-size:14px; color:#C7CEDA; margin-bottom:10px; transition:color .15s;}
.footer-grid a:hover{color:var(--brass);}
.footer-brand .name{font-family:"Fraunces",serif; font-size:22px; color:#fff; margin-bottom:8px; font-weight:600;}
.footer-brand p{font-size:13.5px; max-width:34ch;}
.footer-social{display:flex; gap:12px; margin-top:14px;}
.footer-social a{display:flex; align-items:center; justify-content:center; width:36px; height:36px; border:1px solid var(--line-on-navy); border-radius:50%; margin:0; transition:border-color .15s, background .15s;}
.footer-social a:hover{border-color:var(--brass); background:rgba(201,164,104,.12);}
.footer-social svg{width:15px; height:15px; fill:#C7CEDA; stroke:none;}
.footer-bottom{border-top:1px solid var(--line-on-navy); margin-top:var(--space-5); padding-top:var(--space-3); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:12.5px; color:var(--ink-faint);}
@media (max-width:900px){ .footer-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .footer-grid{grid-template-columns:1fr;} }

/* ---------- floating whatsapp + mobile sticky bar ---------- */
.float-whatsapp{
  position:fixed; right:22px; bottom:22px; z-index:90; width:58px; height:58px; border-radius:50%;
  background:var(--whatsapp); display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-float);
  transition:transform .18s var(--ease);
}
.float-whatsapp:hover{transform:scale(1.06);}
.float-whatsapp svg{width:28px; height:28px; fill:#fff;}
.mobile-bar{display:none;}
@media (max-width:900px){
  .float-whatsapp{display:none;}
  .mobile-bar{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:95; height:64px;
    background:#fff; border-top:1px solid var(--line); box-shadow:0 -4px 18px rgba(11,31,51,.09);
  }
  .mobile-bar a{flex:1; display:flex; align-items:center; justify-content:center; gap:8px; font-weight:600; font-size:14.5px;}
  .mobile-bar a.call{color:var(--navy); border-right:1px solid var(--line);}
  .mobile-bar a.wa{color:var(--whatsapp-deep); background:#EEF2EF;}
  .mobile-bar svg{width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.8;}
  body{padding-bottom:64px;}
}

/* ---------- responsive nav ---------- */
@media (max-width:900px){
  .main-nav{display:none;}
  .tel-inline{display:none;}
  .nav-toggle{display:flex;}
  .mobile-nav{
    display:none; position:absolute; top:76px; left:0; right:0; background:#fff;
    border-bottom:1px solid var(--line); box-shadow:0 12px 24px rgba(11,31,51,.08);
  }
  .mobile-nav.open{display:block;}
  .mobile-nav a{display:block; padding:16px 24px; border-bottom:1px solid var(--line); font-weight:500;}
  .mobile-nav a:last-child{border-bottom:none;}
}

/* ---------- reveal on load ----------
   Runs automatically on paint (not gated on scroll/JS), so content is never
   left invisible if a script fails or an element loads already in view. */
@keyframes reveal-in{ from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:translateY(0);} }
.reveal{animation:reveal-in .6s var(--ease) both;}
@media (prefers-reduced-motion:reduce){ .reveal{animation:none;} }

/* ---------- utility ---------- */
.center{text-align:center;}
.mt-0{margin-top:0;}
.small{font-size:13.5px; color:var(--ink-faint);}
.divider{height:1px; background:var(--line); border:none; margin:var(--space-4) 0;}