/* El Contador 502 — verde sello + papel + ámbar */
:root{
  --papel:#f7f5ef; --papel-2:#efece2; --blanco:#fff;
  --tinta:#132a22; --suave:#4f625a; --linea:rgba(19,42,34,.12);
  --verde:#0b3d2e; --verde-2:#14684c; --menta:#d9efe4;
  --ambar:#f2a516; --wa:#1fa855;
  --r:18px; --sombra:0 10px 30px rgba(11,61,46,.08);
  --t:'Bricolage Grotesque',system-ui,sans-serif; --c:'Inter',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--papel);color:var(--tinta);font:16px/1.6 var(--c);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
img,svg{display:block}
.wrap{max-width:1120px;margin:0 auto;padding:0 16px}
.angosto{max-width:860px}
h1,h2,h3{font-family:var(--t);line-height:1.08;letter-spacing:-.02em}

/* barra */
.top{position:sticky;top:0;z-index:20;background:rgba(247,245,239,.88);backdrop-filter:blur(10px);border-bottom:1px solid var(--linea)}
.top-in{display:flex;align-items:center;gap:20px;height:64px}
.marca{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--t);font-weight:600;font-size:18px}
.marca b{color:var(--verde-2)}
.sello{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--verde);color:var(--ambar);font-weight:800;font-size:13px;border:2px dashed rgba(242,165,22,.6);outline:3px solid var(--verde)}
.menu{display:flex;gap:22px;margin-left:auto}
.menu a{text-decoration:none;color:var(--suave);font-weight:500;font-size:15px}
.menu a:hover{color:var(--tinta)}

/* botones */
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 22px;border-radius:999px;font-weight:600;text-decoration:none;border:0;cursor:pointer;transition:transform .15s,box-shadow .15s;font-size:16px}
.btn svg{width:20px;height:20px}
.btn:hover{transform:translateY(-2px)}
.btn-wa{background:var(--wa);color:#fff;box-shadow:0 8px 22px rgba(31,168,85,.3)}
.btn-linea{border:1.5px solid var(--verde);color:var(--verde);background:transparent}
.btn-sm{padding:9px 16px;font-size:14px}
.btn-claro{background:var(--ambar);color:var(--verde);box-shadow:none}

/* hero */
.hero{padding:64px 0 56px;background:radial-gradient(900px 400px at 85% 0%,var(--menta),transparent 70%)}
.hero-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:48px;align-items:center}
.pre{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--verde-2);background:var(--blanco);border:1px solid var(--linea);padding:6px 14px;border-radius:999px}
.punto{width:8px;height:8px;border-radius:50%;background:var(--wa);box-shadow:0 0 0 4px rgba(31,168,85,.18)}
.hero h1{font-size:clamp(36px,6vw,64px);font-weight:800;margin:20px 0 18px}
.hero h1 em{font-style:normal;color:var(--verde-2);background:linear-gradient(transparent 62%,rgba(242,165,22,.45) 62%)}
.lead{font-size:clamp(17px,2vw,19px);color:var(--suave);max-width:560px}
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.ctas.centro{justify-content:center}
.sellos{list-style:none;display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:30px;color:var(--suave);font-size:15px}
.sellos li::before{content:"✓ ";color:var(--verde-2);font-weight:700}
.sellos b{color:var(--tinta)}

