/* =====================================================================
LIMPIO RESIDENTIAL · Variante editorial ("Sunlit greenhouse" adaptada)
Canvas menta pálido, papel, navy como texto y secciones oscuras,
un solo acento (menta viva). Serif solo en titulares de 36px+.
Sin sombras: la profundidad sale del apilado de colores.
Radios: 4px en botones/inputs/tags, 16px en tarjetas/superficies.
===================================================================== */
:root{
--canvas:#EDF3EE; /* pale mint canvas (equivale a pale sage) */
--paper:#FCFDFC; /* paper white */
--ink:#0D1B2A; /* navy Limpio: texto principal y secciones oscuras */
--ink-2:#3B4A5A; /* texto secundario */
--deep:#0D1B2A;
--deep-2:#122A3D; /* navy suave para tarjetas dentro de navy */
--teal:#0F4C4A; /* verde-azul profundo: 2do tono oscuro */
--jade:#008F6A; /* jade Limpio: hover, iconos */
--jade-dark:#00745a;
--accent:#9BF0C4; /* menta viva: el único acento cromático */
--accent-dark:#6FE0A6;
--hair:rgba(13,27,42,.18);
--hair-light:rgba(255,255,255,.18);
--r-sm:4px; --r-lg:16px; --r-pill:9999px;
--maxw:1200px;
--serif:'Fraunces', 'Source Serif 4', Georgia, 'Times New Roman', serif;
--sans:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0; background:var(--canvas); color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.3; -webkit-font-smoothing:antialiased;}
p{margin:0;} a{color:inherit;} img{max-width:100%; display:block;} svg{display:block;}
h1,h2,h3,h4{margin:0; font-weight:400;}
h1,h2{font-family:var(--serif); font-optical-sizing:auto; color:var(--ink); letter-spacing:-0.02em; line-height:1.1;}
h3,h4{font-family:var(--sans); font-weight:500; color:var(--ink);}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}
.hp-field{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px;}
section{padding:88px 0;}
@media (max-width:768px){ section{padding:56px 0;} }
.reveal{opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease;}
.reveal.in{opacity:1; transform:none;}
/* ---------- Tipografía ---------- */
.eyebrow{display:inline-block; font-size:13px; font-weight:500; letter-spacing:.06em; text-transform:uppercase; color:var(--ink); margin-bottom:14px;}
.section-head{max-width:720px;}
.section-head h2{font-size:clamp(36px, 4.2vw, 56px); letter-spacing:-0.03em;}
.section-head p{margin-top:18px; font-size:18px; line-height:1.44; color:var(--ink-2); max-width:56ch;}
/* ---------- Botones ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--sans); font-size:16px; font-weight:500; padding:12px 20px; border-radius:var(--r-sm); border:1px solid transparent; cursor:pointer; text-decoration:none; white-space:nowrap; transition:background .18s ease, color .18s ease, border-color .18s ease;}
.btn-primary{background:var(--accent); color:var(--ink);}
.btn-primary:hover{background:var(--jade); color:#fff;}
.btn-primary:disabled{opacity:.7; cursor:progress;}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--ink);}
.btn-ghost:hover{background:var(--ink); color:var(--paper);}
.on-dark .btn-ghost{color:var(--paper); border-color:var(--paper);}
.on-dark .btn-ghost:hover{background:var(--paper); color:var(--ink);}
/* ---------- Barra de anuncio ---------- */
.announce{background:var(--paper); border-bottom:1px solid var(--hair); font-size:14px; text-align:center; padding:9px 16px; color:var(--ink);}
.announce a{display:inline-block; margin-left:10px; background:var(--accent); color:var(--ink); text-decoration:none; font-weight:500; padding:3px 10px; border-radius:var(--r-sm);}
.announce a:hover{background:var(--jade); color:#fff;}
/* ---------- Nav ---------- */
.nav{position:sticky; top:0; z-index:40; background:var(--paper); border-bottom:1px solid var(--hair);}
.nav-inner{display:flex; align-items:center; justify-content:space-between; height:68px; gap:18px;}
.nav-logo img{height:24px; width:auto;}
.nav-right{display:flex; align-items:center; gap:8px;}
.nav-links{display:flex; align-items:center; gap:2px; list-style:none; margin:0; padding:0;}
.nav-links a{display:inline-block; text-decoration:none; font-size:15px; font-weight:500; color:var(--ink); padding:6px 14px; border-radius:var(--r-sm);}
.nav-links a:hover{background:var(--canvas);}
.nav-call{display:inline-flex; align-items:center; gap:8px; margin-left:8px; padding:9px 14px; border:1px solid var(--ink); border-radius:var(--r-sm); color:var(--ink); text-decoration:none; font-size:15px; font-weight:500; white-space:nowrap;}
.nav-call svg{width:16px; height:16px; stroke:var(--ink); fill:none; stroke-width:1.8;}
.nav-call:hover{background:var(--ink); color:var(--paper);} .nav-call:hover svg{stroke:var(--paper);}
.nav-cta{margin-left:4px;}
.menu-toggle{display:none; background:none; border:1px solid var(--ink); border-radius:var(--r-sm); color:var(--ink); font-size:20px; line-height:1; cursor:pointer; padding:6px 10px;}
@media (max-width:1040px){ .nav-call .nav-call-txt{display:none;} }
@media (max-width:900px){
.menu-toggle{display:block;}
.nav-cta{display:none;}
.nav-links{display:none; position:absolute; top:68px; left:0; right:0; flex-direction:column; align-items:stretch; gap:0; background:var(--paper); border-top:1px solid var(--hair); border-bottom:1px solid var(--hair);}
.nav-links.open{display:flex;}
.nav-links li + li{border-top:1px solid var(--hair);}
.nav-links a{display:block; padding:16px 24px; border-radius:0;}
}
/* ---------- Hero editorial (dos columnas asimétricas) ---------- */
.hero{padding:40px 0 64px;}
.hero-grid{display:grid; grid-template-columns:1fr 1.1fr; gap:24px; align-items:stretch;}
@media (max-width:900px){ .hero-grid{grid-template-columns:1fr;} }
.hero-photo{background:var(--paper); border-radius:var(--r-lg); overflow:hidden; min-height:420px; display:flex;}
.hero-photo img{width:100%; height:100%; object-fit:cover; object-position:center 30%;}
.hero-copy{display:flex; flex-direction:column; justify-content:center; padding:16px 0 16px 24px;}
@media (max-width:900px){ .hero-copy{padding:8px 0 0;} }
.hero-kicker{display:inline-flex; align-items:center; gap:8px; align-self:flex-start; background:var(--accent); color:var(--ink); font-size:13px; font-weight:500; letter-spacing:.04em; text-transform:uppercase; padding:5px 10px; border-radius:var(--r-sm); margin-bottom:22px;}
.hero h1{font-size:clamp(44px, 6.2vw, 84px); line-height:.95; letter-spacing:-0.035em; max-width:13ch;}
.hero-sub{margin-top:24px; font-size:18px; line-height:1.44; color:var(--ink-2); max-width:52ch;}
.hero-actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:28px;}
.hero-call{display:inline-flex; align-items:center; gap:10px; margin-top:22px; text-decoration:none; color:var(--ink);}
.hero-call svg{width:18px; height:18px; stroke:var(--jade); fill:none; stroke-width:1.8;}
.hero-call .hc-num{font-weight:600; font-size:17px; white-space:nowrap;}
@media (max-width:520px){ .hero-call{flex-wrap:wrap; gap:6px 10px;} .fact{min-height:0;} .fact b{margin-top:10px;} }
.hero-call .hc-lbl{font-size:14px; color:var(--ink-2);}
.hero-chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:26px;}
.hero-chips a{text-decoration:none; color:var(--ink); font-size:14px; font-weight:500; padding:6px 12px; border-radius:var(--r-pill); background:var(--paper); border:1px solid var(--hair);}
.hero-chips a:hover{border-color:var(--ink);}
/* tarjetas de dato bajo el hero (estilo "stat card", solo hechos) */
.hero-facts{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:24px;}
@media (max-width:900px){ .hero-facts{grid-template-columns:repeat(2,1fr);} }
.fact{border-radius:var(--r-lg); padding:20px 22px; min-height:128px; display:flex; flex-direction:column; justify-content:space-between;}
.fact small{font-size:12px; font-weight:500; letter-spacing:.06em; text-transform:uppercase;}
.fact b{font-family:var(--serif); font-weight:400; font-size:36px; letter-spacing:-0.02em; line-height:1; margin-top:14px;}
.fact span{display:block; margin-top:6px; font-size:14px; line-height:1.3;}
.fact.dark{background:var(--ink); color:var(--paper);} .fact.dark small{color:var(--accent);} .fact.dark span{color:rgba(255,255,255,.72);}
.fact.teal{background:var(--teal); color:var(--paper);} .fact.teal small{color:var(--accent);} .fact.teal span{color:rgba(255,255,255,.75);}
.fact.paper{background:var(--paper); color:var(--ink);} .fact.paper small{color:var(--ink-2);} .fact.paper span{color:var(--ink-2);}
.fact.accent{background:var(--accent); color:var(--ink);} .fact.accent small{color:var(--ink);} .fact.accent span{color:var(--ink);}
/* ---------- Oferta ---------- */
.offer{background:var(--paper);}
.offer-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:36px;}
@media (max-width:820px){ .offer-grid{grid-template-columns:1fr;} }
.offer-card{display:grid; grid-template-columns:auto 1fr; gap:22px; align-items:center; background:var(--canvas); border-radius:var(--r-lg); padding:24px;}
@media (max-width:520px){ .offer-card{grid-template-columns:1fr;} }
.offer-badge{width:108px; height:108px; border-radius:var(--r-lg); background:var(--accent); color:var(--ink); display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1;}
.offer-badge b{font-family:var(--serif); font-weight:400; font-size:40px; letter-spacing:-0.03em;}
.offer-badge small{font-size:11px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; margin-top:6px;}
.offer-badge.jade{background:var(--ink); color:var(--paper);}
.offer-card h3{font-size:22px; font-weight:500; letter-spacing:-0.01em;}
.offer-card p{margin-top:8px; font-size:16px; line-height:1.44; color:var(--ink-2);}
.offer-card p strong{color:var(--ink); font-weight:500;}
.offer-fine{margin-top:16px; font-size:14px; color:var(--ink-2); line-height:1.4;}
/* ---------- Servicios ---------- */
.services{background:var(--canvas);}
.svc-grid{display:grid; gap:12px; margin-top:36px;}
.svc{background:var(--paper); border-radius:var(--r-lg); overflow:hidden;}
.svc summary{list-style:none; cursor:pointer; padding:24px; display:grid; grid-template-columns:auto 1fr auto; gap:18px; align-items:start;}
.svc summary::-webkit-details-marker{display:none;}
.svc-ic{width:44px; height:44px; border-radius:var(--r-sm); background:var(--canvas); display:flex; align-items:center; justify-content:center; flex:none;}
.svc-ic svg{width:22px; height:22px; stroke:var(--ink); fill:none; stroke-width:1.6;}
.svc h3{font-family:var(--serif); font-weight:400; font-size:36px; letter-spacing:-0.02em; line-height:1.1;}
.svc summary > div:nth-child(2){max-width:760px;}
.svc .svc-tag{display:inline-block; margin-top:10px; margin-right:6px; font-size:12px; font-weight:500; letter-spacing:.06em; text-transform:uppercase; color:var(--ink); background:var(--accent); padding:3px 8px; border-radius:var(--r-sm);}
.svc .svc-lead{margin-top:12px; font-size:16px; line-height:1.44; color:var(--ink-2);}
.svc-toggle{width:36px; height:36px; border-radius:var(--r-sm); border:1px solid var(--ink); display:flex; align-items:center; justify-content:center; color:var(--ink); font-size:20px; line-height:1; transition:transform .2s ease; flex:none;}
.svc[open] .svc-toggle{transform:rotate(45deg); background:var(--ink); color:var(--paper);}
.svc-body{padding:0 24px 24px; border-top:1px solid var(--hair);}
.svc-body h4{margin:22px 0 10px; font-size:12px; font-weight:500; letter-spacing:.06em; text-transform:uppercase; color:var(--ink);}
.svc-body ul{margin:0; padding:0; list-style:none; display:grid; gap:8px;}
.svc-body li{position:relative; padding-left:22px; font-size:15px; line-height:1.4; color:var(--ink);}
.svc-body li::before{content:""; position:absolute; left:0; top:7px; width:8px; height:8px; border-radius:2px; background:var(--jade);}
.svc-body li b{font-weight:500;}
.svc-cols{display:grid; grid-template-columns:1fr 1fr; gap:0 32px;}
@media (max-width:560px){ .svc-cols{grid-template-columns:1fr;} }
.svc-note{margin-top:20px; padding:14px 16px; border-radius:var(--r-sm); background:var(--canvas); font-size:14px; line-height:1.44; color:var(--ink-2);}
.svc-note strong{color:var(--ink); font-weight:500;}
.svc-cta{margin-top:18px;}
/* ---------- Comparativa ---------- */
.compare{margin-top:56px;}
.compare-head{display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:18px;}
.compare-head h3{font-family:var(--serif); font-weight:400; font-size:36px; letter-spacing:-0.02em;}
.compare-head p{font-size:16px; color:var(--ink-2); flex:1 1 320px; line-height:1.44;}
.compare-wrap{overflow-x:auto; border-radius:var(--r-lg); background:var(--paper);}
.compare table{width:100%; border-collapse:collapse; min-width:520px;}
.compare th, .compare td{padding:14px 18px; text-align:left; font-size:15px; border-top:1px solid var(--hair);}
.compare thead th{border-top:0; background:var(--ink); color:var(--paper); font-size:13px; font-weight:500; letter-spacing:.04em; text-transform:uppercase;}
.compare thead th:not(:first-child){text-align:center; width:150px;}
.compare td:not(:first-child){text-align:center;}
.compare td .yes{display:inline-flex; width:22px; height:22px; border-radius:var(--r-sm); background:var(--accent); color:var(--ink); align-items:center; justify-content:center; font-size:13px; font-weight:600;}
.compare td .no{display:inline-block; width:16px; height:1px; background:var(--hair); vertical-align:middle;}
/* ---------- Proceso (banda navy) ---------- */
#how-res{background:var(--ink); color:var(--paper);}
#how-res .eyebrow{color:var(--accent);}
#how-res .section-head h2{color:var(--paper);}
#how-res .section-head p{color:rgba(255,255,255,.72);}
.process-row{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:40px;}
@media (max-width:820px){ .process-row{grid-template-columns:1fr;} }
.process-step{background:var(--deep-2); border-radius:var(--r-lg); padding:24px;}
.step-num{font-family:var(--serif); font-size:36px; line-height:1; color:var(--accent); margin-bottom:20px;}
.process-step h3{color:var(--paper); font-size:18px; font-weight:500; line-height:1.3;}
.process-step p{margin-top:10px; font-size:15px; line-height:1.44; color:rgba(255,255,255,.72);}
/* ---------- Galería ---------- */
.gallery{background:var(--canvas);}
.ba-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:36px;}
@media (max-width:760px){ .ba-grid{grid-template-columns:1fr;} }
.ba-card{background:var(--paper); border-radius:var(--r-lg); overflow:hidden;}
.ba{position:relative; aspect-ratio:4/3; overflow:hidden; user-select:none; touch-action:pan-y; background:var(--deep-2); cursor:ew-resize;}
.ba img, .ba .ba-ph{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;}
.ba-after{clip-path:inset(0 0 0 var(--split, 50%));}
.ba .ba-ph{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; font-size:12px; font-weight:500; letter-spacing:.06em; text-transform:uppercase;}
.ba .ba-ph.before{padding-right:50%;} .ba .ba-ph.after{padding-left:50%;}
.ba-ph.before{background:repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 14px, transparent 14px 28px), var(--deep-2); color:rgba(255,255,255,.6);}
.ba-ph.after{background:var(--canvas); color:var(--ink-2);}
.ba-ph span{font-weight:400; letter-spacing:0; text-transform:none; font-size:13px; opacity:.8;}
.ba-handle{position:absolute; top:0; bottom:0; left:var(--split, 50%); width:2px; background:var(--paper); transform:translateX(-1px); pointer-events:none;}
.ba-handle::after{content:"\2190\2002\2192"; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:40px; height:40px; border-radius:var(--r-sm); background:var(--accent); color:var(--ink); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:600;}
.ba-lbl{position:absolute; top:12px; padding:4px 8px; border-radius:var(--r-sm); font-size:11px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; background:var(--ink); color:var(--paper); pointer-events:none;}
.ba-lbl.l{left:12px;} .ba-lbl.r{right:12px; background:var(--accent); color:var(--ink);}
.ba input[type=range]{position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize;}
.ba-cap{padding:16px 20px 18px;}
.ba-cap h3{font-size:18px; font-weight:500;}
.ba-cap p{margin-top:4px; font-size:14px; color:var(--ink-2); line-height:1.4;}
.gallery-note{margin-top:20px; font-size:14px; color:var(--ink-2); line-height:1.4;}
/* ---------- Gift cards ---------- */
.gift{background:var(--paper);}
.gift-grid{display:grid; grid-template-columns:1.05fr 1fr; gap:48px; align-items:start;}
@media (max-width:900px){ .gift-grid{grid-template-columns:1fr; gap:32px;} }
.gift-copy h2{font-size:clamp(36px, 4.2vw, 56px); letter-spacing:-0.03em;}
.gift-copy p{margin-top:18px; font-size:18px; color:var(--ink-2); line-height:1.44;}
.gift-occasions{display:flex; flex-wrap:wrap; gap:8px; margin-top:22px;}
.gift-occasions span{font-size:14px; font-weight:500; color:var(--ink); background:var(--canvas); padding:6px 12px; border-radius:var(--r-pill);}
.gift-steps{margin:26px 0 0; padding:0; list-style:none; display:grid; gap:12px;}
.gift-steps li{display:flex; gap:12px; align-items:flex-start; font-size:16px; line-height:1.44;}
.gift-steps .n{flex:none; width:26px; height:26px; border-radius:var(--r-sm); background:var(--accent); color:var(--ink); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:600; margin-top:1px;}
.gift-card-ui{background:var(--ink); color:var(--paper); border-radius:var(--r-lg); padding:28px;}
.gift-card-ui .gc-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:22px;}
.gift-card-ui .gc-top img{height:20px; width:auto;}
.gift-card-ui .gc-top span{font-size:12px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--accent);}
.gift-card-ui h3{color:var(--paper); font-family:var(--serif); font-weight:400; font-size:36px; letter-spacing:-0.02em;}
.gift-card-ui .gc-sub{margin-top:8px; font-size:14px; color:rgba(255,255,255,.7);}
.gift-form{margin-top:22px;}
.gift-form .row{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
@media (max-width:480px){ .gift-form .row{grid-template-columns:1fr;} }
.gift-form .field{margin-bottom:12px;}
.gift-form input, .gift-form select, .gift-form textarea{width:100%; border:1px solid var(--hair-light); border-radius:var(--r-sm); background:var(--deep-2); color:var(--paper); font-family:var(--sans); font-size:15px; padding:13px 14px; outline:none; resize:vertical;}
.gift-form input::placeholder, .gift-form textarea::placeholder{color:rgba(255,255,255,.5);}
.gift-form input:focus-visible, .gift-form select:focus-visible, .gift-form textarea:focus-visible{border-color:var(--accent);}
.gift-form select{appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml;utf8,"); background-repeat:no-repeat; background-position:right 12px center; background-size:16px;}
.gift-form select option{color:var(--ink);}
.gift-form textarea{min-height:84px;}
.gift-form .btn{width:100%; margin-top:4px;}
.form-disclaimer{margin:6px 0 14px; font-size:13px; color:var(--ink-2); text-align:center; line-height:1.4;}
.gift-form .form-disclaimer{color:rgba(255,255,255,.6);}
.detail-error{display:none; margin:-4px 0 12px; font-size:13px; font-weight:500; color:#b3261e;}
.gift-form .detail-error{color:#ffb4b4;}
.has-error .detail-error{display:block;}
.gift-success{display:none; align-items:flex-start; gap:12px; margin-top:20px; padding:18px 20px; background:var(--deep-2); border-radius:var(--r-sm);}
.gift-success.show{display:flex;}
.gift-success .tick{flex:none; width:26px; height:26px; border-radius:var(--r-sm); background:var(--accent); color:var(--ink); display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:600;}
.gift-success strong{display:block; color:var(--paper); font-size:15px; font-weight:500;}
.gift-success span span{display:block; margin-top:2px; font-size:14px; color:rgba(255,255,255,.7);}
/* ---------- Verificable + About ---------- */
.why-section{background:var(--canvas);}
.problem-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:36px;}
@media (max-width:760px){ .problem-grid{grid-template-columns:1fr;} }
.problem-card{background:var(--paper); border-radius:var(--r-lg); padding:24px;}
.problem-card h3{font-size:18px; font-weight:500; line-height:1.3;}
.problem-card p{margin-top:10px; font-size:15px; color:var(--ink-2); line-height:1.44;}
.about{background:var(--teal); color:var(--paper);}
.about-inner{max-width:760px;}
.about h2{color:var(--paper); font-size:clamp(36px, 4.2vw, 56px); letter-spacing:-0.03em;}
.about p{margin-top:22px; font-size:18px; line-height:1.5; color:rgba(255,255,255,.82);}
.about-badges{display:flex; flex-wrap:wrap; gap:8px; margin-top:28px;}
.about-badge{font-size:13px; font-weight:500; color:var(--paper); border:1px solid var(--hair-light); padding:6px 12px; border-radius:var(--r-pill);}
/* ---------- FAQ ---------- */
.faq{background:var(--paper);}
.faq .section-head{margin:0 auto; text-align:center;}
.faq-list{max-width:820px; margin:36px auto 0; display:grid; gap:8px;}
.faq-item{background:var(--canvas); border-radius:var(--r-lg);}
.faq-item summary{list-style:none; cursor:pointer; padding:18px 22px; display:flex; justify-content:space-between; align-items:center; gap:16px; font-weight:500; font-size:17px; color:var(--ink);}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:"+"; font-size:22px; line-height:1; color:var(--ink); transition:transform .2s ease; flex:none;}
.faq-item[open] summary::after{transform:rotate(45deg);}
.faq-item p{padding:0 22px 20px; font-size:16px; color:var(--ink-2); line-height:1.5;}
/* ---------- Área de servicio / mapa ---------- */
.area{background:var(--ink); color:var(--paper);}
.area .eyebrow{color:var(--accent);}
.area-grid{display:grid; grid-template-columns:1fr 1.05fr; gap:48px; align-items:start;}
@media (max-width:820px){ .area-grid{grid-template-columns:1fr; gap:28px;} }
.area-info h2{color:var(--paper); font-size:clamp(36px, 3.6vw, 48px); letter-spacing:-0.025em;}
.area-nap{margin-top:24px; list-style:none; padding:0;}
.area-nap li{display:flex; align-items:flex-start; gap:12px; margin-bottom:14px; font-size:16px; color:rgba(255,255,255,.82); line-height:1.44;}
.area-nap li .ic{width:20px; height:20px; margin-top:2px; stroke:var(--accent); fill:none; stroke-width:1.8; flex:none;}
.area-nap a{color:var(--paper); font-weight:500; text-decoration:underline;}
.area-nap a:hover{color:var(--accent);}
.area-note{margin-top:20px; font-size:15px; color:rgba(255,255,255,.62); line-height:1.5;}
.area-map{position:relative; border-radius:var(--r-lg); overflow:hidden; background:var(--deep-2);}
.area-map iframe{display:block; width:100%; height:460px; border:0;}
@media (max-width:820px){ .area-map iframe{height:320px;} }
.area-ring{position:absolute; top:50%; left:50%; width:372px; height:372px; margin:-186px 0 0 -186px; border-radius:50%; border:2px dashed rgba(155,240,196,.9); background:rgba(155,240,196,.14); pointer-events:none;}
.area-ring::after{content:"~50 mi"; position:absolute; top:8px; left:50%; transform:translateX(-50%); background:var(--accent); color:var(--ink); font-size:11px; font-weight:600; letter-spacing:.06em; padding:3px 9px; border-radius:var(--r-sm); white-space:nowrap;}
@media (max-width:820px){ .area-ring{width:250px; height:250px; margin:-125px 0 0 -125px;} }
.area-caption{margin-top:12px; font-size:14px; color:rgba(255,255,255,.6); line-height:1.4;}
.area-counties{margin-top:36px;}
.area-counties h3{font-size:17px; font-weight:500; color:var(--paper); margin-bottom:14px;}
.county{padding:14px 0; border-top:1px solid var(--hair-light);}
.county:last-child{border-bottom:1px solid var(--hair-light);}
.county-name{display:block; font-size:12px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); margin-bottom:6px;}
.county-list{font-size:15px; color:rgba(255,255,255,.8); line-height:1.5;}
/* ---------- Formulario ---------- */
.request-section{background:var(--canvas);}
.request-panel{max-width:560px; margin:0 auto; text-align:center; background:var(--paper); border-radius:var(--r-lg); padding:36px 32px;}
@media (max-width:520px){ .request-panel{padding:28px 20px;} }
.request-panel h2{font-size:clamp(36px, 3.6vw, 44px); letter-spacing:-0.025em;}
.request-panel > p{margin-top:12px; color:var(--ink-2); font-size:16px; line-height:1.44;}
.req-offer{display:inline-flex; align-items:center; gap:8px; margin-top:14px; font-size:13px; font-weight:500; color:var(--ink); background:var(--accent); padding:5px 10px; border-radius:var(--r-sm);}
.detail-form{margin-top:28px; text-align:left;}
.detail-form .field{margin-bottom:12px; position:relative;}
.detail-form input, .detail-form textarea, .detail-form select{width:100%; border:1px solid var(--hair); border-radius:var(--r-sm); background:var(--paper); font-family:var(--sans); font-size:15px; color:var(--ink); padding:13px 14px; outline:none; resize:vertical;}
.detail-form select{appearance:none; -webkit-appearance:none; padding-right:40px; background-image:url("data:image/svg+xml;utf8,"); background-repeat:no-repeat; background-position:right 12px center; background-size:16px;}
.detail-form select.placeholder{color:#7d8791;}
.detail-form textarea{min-height:120px;}
.detail-form input::placeholder, .detail-form textarea::placeholder{color:#8a939d;}
.detail-form input:focus-visible, .detail-form textarea:focus-visible, .detail-form select:focus-visible{border-color:var(--ink);}
.field-address input{padding-right:44px;}
.pin-ic{position:absolute; right:14px; top:50%; transform:translateY(-50%); width:18px; height:18px; stroke:var(--ink-2); fill:none; stroke-width:1.8; pointer-events:none;}
.detail-form.has-error input:invalid{border-color:#d64545;}
.detail-form .btn{width:100%;}
.detail-success{display:none; align-items:flex-start; gap:12px; max-width:560px; margin:0 auto; padding:18px 20px; background:var(--paper); border-radius:var(--r-lg); text-align:left;}
.detail-success.show{display:flex;}
.detail-success .tick{flex:none; width:26px; height:26px; border-radius:var(--r-sm); background:var(--accent); color:var(--ink); display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:600;}
.detail-success strong{display:block; color:var(--ink); font-size:15px; font-weight:500;}
.detail-success span span{display:block; margin-top:2px; font-size:14px; color:var(--ink-2);}
/* ---------- Footer ---------- */
footer{background:var(--paper); color:var(--ink-2); padding:56px 0 28px; border-top:1px solid var(--hair);}
.footer-top{display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:32px; padding-bottom:32px; border-bottom:1px solid var(--hair);}
.footer-logo img{height:22px; width:auto;}
.footer-phone{margin-top:14px; font-size:17px; font-weight:500; color:var(--ink); text-decoration:none; display:inline-block;}
.footer-alt{margin-top:6px; font-size:14px; color:var(--ink-2); display:block;}
.footer-alt a{color:var(--ink-2); text-decoration:underline;}
.footer-links{display:flex; gap:4px 20px; list-style:none; margin:0; padding:0; flex-wrap:wrap;}
.footer-links a{text-decoration:none; font-size:15px; font-weight:500; color:var(--ink); padding:6px 0; display:inline-block;}
.footer-links a:hover{text-decoration:underline;}
.footer-bottom{margin-top:22px; font-size:13px; color:var(--ink-2);}
.skip-link{position:absolute; left:-9999px; top:0; z-index:200; background:var(--ink); color:#fff; padding:10px 18px; font-weight:500; text-decoration:none;}
.skip-link:focus{left:0;}
/* =====================================================================
VARIANTE 2 · Fondo solo en azules y verdes de Limpio, tipografía
recta (Sora + Inter) y bloques escalonados tipo "Mode".
===================================================================== */
:root{
--canvas:#0D1B2A; /* navy Limpio: lienzo */
--band:#0B3D33; /* verde profundo: banda alterna */
--band-2:#0F4C4A; /* teal: tercera banda */
--card-dark:#122A3D; /* navy suave para tarjetas sobre navy */
--card-dark-2:#0E4A3E; /* verde medio para tarjetas sobre verde */
--paper:#FFFAED; /* crema Limpio: tarjetas claras */
--paper-2:#F3F6EC; /* crema verdosa alterna */
--ink:#0D1B2A; /* texto sobre claro */
--ink-2:#3B4A5A;
--cream-text:#FFFAED; /* texto sobre oscuro */
--cream-soft:rgba(255,250,237,.72);
--jade:#008F6A; --jade-dark:#00745a;
--accent:#BDF26A; /* lima Limpio: único acento */
--accent-dark:#9FDB4C;
--hair:rgba(13,27,42,.16);
--hair-light:rgba(255,250,237,.16);
--r-sm:6px; --r-lg:16px;
--serif:'Sora','Inter',system-ui,sans-serif; /* titulares rectos */
--sans:'Inter',system-ui,sans-serif;
}
body{background:var(--canvas); color:var(--cream-text);}
h1,h2{font-family:var(--serif); font-weight:600; letter-spacing:-0.03em; color:var(--cream-text);}
h3,h4{color:inherit;}
.section-head h2{font-size:clamp(34px,4vw,54px); letter-spacing:-0.035em; line-height:1.05;}
.section-head p{color:var(--cream-soft);}
.eyebrow{color:var(--accent);}
.btn-ghost{color:var(--cream-text); border-color:var(--cream-text);}
.btn-ghost:hover{background:var(--cream-text); color:var(--ink);}
.btn-primary:hover{background:var(--jade); color:#fff;}
/* Bandas: solo navy y verdes */
section{background:var(--canvas);}
.offer, .gallery, .faq, .request-section{background:var(--band);}
#how-res, .about{background:var(--band-2);}
.services, .why-section, .gift, .area{background:var(--canvas);}
/* Anuncio + nav en crema */
.announce{background:var(--paper); color:var(--ink); border-bottom:0;}
.nav{background:var(--canvas); border-bottom:1px solid var(--hair-light);}
.nav-inner{background:var(--paper); border-radius:var(--r-lg); margin:12px auto; height:64px; padding:0 14px 0 20px;}
.nav-links a{color:var(--ink);} .nav-links a:hover{background:var(--paper-2);}
.nav-call{color:var(--ink); border-color:var(--ink);} .nav-call svg{stroke:var(--ink);}
.nav-call:hover{background:var(--ink); color:var(--paper);} .nav-call:hover svg{stroke:var(--paper);}
.menu-toggle{color:var(--ink); border-color:var(--ink);}
@media (max-width:900px){ .nav-links{top:76px; background:var(--paper); border-radius:0 0 var(--r-lg) var(--r-lg);} .nav-links li + li{border-color:var(--hair);} }
/* Reference composition: one proportional canvas, independent text and photo. */
.hero{padding:clamp(28px,5vw,84px) 0 64px;}
.hero > .wrap{width:90%;max-width:1504px;padding:0;container-type:inline-size;}
.hero-stage{position:relative;display:block;aspect-ratio:1504/562;isolation:isolate;}
.hero-shape{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2;fill:var(--accent);}
.hl-line{position:absolute;z-index:3;color:var(--ink);font-family:var(--serif);font-weight:700;letter-spacing:-.055em;line-height:1.04;white-space:nowrap;}
.hl1{left:1.8%;top:4.4%;font-size:6.65cqw;}
.hl23{left:53%;top:40.5%;font-size:6.65cqw;}
.hl23 span{display:block;}
.hero-photo{position:absolute;left:0;top:28.47%;width:58%;height:71.53%;min-height:0;margin:0;border-radius:0;overflow:hidden;clip-path:url(#hero-photo-mask);background:var(--card-dark);z-index:1;}
.hero-photo img{position:absolute;width:100%;height:100%;object-fit:cover;object-position:center;transform:none;}
.cta-card{position:absolute;left:53.2%;top:0;width:46.8%;height:34.2%;z-index:4;background:var(--paper);color:var(--ink);border-radius:1.4cqw;padding:1.4cqw 1.65cqw;display:grid;grid-template-columns:1.65fr 1fr;grid-template-rows:auto 1fr;gap:1cqw 1.4cqw;}
.cta-card .cc-top{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;font-size:1.4cqw;font-weight:700;gap:8px;}
.cta-card .cc-top span{font-size:1cqw;font-weight:500;text-transform:uppercase;color:var(--jade-dark);}
.cta-card .cc-left{min-width:0;display:flex;flex-direction:column;justify-content:space-between;}
.cta-card .cc-btns{display:flex;gap:.4cqw;}
.cta-card .btn{font-size:1.16cqw;padding:.75cqw 1.05cqw;}
.cta-card .btn-ghost{color:var(--ink);border-color:var(--ink);}
.cta-card .btn-ghost:hover{background:var(--ink);color:var(--paper);}
.cta-card .hero-call{display:flex;flex-wrap:wrap;align-items:center;gap:.2cqw .6cqw;margin-top:.8cqw;color:var(--ink);}
.cta-card .hero-call svg{stroke:var(--jade-dark);width:1.4cqw;height:1.4cqw;}
.cta-card .hero-call .hc-num{font-size:1.4cqw;font-weight:700;}
.cta-card .hero-call .hc-lbl{flex-basis:100%;font-size:.98cqw;color:var(--ink-2);}
.cta-card .cc-right{border-left:1px solid var(--hair);padding-left:1.4cqw;display:flex;align-items:center;}
.cta-card .cc-right p{font-size:1.08cqw;line-height:1.42;color:var(--ink-2);}
.hero-facts{margin-top:1.3cqw;gap:1.1cqw;}
.fact{min-width:0;min-height:13.2cqw;padding:1.65cqw 1.8cqw;border-radius:1.3cqw;}
.fact{justify-content:flex-start;} .fact small{font-size:1cqw;} .fact.accent b{margin-top:0;}
.fact b{display:block;font-family:var(--serif);font-size:3.2cqw;font-weight:700;letter-spacing:-.04em;margin-top:1cqw;}
.fact span{font-size:1.3cqw;line-height:1.3;}
.fact.dark{background:var(--card-dark);}.fact.teal{background:var(--card-dark-2);}
.fact.paper{background:var(--paper);}.fact.accent{background:var(--accent);}
@media(max-width:1100px){
.hero-stage{display:flex;flex-direction:column;aspect-ratio:auto;gap:16px;}
.hero-shape{display:none;}
.hl-line{position:static;background:var(--accent);padding:16px 20px;border-radius:16px;white-space:normal;font-size:clamp(36px,7vw,72px);}
.hl1{display:block;}
.hl23{display:block;margin-top:-16px;}
.hero-photo{position:relative;top:auto;width:100%;height:auto;aspect-ratio:2/1;clip-path:none;border-radius:16px;}
.cta-card{position:static;width:100%;height:auto;border-radius:16px;padding:22px;gap:18px;grid-template-columns:1.5fr 1fr;}
.cta-card .cc-top{font-size:20px;}.cta-card .cc-top span{font-size:12px;}
.cta-card .cc-btns{gap:8px;flex-wrap:wrap;}.cta-card .btn{font-size:16px;padding:12px 16px;}
.cta-card .hero-call{gap:5px 8px;margin-top:16px;}.cta-card .hero-call svg{width:20px;height:20px;}
.cta-card .hero-call .hc-num{font-size:20px;}.cta-card .hero-call .hc-lbl{font-size:14px;}
.cta-card .cc-right{padding-left:18px;}.cta-card .cc-right p{font-size:16px;}
.hero-facts{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:16px;}
.fact{min-height:170px;padding:22px;border-radius:16px;}.fact small{font-size:12px;}.fact b{font-size:36px;margin-top:14px;}.fact span{font-size:16px;}
}
@media(max-width:600px){
.hero{padding:24px 0 40px;}.hero > .wrap{width:calc(100% - 32px);}
.hl-line{font-size:clamp(30px,8vw,48px);padding:14px;letter-spacing:-.045em;}
.cta-card{grid-template-columns:1fr;padding:20px;}.cta-card .cc-top{flex-wrap:wrap;}
.cta-card .cc-right{padding:14px 0 0;border-left:0;border-top:1px solid var(--hair);}
.cta-card .cc-btns{display:grid;grid-template-columns:1fr;}
.hero-photo{aspect-ratio:4/3;}.hero-photo img{transform:none;object-position:58% center;}
.hero-facts{grid-template-columns:1fr;}.fact{min-height:150px;}
.svc summary{padding:18px;gap:10px;grid-template-columns:1fr auto;}.svc-ic{display:none;}.svc h3{font-size:26px;}
}
/* ---------- Oferta: bloque crema + bloque lima entrelazados ---------- */
.offer .section-head h2, .offer .section-head p{color:var(--cream-text);} .offer .section-head p{color:var(--cream-soft);}
.offer-card{background:var(--paper); color:var(--ink);}
.offer-card:nth-child(2){background:var(--accent);}
.offer-card:nth-child(2) .offer-badge{background:var(--ink); color:var(--paper);}
.offer-card:nth-child(1) .offer-badge{background:var(--accent); color:var(--ink);}
.offer-card p{color:var(--ink-2);} .offer-card:nth-child(2) p{color:var(--ink);}
.offer-fine{color:var(--cream-soft);}
/* ---------- Servicios (tarjetas crema, títulos rectos) ---------- */
.svc{background:var(--paper); color:var(--ink);}
.svc:nth-child(even){background:var(--paper-2);}
.svc h3{font-family:var(--serif); font-weight:600; font-size:32px; letter-spacing:-0.03em; color:var(--ink);}
.svc-ic{background:var(--ink);} .svc-ic svg{stroke:var(--accent);}
.svc .svc-tag{background:var(--ink); color:var(--accent);}
.svc .svc-lead{color:var(--ink-2);}
.svc-toggle{border-color:var(--ink); color:var(--ink);} .svc[open] .svc-toggle{background:var(--ink); color:var(--accent);}
.svc-body{border-top-color:var(--hair);} .svc-body h4{color:var(--ink);} .svc-body li{color:var(--ink);} .svc-body li::before{background:var(--jade);}
.svc-note{background:rgba(13,27,42,.06); color:var(--ink-2);} .svc-note strong{color:var(--ink);}
.compare-head h3{font-family:var(--serif); font-weight:600; letter-spacing:-0.03em; color:var(--cream-text); font-size:32px;}
.compare-head p{color:var(--cream-soft);}
.compare-wrap{background:var(--paper); color:var(--ink);}
.compare thead th{background:var(--band-2); color:var(--cream-text);}
.compare th, .compare td{border-top-color:var(--hair);}
/* ---------- Proceso ---------- */
#how-res .eyebrow{color:var(--accent);}
.process-step{background:var(--paper); color:var(--ink);}
.process-step:nth-child(even){background:var(--accent);}
.step-num{font-family:var(--serif); font-weight:600; color:var(--ink); font-size:34px;}
.process-step h3{color:var(--ink);} .process-step p{color:var(--ink-2);}
/* ---------- Galería ---------- */
.ba-card{background:var(--paper); color:var(--ink);}
.ba{background:var(--card-dark);} .ba-ph.before{background:repeating-linear-gradient(135deg, rgba(255,250,237,.05) 0 14px, transparent 14px 28px), var(--card-dark); color:var(--cream-soft);}
.ba-ph.after{background:var(--paper-2); color:var(--ink-2);}
.ba-handle{background:var(--paper);} .ba-handle::after{background:var(--accent); color:var(--ink);}
.ba-lbl{background:var(--ink); color:var(--paper);} .ba-lbl.r{background:var(--accent); color:var(--ink);}
.ba-cap h3{color:var(--ink);} .ba-cap p{color:var(--ink-2);}
.gallery-note{color:var(--cream-soft);}
/* ---------- Gift cards ---------- */
.gift-copy h2{color:var(--cream-text);} .gift-copy p{color:var(--cream-soft);}
.gift-occasions span{background:var(--card-dark); color:var(--cream-text);}
.gift-steps li{color:var(--cream-text);} .gift-steps .n{background:var(--accent); color:var(--ink);}
.gift-card-ui{background:var(--paper); color:var(--ink);}
.gift-card-ui h3{font-family:var(--serif); font-weight:600; font-size:30px; letter-spacing:-0.03em; color:var(--ink);}
.gift-card-ui .gc-top span{color:var(--jade-dark);} .gift-card-ui .gc-sub{color:var(--ink-2);}
.gift-form input, .gift-form select, .gift-form textarea{background:#fff; color:var(--ink); border-color:var(--hair);}
.gift-form input::placeholder, .gift-form textarea::placeholder{color:#8a939d;}
.gift-form select{background-image:url("data:image/svg+xml;utf8,"); background-repeat:no-repeat; background-position:right 12px center; background-size:16px;}
.gift-form .form-disclaimer{color:var(--ink-2);} .gift-form .detail-error{color:#b3261e;}
.gift-success{background:var(--paper-2);} .gift-success strong{color:var(--ink);} .gift-success span span{color:var(--ink-2);}
/* ---------- Verificable / About / FAQ ---------- */
.problem-card{background:var(--paper); color:var(--ink);} .problem-card:nth-child(2){background:var(--accent);}
.problem-card h3{color:var(--ink);} .problem-card p{color:var(--ink-2);}
.about h2{color:var(--cream-text);} .about p{color:var(--cream-soft);} .about-badge{color:var(--cream-text); border-color:var(--hair-light);}
.faq .section-head h2{color:var(--cream-text);}
.faq-item{background:var(--paper); color:var(--ink);} .faq-item summary{color:var(--ink);} .faq-item summary::after{color:var(--ink);} .faq-item p{color:var(--ink-2);}
/* ---------- Área / formulario / footer ---------- */
.area-info h2{color:var(--cream-text);} .area-nap li{color:var(--cream-soft);} .area-nap a{color:var(--cream-text);}
.area-map{background:var(--card-dark);} .area-counties h3{color:var(--cream-text);} .county-list{color:var(--cream-soft);}
.request-panel{background:var(--paper); color:var(--ink);}
.request-panel h2{color:var(--ink); font-size:clamp(30px,3.4vw,40px);}
.request-panel > p{color:var(--ink-2);}
.detail-form input, .detail-form textarea, .detail-form select{background:#fff;}
.detail-success{background:var(--paper); color:var(--ink);}
footer{background:var(--canvas); color:var(--cream-soft); border-top:1px solid var(--hair-light);}
.footer-top{border-bottom-color:var(--hair-light);}
.footer-phone{color:var(--cream-text);} .footer-alt, .footer-alt a{color:var(--cream-soft);}
.footer-links a{color:var(--cream-text);} .footer-bottom{color:var(--cream-soft);}
/* Cabeceras de sección centradas para una lectura más ordenada */
.section-head{margin:0 auto; text-align:center;}
.section-head p{margin-left:auto; margin-right:auto;}
.compare-head{flex-direction:column; align-items:center; text-align:center; gap:10px;}
.compare-head p{flex:none; max-width:56ch;}
.offer-fine, .gallery-note{text-align:center;}
.field-address .pin-ic{top:auto;bottom:14px;transform:none;}
.ba-grid{align-items:start;} .ba{aspect-ratio:var(--photo-ratio,4/3);max-height:640px;} .ba img{object-fit:contain;background:var(--card-dark);}
.ba input[type=range]:focus-visible{outline:none;}
/* Audit fixes: persistent labels and visible keyboard focus. */
.detail-form label.sr-only,.gift-form label.sr-only{position:static;width:auto;height:auto;margin:0 0 6px;overflow:visible;clip:auto;white-space:normal;display:block;font-size:14px;font-weight:500;color:var(--ink);}
.detail-form input::placeholder,.detail-form textarea::placeholder,.gift-form input::placeholder,.gift-form textarea::placeholder{color:#626d78;}
.detail-form select.placeholder{color:#626d78;}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:3px solid #00745a;outline-offset:4px;}
.ba:focus-within{outline:3px solid var(--accent);outline-offset:4px;}
[aria-invalid="true"]{border-color:#b3261e !important;}
.btn-primary:hover,.announce a:hover{background:var(--jade-dark);color:white;}
.gift-form select{padding-right:36px;}
.nav-logo img,.footer-logo img,.gc-top img{height:auto;}
.nav-logo img{width:96px;}.footer-logo img{width:128px;}.gc-top img{width:84px;}
section[id]{scroll-margin-top:110px;}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto;}.reveal{opacity:1;transform:none;transition:none;}*,*::before,*::after{animation:none !important;transition:none !important;}}