@font-face{font-family:'Jost';font-style:normal;font-weight:300;font-display:swap;src:url('/fonts/jost-latin-300-normal.woff2') format('woff2');}
@font-face{font-family:'Jost';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/jost-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'Jost';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/jost-latin-500-normal.woff2') format('woff2');}
@font-face{font-family:'Karla';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/karla-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'Karla';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/karla-latin-500-normal.woff2') format('woff2');}
@font-face{font-family:'Karla';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/karla-latin-700-normal.woff2') format('woff2');}

/* Livia by Sandra · hoja de estilo del sitio */

:root{
  --crema:      #F4EFE6;
  --crema-2:    #EDE7DB;
  --papel:      #FCFAF6;
  --verde:      #2F4B3C;
  --verde-claro:#6F8A6A;
  --dorado:     #B08D57;
  --marron:     #836046;
  --tinta:      #2A2E28;
  --tinta-suave:#50564C;
  --gris:       #7B8175;
  --linea:      #DED7C9;
  --sombra:     0 1px 2px rgba(42,46,40,.05), 0 18px 45px -30px rgba(42,46,40,.45);
  --ancho:      1120px;
  --radio:      4px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--crema);
  color:var(--tinta);
  font-family:"Karla", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:var(--verde); text-decoration-thickness:1px; text-underline-offset:3px; }
a:hover{ color:var(--dorado); }

.contenedor{ max-width:var(--ancho); margin-inline:auto; padding-inline:22px; }
.seccion{ padding-block:clamp(52px, 8vw, 96px); }
.seccion.claro{ background:var(--papel); }
.seccion.verde{ background:var(--verde); color:#F3EFE6; }
.seccion.verde h2, .seccion.verde h3{ color:#F3EFE6; }
.seccion.verde .eyebrow{ color:#A9BFA4; }

/* ---------- tipografía ---------- */
h1, h2, h3{ font-family:"Jost", ui-sans-serif, sans-serif; font-weight:300; color:var(--verde); }
h1{ font-size:clamp(32px, 5.2vw, 52px); line-height:1.08; letter-spacing:-.015em; margin:0 0 18px; text-wrap:balance; }
h2{ font-size:clamp(25px, 3.4vw, 36px); line-height:1.15; margin:0 0 16px; text-wrap:balance; }
h3{ font-size:20px; line-height:1.25; margin:0 0 8px; font-weight:400; }
h1 em, h2 em{ font-style:normal; color:var(--dorado); }
p{ margin:0 0 16px; max-width:66ch; }
p:last-child{ margin-bottom:0; }
.lead{ font-size:clamp(17px, 2vw, 20px); color:var(--tinta-suave); }
.eyebrow{
  font-family:"Jost", sans-serif; font-size:11px; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--dorado);
  margin:0 0 12px;
}
.small{ font-size:13.5px; color:var(--gris); }

/* ---------- cabecera ---------- */
.cabecera{
  position:sticky; top:0; z-index:40;
  background:rgba(244,239,230,.94);
  backdrop-filter:saturate(1.2) blur(8px);
  border-bottom:1px solid var(--linea);
}
.cabecera .fila{
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; padding-block:14px;
}
.cabecera .logo img{ width:126px; }
.nav{ display:flex; align-items:center; gap:26px; }
.nav a{
  font-family:"Jost", sans-serif; font-size:13.5px; letter-spacing:.06em;
  color:var(--tinta-suave); text-decoration:none;
}
.nav a:hover, .nav a[aria-current="page"]{ color:var(--dorado); }
.btn{
  display:inline-block; border-radius:999px; padding:12px 22px;
  font-family:"Jost", sans-serif; font-size:14px; letter-spacing:.05em;
  text-decoration:none; transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.btn.principal{ background:var(--verde); color:#F3EFE6; border:1px solid var(--verde); }
.btn.principal:hover{ background:#26402F; color:#F3EFE6; }
.btn.secundario{ background:transparent; color:var(--verde); border:1px solid var(--linea); }
.btn.secundario:hover{ border-color:var(--dorado); color:var(--dorado); }
.btn.claro{ background:#F3EFE6; color:var(--verde); border:1px solid #F3EFE6; }
.btn.claro:hover{ background:#fff; color:var(--verde); }
.menu-boton{
  display:none; background:none; border:1px solid var(--linea); border-radius:var(--radio);
  padding:8px 12px; font-family:"Jost",sans-serif; font-size:13px; color:var(--tinta-suave); cursor:pointer;
}
@media (max-width:880px){
  .menu-boton{ display:block; }
  .nav{
    display:none; position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:flex-start; gap:0;
    background:var(--papel); border-bottom:1px solid var(--linea); padding:8px 22px 18px;
  }
  .nav.abierto{ display:flex; }
  .nav a{ padding:12px 0; width:100%; border-bottom:1px solid var(--linea); font-size:15px; }
  .nav .btn{ margin-top:14px; border-bottom:0; }
}

/* ---------- portada ---------- */
.hero{ background:var(--papel); border-bottom:1px solid var(--linea); }
.hero .grid{
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,5vw,64px); align-items:center;
  padding-block:clamp(44px, 7vw, 84px);
}
.hero-foto{ border-radius:var(--radio); overflow:hidden; box-shadow:var(--sombra); }
.hero-foto img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
@media (max-width:860px){ .hero .grid{ grid-template-columns:1fr; } }

.acciones{ display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }

/* ---------- rejillas ---------- */
.cols-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(22px,4vw,52px); align-items:center; }
.cols-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
@media (max-width:860px){ .cols-2, .cols-3{ grid-template-columns:1fr; } }

.tarjeta{
  background:var(--papel); border:1px solid var(--linea); border-radius:var(--radio);
  padding:26px 26px 28px; box-shadow:var(--sombra);
}
.tarjeta .precio{
  font-family:"Jost",sans-serif; font-size:30px; font-weight:300; color:var(--verde);
  display:block; margin:12px 0 4px;
}
.tarjeta .precio span{ font-size:14px; color:var(--gris); }
.seccion.verde .tarjeta{ background:rgba(255,255,255,.06); border-color:rgba(243,239,230,.22); box-shadow:none; }
.seccion.verde .tarjeta .precio{ color:#F3EFE6; }

ul.ticks{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
ul.ticks li{ display:grid; grid-template-columns:18px 1fr; gap:10px; align-items:start; color:var(--tinta-suave); }
ul.ticks li::before{ content:"✓"; color:var(--dorado); font-family:"Jost",sans-serif; line-height:1.5; }
.seccion.verde ul.ticks li{ color:#DCE4D8; }
.seccion.verde ul.ticks li::before{ color:#A9BFA4; }

ol.pasos{ list-style:none; margin:0; padding:0; display:grid; gap:2px; }
ol.pasos li{
  display:grid; grid-template-columns:36px 1fr; gap:14px;
  background:var(--papel); border:1px solid var(--linea); padding:20px 24px;
}
ol.pasos li:first-child{ border-radius:var(--radio) var(--radio) 0 0; }
ol.pasos li:last-child{ border-radius:0 0 var(--radio) var(--radio); }
ol.pasos li + li{ border-top:0; }
ol.pasos .n{ font-family:"Jost",sans-serif; font-size:21px; color:var(--verde-claro); line-height:1.15; }

.chips{ display:flex; flex-wrap:wrap; gap:9px; list-style:none; margin:0; padding:0; }
.chips li{
  background:var(--crema-2); border:1px solid var(--linea); border-radius:999px;
  padding:8px 16px; font-size:14px; color:var(--tinta-suave);
}

.aviso{
  background:#F7F1E4; border:1px solid #D8C69E; border-radius:var(--radio);
  padding:22px 24px; font-size:14px; color:var(--tinta-suave);
}
.aviso strong{ color:var(--tinta); }

.figura{ border-radius:var(--radio); overflow:hidden; box-shadow:var(--sombra); }
.figura img{ width:100%; aspect-ratio:3/2; object-fit:cover; }
.figura.alta img{ aspect-ratio:3/4; }

/* ---------- tabla de precios (página de programas) ---------- */
.tabla-envoltorio{ overflow-x:auto; background:var(--papel); border:1px solid var(--linea); border-radius:var(--radio); box-shadow:var(--sombra); }
table.tarifas{ border-collapse:collapse; width:100%; min-width:880px; font-variant-numeric:tabular-nums; }
table.tarifas th, table.tarifas td{ text-align:center; vertical-align:middle; padding:12px; }
table.tarifas th[scope="row"]{ text-align:left; font-weight:400; font-size:14px; color:var(--tinta-suave); padding-left:22px; }
table.tarifas thead th{ vertical-align:bottom; padding:24px 12px 16px; border-bottom:1px solid var(--linea); }
table.tarifas tr.grupo th{
  text-align:left; font-family:"Jost",sans-serif; font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--dorado); background:var(--crema-2);
  padding:12px 22px; border-top:1px solid var(--linea); border-bottom:1px solid var(--linea);
}
table.tarifas tbody tr:not(.grupo) + tr:not(.grupo) th, table.tarifas tbody tr:not(.grupo) + tr:not(.grupo) td{ border-top:1px solid var(--linea); }
.pfam{ display:block; font-family:"Jost",sans-serif; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--gris); }
.plevel{ display:block; margin-top:4px; font-family:"Jost",sans-serif; font-size:23px; letter-spacing:.06em; color:var(--dorado); }
.ptag{ display:block; margin-top:8px; font-size:11.5px; color:var(--gris); }
.num{ font-family:"Jost",sans-serif; font-size:19px; color:var(--tinta); white-space:nowrap; }
.qual{ display:block; margin-top:3px; font-size:11px; color:var(--gris); line-height:1.3; }
.ok{ color:var(--dorado); font-family:"Jost",sans-serif; font-size:16px; }
.none{ color:#B7BBAF; }
.txt{ display:block; font-size:13px; color:var(--tinta-suave); }
td.hi, thead th.hi{ background:#EDF2EA; }
.ib{ height:15px; width:15px; vertical-align:-3px; margin-left:4px; }

.pestanas{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.pestana{
  cursor:pointer; background:transparent; border:1px solid var(--linea); border-radius:var(--radio);
  padding:11px 18px; font-family:"Jost",sans-serif; font-size:12.5px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--gris);
}
.pestana[aria-selected="true"]{ background:var(--papel); color:var(--dorado); border-color:var(--dorado); box-shadow:var(--sombra); }
.pestana:focus-visible{ outline:2px solid var(--dorado); outline-offset:2px; }

/* ---------- pie ---------- */
.pie{ background:var(--verde); color:#DCE4D8; padding-block:52px 30px; }
.pie a{ color:#F3EFE6; }
.pie a:hover{ color:#CBB183; }
.pie .grid{ display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:34px; }
@media (max-width:760px){ .pie .grid{ grid-template-columns:1fr; } }
.pie img.logo{ width:150px; margin-bottom:16px; }
.pie h3{ font-family:"Jost",sans-serif; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:#A9BFA4; margin:0 0 10px; }
.pie ul{ list-style:none; margin:0; padding:0; display:grid; gap:8px; font-size:14.5px; }
.pie .legal{
  margin-top:34px; padding-top:20px; border-top:1px solid rgba(243,239,230,.2);
  font-size:11.5px; line-height:1.5; color:#A9BFA4;
}
.pie .legal p{ max-width:none; }

/* ---------- barra flotante de WhatsApp ---------- */
.wa{
  position:fixed; right:18px; bottom:18px; z-index:50;
  display:inline-flex; align-items:center; gap:9px;
  background:var(--verde); color:#F3EFE6; text-decoration:none;
  padding:13px 20px; border-radius:999px; box-shadow:0 10px 30px -12px rgba(42,46,40,.6);
  font-family:"Jost",sans-serif; font-size:14px; letter-spacing:.04em;
}
.wa:hover{ background:#26402F; color:#fff; }
.wa svg{ width:18px; height:18px; fill:currentColor; }
@media (max-width:520px){ .wa span{ display:none; } .wa{ padding:15px; } }

/* ---------- textos legales ---------- */
.texto-legal h2{ font-size:22px; margin-top:38px; }
.texto-legal p, .texto-legal li{ font-size:15px; color:var(--tinta-suave); }
.texto-legal ul{ padding-left:20px; }
mark{ background:#FBEFC6; color:#6B5A28; padding:1px 5px; border-radius:3px; }

@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *{ transition:none !important; } }