.destacado{position:relative;display:block;text-decoration:none;background:var(--verde);color:#eaf5ef;border-radius:26px;padding:34px 30px;box-shadow:0 30px 60px rgba(11,61,46,.25);transform:rotate(1.2deg);transition:transform .2s}
.destacado:hover{transform:rotate(0)}
.destacado .etq{position:absolute;top:-14px;left:26px;background:var(--ambar);color:var(--verde);font-weight:700;font-size:13px;padding:6px 14px;border-radius:999px}
.destacado .grande{font-size:48px}
.destacado h2{font-size:30px;color:#fff;margin:10px 0}
.destacado p{color:#b9d6c8}
.destacado ul{margin:16px 0 18px 18px;color:#d6eadf;font-size:15px}
.destacado .ver{color:var(--ambar);font-weight:600}

/* bloques */
.bloque{padding:72px 0}
.bloque.alt{background:var(--papel-2)}
.titulo{text-align:center;margin-bottom:38px}
.titulo h2{font-size:clamp(28px,4vw,42px);font-weight:800}
.titulo p{color:var(--suave);margin-top:8px}
.ceja{font-weight:700;color:var(--verde-2);text-transform:uppercase;letter-spacing:.12em;font-size:13px;margin-bottom:8px}
.sub{font-family:var(--t);font-size:20px;margin:44px 0 16px}

.tarjetas{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.tarjeta{position:relative;display:flex;flex-direction:column;gap:6px;text-decoration:none;background:var(--blanco);border:1px solid var(--linea);border-radius:var(--r);padding:24px;transition:border-color .15s,transform .15s,box-shadow .15s}
.tarjeta:hover{border-color:var(--verde-2);transform:translateY(-3px);box-shadow:var(--sombra)}
.tarjeta .ico{font-size:30px}
.tarjeta .cat{position:absolute;top:20px;right:20px;font-size:12px;font-weight:600;color:var(--verde-2);background:var(--menta);padding:3px 10px;border-radius:999px}
.tarjeta h3{font-size:20px;margin-top:6px}
.tarjeta p{color:var(--suave);font-size:15px;flex:1}
.ver{font-weight:600;color:var(--verde-2);font-size:15px;margin-top:8px}

.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{display:inline-flex;align-items:center;gap:8px;text-decoration:none;background:var(--blanco);border:1px solid var(--linea);padding:10px 16px;border-radius:999px;font-size:15px;font-weight:500}
.chip:hover{border-color:var(--verde-2)}

.pasos{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.pasos li{display:flex;gap:16px;background:var(--blanco);border-radius:var(--r);padding:24px;border:1px solid var(--linea)}
.pasos .n{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--verde);color:var(--ambar);font-family:var(--t);font-weight:800;font-size:20px}
.pasos h3{font-size:19px;margin-bottom:4px}
.pasos p{color:var(--suave);font-size:15px}

.faq details{background:var(--blanco);border:1px solid var(--linea);border-radius:14px;margin-bottom:10px}
.faq summary{cursor:pointer;list-style:none;padding:18px 52px 18px 20px;font-weight:600;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:20px;top:50%;transform:translateY(-50%);font-size:22px;color:var(--verde-2)}
.faq details[open] summary::after{content:"−"}
.faq p{padding:0 20px 18px;color:var(--suave)}

.final{text-align:center;background:var(--verde);color:#fff;border-radius:28px;padding:56px 24px;background-image:radial-gradient(600px 240px at 50% 0%,rgba(242,165,22,.18),transparent)}
.final h2{font-size:clamp(26px,4vw,40px);font-weight:800}
.final p{color:#b9d6c8;margin:10px 0 26px}

/* página de trámite */
.hero-t{padding:40px 0 48px}
.hero-t h1{font-size:clamp(32px,5vw,52px)}
.migas{font-size:14px;color:var(--suave);margin-bottom:18px}
.migas a{color:var(--verde-2)}
.dos{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.caja{background:var(--blanco);border:1px solid var(--linea);border-radius:var(--r);padding:28px}
.caja h2{font-size:22px;margin-bottom:14px}
.caja-req{border:2px solid var(--verde-2)}
.check,.req{list-style:none;display:grid;gap:10px}
.check li,.req li{padding-left:28px;position:relative}
.check li::before{content:"✓";position:absolute;left:0;color:var(--verde-2);font-weight:700}
.req li::before{content:"";position:absolute;left:4px;top:9px;width:10px;height:10px;border-radius:3px;background:var(--ambar)}
.chico{font-size:14px;color:var(--suave);margin-top:14px}

/* pie */
.pie{background:var(--verde);color:#b9d6c8;padding:56px 0 24px;margin-top:20px}
.pie .marca{color:#fff}
.pie .marca b{color:var(--ambar)}
.pie-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:36px}
.pie h4{color:#fff;font-family:var(--t);font-size:16px;margin-bottom:12px}
.pie ul{list-style:none;display:grid;gap:6px}
.pie a{color:#d6eadf;text-decoration:none}
.pie a:hover{color:var(--ambar)}
.pie p{margin-top:12px;font-size:15px}
.pie .chico{color:#8fb3a2}
.pie-bajo{border-top:1px solid rgba(255,255,255,.1);margin-top:36px;padding-top:18px;font-size:13px}

.flota{position:fixed;right:18px;bottom:18px;z-index:30;width:58px;height:58px;border-radius:50%;background:var(--wa);color:#fff;display:grid;place-items:center;box-shadow:0 10px 26px rgba(31,168,85,.45)}
.flota svg{width:30px;height:30px}

@media (max-width:860px){
  .hero-grid,.dos,.pie-grid,.pasos{grid-template-columns:1fr}
  .menu{display:none}
  .top .btn-sm{margin-left:auto}
  .destacado{transform:none}
  .hero{padding:40px 0}
  .bloque{padding:52px 0}
}
@media (max-width:420px){
  .top .btn-sm span{display:none}
  .btn{width:100%;justify-content:center}
  .top .btn{width:auto}
}