/* CERRUTI STUDIO · sitio (estático, sin dependencias externas) */
@font-face { font-family:"Bricolage"; src:url("/fuentes/bricolage.woff2") format("woff2"); font-weight:200 800; font-stretch:75% 100%; font-display:swap; }

:root {
  --bosque:#0B5E48; --bosque-osc:#073D30; --menta:#7FE3BC; --papel:#F3F6F4; --tinta:#13221C; --musgo:#56665F; --linea:#D6DFDA; --blanco:#fff;
  --ancho:1200px; --gutter:clamp(1rem, 4vw, 2rem);
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:5rem; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }
body { margin:0; background:var(--papel); color:var(--tinta); font-family:"Bricolage", ui-sans-serif, system-ui, sans-serif; font-size:17px; line-height:1.55;
  font-variation-settings:"opsz" 14; overflow-x:hidden; }
img { max-width:100%; height:auto; display:block; }
a { color:var(--bosque); text-underline-offset:.18em; }
:focus-visible { outline:3px solid var(--bosque); outline-offset:3px; border-radius:4px; }
h1, h2, h3 { margin:0; font-variation-settings:"opsz" 96; text-wrap:balance; }
p { margin:0; }
.ancho { width:100%; max-width:var(--ancho); margin:0 auto; padding:0 var(--gutter); }
.angosto { max-width:820px; }
.saltar { position:absolute; left:-9999px; top:0; background:var(--tinta); color:#fff; padding:.6rem 1rem; z-index:20; }
.saltar:focus { left:1rem; top:1rem; }

/* Botones */
.boton { display:inline-flex; align-items:center; justify-content:center; min-height:3rem; padding:.7rem 1.35rem; border-radius:10px; background:var(--bosque); color:#fff;
  font-weight:600; text-decoration:none; border:2px solid var(--bosque); transition:background .15s, border-color .15s; }
.boton:hover { background:var(--bosque-osc); border-color:var(--bosque-osc); }
.boton-claro { background:transparent; color:var(--tinta); border-color:var(--tinta); }
.boton-claro:hover { background:var(--tinta); color:#fff; border-color:var(--tinta); }
.boton-menta { background:var(--menta); color:var(--bosque-osc); border-color:var(--menta); }
.boton-menta:hover { background:#fff; border-color:#fff; }
.boton-chico { min-height:2.4rem; padding:.4rem 1rem; }

/* Cabecera */
.cabecera { position:sticky; top:0; z-index:10; background:rgba(243,246,244,.92); backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid transparent; }
.cabecera-fila { display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:4.25rem; }
.logo { display:flex; align-items:center; gap:.6rem; color:var(--tinta); text-decoration:none; letter-spacing:.09em; font-size:15px; margin:0; }
.logo b { font-weight:750; }
.menu { display:flex; align-items:center; gap:.25rem; }
.menu a:not(.boton) { color:var(--tinta); text-decoration:none; padding:.5rem .75rem; border-radius:8px; }
.menu a:not(.boton):hover { background:rgba(11,94,72,.08); }
.menu .boton { margin-left:.5rem; }
.menu-boton { display:none; font:inherit; font-weight:600; background:none; border:2px solid var(--tinta); border-radius:8px; padding:.35rem .8rem; color:var(--tinta); cursor:pointer; }
@media (max-width:880px) {
  .menu-boton { display:inline-block; }
  .menu { display:none; position:absolute; left:0; right:0; top:100%; flex-direction:column; align-items:stretch; padding:.5rem var(--gutter) 1rem; background:var(--papel); border-bottom:1px solid var(--linea); }
  .menu.abierto { display:flex; }
  .menu .boton { margin:.5rem 0 0; }
  .sin-js .menu { display:flex; position:static; flex-direction:row; flex-wrap:wrap; padding:0; border:0; }
}

/* Portada: el titular grande y la captura real que baja sobre la franja verde */
.portada { padding-top:clamp(2.5rem, 7vw, 5.5rem); background:linear-gradient(to bottom, var(--papel) 0, var(--papel) 70%, var(--bosque) 70%); }
.portada h1 { font-size:clamp(3rem, 9.5vw, 7.25rem); line-height:.95; letter-spacing:-.022em; font-weight:700; font-stretch:82%; font-variation-settings:"opsz" 96;
  max-width:11ch; color:var(--tinta); }
.bajada { margin-top:1.5rem; font-size:clamp(1.1rem, 1.8vw, 1.3rem); line-height:1.5; color:var(--musgo); max-width:36rem; }
.acciones { display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2rem; }
.aclaracion { margin-top:1rem; font-size:15px; color:var(--musgo); }
.portada-captura { margin:clamp(2.5rem, 6vw, 4rem) 0 0; padding-left:max(var(--gutter), calc((100vw - var(--ancho)) / 2 + var(--gutter))); }
.portada-captura img { width:100%; max-width:1320px; border-radius:14px 0 0 14px; border:1px solid var(--linea); border-right:0;
  box-shadow:0 30px 60px -20px rgba(7,61,48,.35), 0 12px 24px -12px rgba(7,61,48,.25); }
@media (max-width:700px) { .portada-captura img { border-radius:10px 0 0 10px; } }

.franja-hoy { background:var(--bosque); color:#fff; padding:clamp(3rem, 6vw, 4.5rem) 0 clamp(3.5rem, 7vw, 5.5rem); }
.franja-hoy h2 { font-size:clamp(1.7rem, 3.4vw, 2.6rem); line-height:1.1; letter-spacing:-.01em; font-weight:650; max-width:22ch; }
.franja-hoy p { margin-top:1rem; max-width:40rem; color:rgba(255,255,255,.82); font-size:1.1rem; }

/* Secciones */
.titulo-seccion { font-size:clamp(2rem, 4.6vw, 3.4rem); line-height:1.04; letter-spacing:-.015em; font-weight:700; font-stretch:85%; max-width:18ch; }
.intro { margin-top:1rem; max-width:40rem; color:var(--musgo); font-size:1.1rem; }
.recorrido, .rubros, .planes, .preguntas { padding:clamp(4rem, 9vw, 7rem) 0; }

/* Recorrido: es una secuencia real (del presupuesto al cobro), por eso va numerado */
.pasos { list-style:none; margin:clamp(2.5rem, 5vw, 4rem) 0 0; padding:0; display:grid; gap:clamp(3rem, 7vw, 5.5rem); }
.paso { display:grid; gap:1.5rem; align-items:center; }
@media (min-width:900px) {
  .paso { grid-template-columns:5fr 7fr; gap:3.5rem; }
  .paso:nth-child(even) .paso-texto { order:2; }
}
.paso-num { display:block; font-size:4.5rem; line-height:.8; font-weight:800; font-stretch:75%; color:var(--menta); -webkit-text-stroke:2px var(--bosque); paint-order:stroke fill; margin-bottom:1rem; }
.paso h3 { font-size:clamp(1.5rem, 2.6vw, 2rem); letter-spacing:-.02em; font-weight:680; line-height:1.1; }
.paso p { margin-top:.75rem; color:var(--musgo); max-width:30rem; }
.paso img { border-radius:12px; border:1px solid var(--linea); background:#fff; box-shadow:0 18px 40px -24px rgba(7,61,48,.4); }

.extras { list-style:none; padding:0; margin:clamp(4rem, 8vw, 6rem) 0 0; display:grid; gap:1.75rem 3rem; border-top:2px solid var(--tinta); padding-top:2rem; }
@media (min-width:760px) { .extras { grid-template-columns:1fr 1fr; } }
.extras li { color:var(--musgo); max-width:34rem; }
.extras b { color:var(--tinta); font-weight:650; }

/* Rubros */
.rubros { background:var(--blanco); border-top:1px solid var(--linea); border-bottom:1px solid var(--linea); }
.rubros-lista { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:2.25rem; }
.rubros-lista button { font:inherit; font-size:15px; font-weight:550; padding:.55rem 1rem; border-radius:999px; border:1.5px solid var(--linea); background:var(--papel); color:var(--tinta); cursor:pointer; }
.rubros-lista button:hover { border-color:var(--bosque); }
.rubros-lista button[aria-selected="true"] { background:var(--bosque); border-color:var(--bosque); color:#fff; }
.rubros-lista:not(.activas) { display:none; }
.rubro { margin-top:2rem; padding:clamp(1.5rem, 3vw, 2.25rem); border-radius:16px; background:var(--papel); max-width:52rem; }
.rubro[hidden] { display:none; }
.rubro h3 { line-height:1.15; font-size:1.6rem; letter-spacing:-.02em; font-weight:680; }
.rubro p { margin-top:.6rem; max-width:44rem; }
.modulos { color:var(--musgo); font-size:15px; }

/* Seguridad */
.seguridad { background:var(--bosque-osc); color:#fff; padding:clamp(4rem, 8vw, 6rem) 0; }
.seguridad-grilla { display:grid; gap:2.5rem; }
@media (min-width:900px) { .seguridad-grilla { grid-template-columns:5fr 7fr; gap:4rem; } }
.seguridad h2 { font-size:clamp(1.9rem, 3.8vw, 2.9rem); line-height:1.08; letter-spacing:-.012em; font-weight:660; font-stretch:88%; }
.seguridad ul { list-style:none; margin:0; padding:0; display:grid; gap:1.4rem; }
.seguridad li { color:rgba(255,255,255,.8); padding-left:1.4rem; border-left:3px solid var(--menta); }
.seguridad b { color:#fff; font-weight:650; }

/* Planes */
.periodo { display:inline-flex; margin-top:2rem; padding:4px; border-radius:12px; background:#fff; border:1px solid var(--linea); }
.periodo button { font:inherit; font-size:15px; font-weight:550; border:0; background:none; color:var(--musgo); padding:.5rem 1rem; border-radius:9px; cursor:pointer; }
.periodo button[aria-checked="true"] { background:var(--tinta); color:#fff; }
.periodo:not(.activo) { display:none; }
.planes-grilla { display:grid; gap:1rem; margin-top:1.5rem; align-items:start; }
@media (min-width:900px) { .planes-grilla { grid-template-columns:1fr 1.08fr 1fr; } }
.plan { background:#fff; border:1px solid var(--linea); border-radius:16px; padding:1.75rem; display:flex; flex-direction:column; }
.plan-destacado { border:2px solid var(--bosque); background:linear-gradient(#fff, #fff) padding-box; position:relative; }
@media (min-width:900px) { .plan-destacado { margin-top:-1rem; padding-top:2.75rem; padding-bottom:2.75rem; } }
.plan h3 { font-size:1.5rem; font-weight:700; letter-spacing:-.02em; }
.plan-destacado h3::after { content:"Recomendado"; display:inline-block; margin-left:.6rem; vertical-align:middle; font-size:13px; font-weight:600; letter-spacing:0;
  color:var(--bosque-osc); background:var(--menta); padding:.15rem .6rem; border-radius:999px; font-variation-settings:"opsz" 14; }
.plan-para { color:var(--musgo); margin-top:.25rem; font-size:15px; }
.precio { margin:1.25rem 0; display:flex; align-items:baseline; gap:.5rem; }
.precio span { font-size:2.8rem; font-weight:750; letter-spacing:-.03em; font-stretch:85%; line-height:1; font-variation-settings:"opsz" 96; }
.precio small { color:var(--musgo); font-size:15px; }
.plan ul { list-style:none; padding:0; margin:0 0 1.75rem; display:grid; gap:.55rem; font-size:15.5px; }
.plan li { padding-left:1.5rem; position:relative; }
.plan li::before { content:""; position:absolute; left:.15rem; top:.42em; width:.35rem; height:.65rem; border:solid var(--bosque); border-width:0 2px 2px 0; transform:rotate(45deg); }
.plan .boton { margin-top:auto; }
.nota-planes { margin-top:1.5rem; color:var(--musgo); font-size:15px; max-width:52rem; }

/* Preguntas */
.preguntas { background:#fff; border-top:1px solid var(--linea); }
.preguntas details { border-bottom:1px solid var(--linea); }
.preguntas details:first-of-type { margin-top:2rem; border-top:1px solid var(--linea); }
.preguntas summary { list-style:none; cursor:pointer; padding:1.15rem 2.5rem 1.15rem 0; font-weight:600; font-size:1.1rem; position:relative; }
.preguntas summary::-webkit-details-marker { display:none; }
.preguntas summary::after { content:""; position:absolute; right:.4rem; top:50%; width:.65rem; height:.65rem; border:solid var(--bosque); border-width:0 2px 2px 0; transform:translateY(-70%) rotate(45deg); transition:transform .2s; }
.preguntas details[open] summary::after { transform:translateY(-20%) rotate(-135deg); }
@media (prefers-reduced-motion:reduce) { .preguntas summary::after { transition:none; } }
.preguntas details p { padding:0 0 1.25rem; color:var(--musgo); max-width:44rem; }

/* Cierre y pie */
.cierre { background:var(--bosque); color:#fff; padding:clamp(4rem, 9vw, 6.5rem) 0; }
.cierre h2 { font-size:clamp(2.2rem, 5.5vw, 4.2rem); line-height:1; letter-spacing:-.02em; font-weight:700; font-stretch:84%; max-width:14ch; }
.cierre p { margin:1rem 0 2rem; color:rgba(255,255,255,.8); font-size:1.15rem; }
.pie { padding:2rem 0 2.5rem; font-size:15px; color:var(--musgo); }
.pie-fila { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem 2rem; }
.pie nav { display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; }
.pie a { color:var(--musgo); }
.logo-pie { font-size:14px; }

/* Páginas de texto (condiciones, privacidad, 404) */
.texto { padding:clamp(3rem, 7vw, 5rem) 0 5rem; }
.texto h1 { font-size:clamp(2.2rem, 5vw, 3.4rem); letter-spacing:-.015em; line-height:1.05; font-weight:700; font-stretch:85%; }
.texto .fecha { color:var(--musgo); margin-top:.75rem; }
.texto h2 { font-size:1.35rem; margin:2.5rem 0 .75rem; font-weight:680; letter-spacing:-.01em; }
.texto p, .texto li { max-width:44rem; }
.texto p + p { margin-top:.85rem; }
.texto ul { padding-left:1.25rem; margin:.75rem 0; display:grid; gap:.4rem; }
.aviso-borrador { margin-top:1.5rem; padding:1rem 1.25rem; border-radius:12px; background:#FFF6DF; color:#6B4A00; max-width:44rem; }