:root {
  --verde: #1f7a4d;
  --verde-osc: #145436;
  --menta: #e9f5ee;
  --tinta: #1d2420;
  --gris: #5b6660;
  --linea: #dfe7e2;
  --lapiz: #f2c230;
  --radio: 10px;
  --ancho: 1160px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Roboto", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  color: var(--tinta);
  background: #fff;
}
h1, h2, h3 {
  margin: 0;
  font-family: "Montserrat", Arial, sans-serif;
  font-weight: 700;
  line-height: 1.18;
}
p { margin: 0 0 1em; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--verde); }
.caja { max-width: var(--ancho); margin: 0 auto; padding: 0 18px; }
.mt0 { margin-top: 0 !important; }
.mb0 { margin-bottom: 0 !important; }

.boton {
  display: inline-block;
  padding: 13px 24px;
  border: 2px solid var(--verde);
  border-radius: 40px;
  font-family: "Montserrat", sans-serif;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  background: var(--verde);
  color: #fff;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.boton:hover { background: var(--verde-osc); border-color: var(--verde-osc); }
.boton.hueco { background: transparent; color: var(--verde); }
.boton.hueco:hover { background: var(--menta); }

/* headbar */
.headbar { position: sticky; top: 0; z-index: 30; background: #fff; border-bottom: 1px solid var(--linea); }
.headbar .caja { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.marca { display: flex; align-items: center; gap: 9px; text-decoration: none; color: var(--tinta); }
.marca svg { width: 30px; height: 30px; }
.marca span { font-family: "Montserrat", sans-serif; font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.headbar nav { display: none; }
.headbar nav a { margin-left: 26px; font-size: 15px; font-weight: 500; text-decoration: none; color: var(--tinta); }
.headbar nav a:hover { color: var(--verde); }
.headbar nav a.anotarme { padding: 9px 18px; border-radius: 30px; background: var(--verde); color: #fff; }
.abrir-menu { width: 44px; height: 40px; border: 1px solid var(--linea); border-radius: 8px; background: #fff; font-size: 20px; cursor: pointer; }
.menu-movil { display: none; padding: 8px 18px 18px; border-bottom: 1px solid var(--linea); background: #fff; }
.menu-movil.abierto { display: block; }
.menu-movil a { display: block; padding: 11px 0; border-bottom: 1px solid var(--linea); text-decoration: none; color: var(--tinta); font-weight: 500; }

/* portada */
.portada { padding: 36px 0 46px; background: linear-gradient(180deg, var(--menta) 0, #fff 100%); }
.portada .caja { display: grid; gap: 30px; }
.portada .caja > * { min-width: 0; }
.antetitulo { display: inline-block; margin-bottom: 14px; padding: 4px 12px; border-radius: 20px; font-size: 13px; font-weight: 700; background: #fff; color: var(--verde-osc); }
.portada h1 { font-size: 33px; margin-bottom: 16px; }
.portada h1 mark { padding: 0 4px; background: linear-gradient(transparent 58%, var(--lapiz) 58%); color: inherit; }
.portada .bajada { font-size: 1.0625rem; color: var(--gris); max-width: 50ch; }
.portada .acciones { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 0; }
.foto-hoja { position: relative; }
.foto-hoja img { width: 100%; aspect-ratio: 5/4; object-fit: cover; border-radius: 16px; }
.hoja-ejemplo {
  position: relative;
  margin: -60px 14px 0;
  padding: 16px 18px 12px;
  border-radius: var(--radio);
  background: #fff;
  box-shadow: 0 12px 30px rgba(20,84,54,.14);
  font-size: 14px;
}
.hoja-ejemplo h3 { font-size: 14px; margin-bottom: 8px; color: var(--verde-osc); }
.hoja-ejemplo table { width: 100%; border-collapse: collapse; }
.hoja-ejemplo td { padding: 5px 0; border-bottom: 1px dashed var(--linea); }
.hoja-ejemplo td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.hoja-ejemplo tr.saldo td { border-bottom: 0; font-weight: 700; color: var(--verde); }
.hoja-ejemplo small { display: block; margin-top: 6px; color: var(--gris); font-size: 12px; }

/* para quién */
.para-quien { padding: 56px 0; }
.para-quien h2 { font-size: 1.625rem; margin-bottom: 1.6rem; }
.perfiles { display: grid; gap: 16px; }
.perfil { padding: 22px 20px; border: 1px solid var(--linea); border-radius: var(--radio); }
.perfil b { display: block; margin-bottom: 6px; font-family: "Montserrat", sans-serif; font-size: 17px; }
.perfil p { color: var(--gris); }

/* calculadora de cuotas */
#calculadora-cuotas { padding: 56px 0; background: var(--verde-osc); color: #e3f0e8; }
.calc-grid { display: grid; gap: 30px; }
.calc-grid > * { min-width: 0; }
.calc-texto h2 { font-size: 26px; color: #fff; margin-bottom: 14px; }
.calc-texto p { color: #c4ddd0; }
.calc-form { padding: 22px 20px; border-radius: var(--radio); background: #fff; color: var(--tinta); }
.calc-form label { display: block; margin: 0 0 4px; font-size: 14px; font-weight: 500; }
.calc-form input { width: 100%; margin-bottom: 14px; padding: 11px 12px; border: 1px solid var(--linea); border-radius: 8px; font-size: 16px; }
.calc-form input:focus { outline: 2px solid var(--verde); border-color: transparent; }
.fila-doble { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.calc-resultado { padding: 14px 16px; border-radius: 8px; background: var(--menta); font-size: 15px; }
.calc-resultado strong { display: block; font-family: "Montserrat", sans-serif; font-size: 22px; color: var(--verde-osc); }
.calc-aviso { margin: 10px 0 0; font-size: 12px; color: var(--gris); }

/* cinco sábados */
.sabados { padding: 56px 0; }
.sabados h2 { font-size: 1.625rem; margin-bottom: .5rem; }
.sabados .intro { color: var(--gris); margin-bottom: 24px; }
.lista-sabados { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--tinta); }
.lista-sabados li { display: grid; grid-template-columns: 76px 1fr; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--linea); }
.lista-sabados time { font-family: "Montserrat", sans-serif; font-weight: 700; color: var(--verde); }
.lista-sabados span { color: var(--gris); }

/* carta */
.carta { padding: 56px 0; background: var(--menta); }
.carta .caja { display: grid; gap: 28px; }
.carta .caja > * { min-width: 0; }
.carta img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: 16px; }
.carta h2 { font-size: 24px; margin-bottom: 16px; }
.carta .firma { margin-top: 14px; font-weight: 700; }
.carta .firma small { display: block; font-weight: 400; color: var(--gris); }

/* precios */
.precios { padding: 56px 0; }
.precios h2 { font-size: 1.625rem; margin-bottom: 1.1rem; }
.tabla-precios { width: 100%; border-collapse: collapse; }
.tabla-precios td { padding: 14px 0; border-bottom: 1px solid var(--linea); vertical-align: top; }
/* precio a la derecha y sin cortar, así no queda «$» solo en una línea */
.tabla-precios td.importe { text-align: right; white-space: nowrap; font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 18px; padding-left: 12px; }
.tabla-precios td small { display: block; color: var(--gris); font-size: 13px; }
.precios .letra-chica { margin-top: 16px; font-size: 14px; color: var(--gris); }

/* no hacemos */
.lo-que-no { padding: 0 0 56px; }
.lo-que-no .recuadro { padding: 24px 22px; border: 2px dashed #c6d6cc; border-radius: var(--radio); }
.lo-que-no h2 { font-size: 22px; margin-bottom: 12px; }
.lo-que-no ul { margin: 0; padding-left: 20px; }
.lo-que-no li { padding: 4px 0; }

/* preguntas */
.dudas { padding: 56px 0; border-top: 1px solid var(--linea); }
.dudas h2 { font-size: 1.625rem; margin-bottom: 1.1rem; }
.dudas details { border-bottom: 1px solid var(--linea); }
.dudas summary { padding: 15px 30px 15px 0; font-weight: 500; cursor: pointer; list-style: none; position: relative; }
.dudas summary::-webkit-details-marker { display: none; }
.dudas summary::after { content: "+"; position: absolute; right: 4px; top: 12px; font-size: 22px; color: var(--verde); }
.dudas details[open] summary::after { content: "–"; }
.dudas details p { color: var(--gris); }

/* anotarse */
.anotarse { padding: 56px 0 64px; background: var(--menta); }
.anotarse .caja { display: grid; gap: 30px; }
.anotarse .caja > * { min-width: 0; }
.anotarse h2 { font-size: 26px; margin-bottom: 12px; }
.datos-contacto p { margin-bottom: 6px; }
.form-anotarme { padding: 24px 20px; border-radius: var(--radio); background: #fff; }
.form-anotarme .campo { margin-bottom: 14px; }
.form-anotarme label { display: block; margin-bottom: 4px; font-size: 14px; font-weight: 500; }
.form-anotarme input, .form-anotarme select { width: 100%; padding: 11px 12px; border: 1px solid var(--linea); border-radius: 8px; font-size: 16px; background: #fff; }
.form-anotarme .check { display: flex; gap: 8px; font-size: 14px; }
.form-anotarme .check input { width: auto; margin-top: 4px; }
.form-anotarme .trampa { position: absolute; left: -4000px; }
.form-anotarme .error { color: #b3261e; font-size: 13px; margin-top: 4px; }
.gracias { padding: 24px 20px; border-radius: var(--radio); background: #fff; border-left: 4px solid var(--verde); }
.gracias h3 { font-size: 20px; margin-bottom: 8px; }

/* endbar */
.endbar { padding: 34px 0 24px; font-size: 14px; background: var(--tinta); color: #b9c4be; }
.endbar .caja { display: grid; gap: 20px; }
.endbar a { color: #e3ece6; text-decoration: none; }
.endbar a:hover { text-decoration: underline; }
.endbar .legales { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.endbar .legales button { padding: 0; border: 0; background: none; color: #e3ece6; font: inherit; cursor: pointer; }
.endbar .aclaracion { font-size: 12px; color: #8d9a93; }

/* cookies */
.cartel-cookies { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 50; max-width: 520px; padding: 18px; border-radius: var(--radio); background: #fff; box-shadow: 0 10px 40px rgba(0,0,0,.18); font-size: 14px; }
.cartel-cookies p { margin-bottom: 12px; }
.cartel-cookies .botones { display: flex; flex-wrap: wrap; gap: 8px; }
.cartel-cookies .boton { padding: 9px 16px; font-size: 13px; }
.cartel-cookies .opciones label { display: flex; gap: 8px; margin-bottom: 6px; }

/* interiores */
.cabecera-int { padding: 40px 0 34px; background: var(--verde-osc); color: #cfe3d7; }
.cabecera-int h1 { font-size: 30px; color: #fff; }
.texto-legal { padding: 40px 0 56px; }
.encuentros-intro { padding: 40px 0 10px; }
.encuentros-intro .caja { display: grid; gap: 26px; }
.encuentros-intro .caja > * { min-width: 0; }
.encuentros-intro p { font-size: 1.0625rem; }
.encuentros-intro img { width: 100%; aspect-ratio: 9/7; object-fit: cover; border-radius: 16px; }
.encuentros-lista { padding: 30px 0 50px; }
.encuentro { display: grid; grid-template-columns: 48px 1fr; gap: 16px; padding: 26px 0; border-bottom: 1px solid var(--linea); }
.enc-num { width: 44px; height: 44px; border-radius: 50%; font: 800 20px/44px "Montserrat", sans-serif; text-align: center; background: var(--menta); color: var(--verde-osc); }
.encuentro h2 { font-size: 1.35rem; margin-bottom: 4px; }
.enc-hoja { font-size: 14px; font-weight: 500; color: var(--verde); }
.enc-tarea { padding: 10px 14px; border-left: 3px solid var(--lapiz); background: #fdf8e6; font-size: 15px; }
.traer { padding: 50px 0 64px; background: var(--menta); }
.traer h2 { font-size: 1.5rem; margin-bottom: 12px; }
.traer ul { padding-left: 20px; }
.texto-legal h2 { font-size: 18px; margin: 24px 0 6px; }

@media (min-width: 720px) {
  .portada h1 { font-size: 42px; }
  .perfiles { grid-template-columns: 1fr 1.25fr 1fr; }
  .fila-doble { grid-template-columns: 1fr 1fr 1fr; }
  .endbar .caja { grid-template-columns: 1.3fr 1fr; }
}

@media (min-width: 1040px) {
  .headbar nav { display: block; }
  .abrir-menu { display: none; }
  .portada { padding: 70px 0 80px; }
  .portada .caja { grid-template-columns: 1.05fr .95fr; align-items: center; gap: 56px; }
  .portada h1 { font-size: 50px; }
  .calc-grid { grid-template-columns: .9fr 1.1fr; align-items: center; gap: 56px; }
  .carta .caja { grid-template-columns: .8fr 1.2fr; align-items: center; gap: 56px; }
  .anotarse .caja { grid-template-columns: .85fr 1.15fr; gap: 60px; }
  .para-quien, .sabados, .precios, .dudas, #calculadora-cuotas, .carta { padding: 84px 0; }
  .cabecera-int { padding: 64px 0 50px; }
  .encuentros-intro .caja { grid-template-columns: 1.2fr .8fr; align-items: center; gap: 50px; }
  .encuentro { grid-template-columns: 70px 1fr; }
  .encuentro > div:last-child { max-width: 820px; }
  .cabecera-int h1 { font-size: 42px; }
}