@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700;800&display=swap');

:root{
  --azul-oscuro: #0B2E4F;
  --azul-oscuro-2: #123B63;
  --azul-vivo: #0093FF;       /* azul de marca real, confirmado en su CSS */
  --azul-vivo-hover: #0078CC;
  --azul-enlace: #3876FF;     /* azul de enlaces de texto, confirmado en su CSS */
  --azul-claro: #4FA8E0;
  --azul-claro-2: #E5F3FC;
  --fondo: #F6FAFD;
  --titulo: #0A0A0A;          /* color real de sus títulos: casi negro, no azul */
  --texto: #3E4C56;           /* color real de su texto de cuerpo */
  --texto-suave: #52697C;
  --borde: #DCEAF3;
  --blanco: #FFFFFF;
  --exito: #1E8F63;
  --alerta: #B4791F;
  --peligro: #C0392B;
  --fuente-titulo: 'Open Sans', sans-serif;
  --fuente-texto: 'Open Sans', sans-serif;
  --radio: 8px;                /* radio real de sus tarjetas (.box) */
  --sombra: 0 2px 3px rgba(10,10,10,.1), 0 0 0 1px rgba(10,10,10,.1);
  --sombra-hover: 0 0px 40px 0 rgba(90,90,90,.12), 0 0px 5px 0 rgba(0,0,0,.15);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--fondo); color:var(--texto);
  font-family:var(--fuente-texto); line-height:1.5; font-size:1rem;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--fuente-titulo); color:var(--titulo); line-height:1.2; font-weight:700; margin:0 0 .5em}
p{margin:0 0 1em}
a{color:var(--azul-enlace)}
img,svg{max-width:100%;display:block}
.contenedor{max-width:1152px; margin:0 auto; padding:0 24px}
section{padding:88px 0}
@media (max-width:720px){ section{padding:56px 0} }

/* ---------- Botones ---------- */
.boton{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 28px; border-radius:999px; font-weight:600; font-size:.95rem;
  border:none; cursor:pointer; text-decoration:none; transition:transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.boton:active{ transform:scale(.98) }
.boton-primario{
  background:var(--azul-vivo);
  color:#fff; box-shadow:none;
}
.boton-primario:hover{ background:var(--azul-vivo-hover) }
.boton-secundario{
  background:#fff; color:var(--azul-oscuro); border:1.5px solid var(--borde);
}
.boton-secundario:hover{ border-color:var(--azul-claro) }
.boton[disabled]{ opacity:.5; cursor:not-allowed; box-shadow:none }
.boton-bloque{ width:100%; padding:16px }

/* ---------- Navegación ---------- */
.nav{
  position:sticky; top:0; z-index:40; backdrop-filter:blur(10px);
  background:rgba(246,250,253,.85); border-bottom:1px solid var(--borde);
}
.nav .contenedor{ display:flex; align-items:center; justify-content:space-between; padding:14px 24px }
.marca{ display:flex; align-items:center; line-height:1 }
.marca-logo{ height:56px; width:auto; display:block }
.marca-nombre{ font-family:var(--fuente-titulo); font-weight:800; font-size:1.35rem; color:var(--azul-oscuro); letter-spacing:.03em }
.marca-slogan{ font-size:.68rem; color:var(--texto-suave); margin-top:2px }

/* ---------- Botón flotante de WhatsApp ---------- */
.whatsapp-flotante{
  position:fixed; right:20px; bottom:20px; z-index:50;
  display:flex; align-items:center; gap:10px;
  background:#25D366; color:#fff; text-decoration:none;
  padding:14px 20px 14px 16px; border-radius:999px;
  box-shadow:0 10px 24px -8px rgba(0,0,0,.35);
  font-weight:700; font-size:.92rem;
  transition:transform .15s ease, box-shadow .15s ease;
}
.whatsapp-flotante:hover{ transform:translateY(-2px); box-shadow:0 14px 28px -8px rgba(0,0,0,.4) }
.whatsapp-flotante svg{ flex-shrink:0 }
@media (max-width:520px){
  .whatsapp-flotante span{ display:none }
  .whatsapp-flotante{ padding:14px; }
}
.nav-links{ display:flex; align-items:center; gap:28px; list-style:none; margin:0; padding:0 }
.nav-links a{ color:var(--texto); text-decoration:none; font-weight:500; font-size:.92rem }
.nav-links a:hover{ color:var(--azul-claro) }
.nav-toggle{ display:none; background:none; border:none; cursor:pointer; padding:6px }
@media (max-width:860px){
  .nav-links{
    position:absolute; top:100%; left:0; right:0; background:#fff; flex-direction:column;
    align-items:flex-start; padding:16px 24px 22px; border-bottom:1px solid var(--borde);
    display:none; gap:16px;
  }
  .nav-links.abierto{ display:flex }
  .nav-toggle{ display:block }
}

/* ---------- Hero ---------- */
.hero{ position:relative; overflow:hidden; padding-top:64px }
.hero-fondo{
  position:absolute; inset:0; overflow:hidden; z-index:-1;
}
.circulo-decorativo{
  position:absolute; border-radius:50%; background:var(--azul-vivo);
  opacity:.10;
}
.circulo-decorativo.c1{ width:520px; height:520px; top:-220px; right:-160px }
.circulo-decorativo.c2{ width:300px; height:300px; bottom:-140px; left:-80px; opacity:.10 }
.circulo-decorativo.c3{ width:180px; height:180px; top:30%; left:6%; opacity:.12 }
.hero-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center }
@media (max-width:900px){ .hero-grid{ grid-template-columns:1fr } }
.pastilla{
  display:inline-flex; align-items:center; gap:8px; background:var(--azul-claro-2); color:var(--azul-oscuro-2);
  padding:6px 14px; border-radius:999px; font-size:.78rem; font-weight:600; margin-bottom:18px;
}
.hero h1{ font-size:clamp(2.1rem, 4.2vw, 3.4rem); font-weight:800; letter-spacing:-.02em }
.hero-sub{ color:var(--texto-suave); font-size:1.08rem; max-width:46ch }
.hero-cta{ display:flex; gap:14px; margin-top:28px; flex-wrap:wrap }
.hero-tarjeta{
  background:#fff; border:1px solid var(--borde); border-radius:10px; padding:26px;
  box-shadow:var(--sombra);
}
.hero-tarjeta .fila{ display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px dashed var(--borde); font-size:.9rem }
.hero-tarjeta .fila:last-child{ border-bottom:none }

/* ---------- Cómo funciona ---------- */
.pasos{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px }
@media (max-width:800px){ .pasos{ grid-template-columns:1fr } }
.paso{ background:#fff; border:1px solid var(--borde); border-radius:var(--radio); padding:26px }
.paso-numero{
  width:38px; height:38px; border-radius:50%; background:var(--azul-oscuro); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700; margin-bottom:14px;
}

/* ---------- Servicios ---------- */
.encabezado-seccion{ max-width:640px; margin:0 auto 48px; text-align:center }
.encabezado-seccion h2{ font-size:clamp(1.7rem,3vw,2.3rem) }
.encabezado-seccion p{ color:var(--texto-suave) }
.tarjetas-servicios{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px }
@media (max-width:800px){ .tarjetas-servicios{ grid-template-columns:1fr } }
.tarjeta-servicio{
  background:#fff; border:1px solid var(--borde); border-radius:var(--radio); padding:28px;
  transition:transform .18s ease, box-shadow .18s ease;
}
.tarjeta-servicio:hover{ transform:translateY(-4px); box-shadow:var(--sombra-hover) }
.icono-servicio{
  width:46px; height:46px; border-radius:14px; background:var(--azul-claro-2); color:var(--azul-oscuro);
  display:flex; align-items:center; justify-content:center; margin-bottom:16px;
}
.tarjeta-servicio ul{ margin:14px 0 0; padding-left:18px; color:var(--texto-suave); font-size:.92rem }
.tarjeta-servicio li{ margin-bottom:4px }

/* ---------- Formulario de agenda ---------- */
.agenda-grid{ display:grid; grid-template-columns:1fr 320px; gap:32px; align-items:start }
@media (max-width:960px){ .agenda-grid{ grid-template-columns:1fr } }
.tarjeta-form{ background:#fff; border:1px solid var(--borde); border-radius:10px; padding:32px }
@media (max-width:600px){ .tarjeta-form{ padding:22px } }
.grupo-form{ margin-bottom:34px }
.grupo-form h3{ font-size:1.15rem; display:flex; align-items:center; gap:8px }
.campo{ margin-bottom:16px }
.campo label{ display:block; font-size:.85rem; font-weight:600; margin-bottom:6px; color:var(--texto) }
.campo input[type=text], .campo input[type=tel], .campo input[type=email],
.campo input[type=date], .campo textarea, .campo select{
  width:100%; padding:12px 14px; border:1.5px solid var(--borde); border-radius:12px;
  font-family:var(--fuente-texto); font-size:.95rem; background:#fff; color:var(--texto);
}
.campo input:focus, .campo textarea:focus, .campo select:focus{
  outline:none; border-color:var(--azul-claro); box-shadow:0 0 0 3px rgba(79,168,224,.18);
}
.fila-2{ display:grid; grid-template-columns:1fr 1fr; gap:16px }
@media (max-width:560px){ .fila-2{ grid-template-columns:1fr } }

.contador{
  display:flex; align-items:center; justify-content:space-between; border:1.5px solid var(--borde);
  border-radius:12px; padding:10px 14px; margin-bottom:10px; background:#fff;
}
.contador button{
  width:30px; height:30px; border-radius:50%; border:1.5px solid var(--azul-claro); background:#fff;
  color:var(--azul-oscuro); font-size:1rem; cursor:pointer; line-height:1;
}
.contador span.valor{ min-width:22px; text-align:center; font-weight:700; color:var(--azul-oscuro) }

.opcion{
  display:flex; align-items:center; gap:12px; border:1.5px solid var(--borde); border-radius:12px;
  padding:12px 14px; margin-bottom:10px; cursor:pointer; background:#fff; transition:border-color .15s;
}
.opcion:hover{ border-color:var(--azul-claro) }
.opcion input{ accent-color:var(--azul-oscuro); width:18px; height:18px; flex-shrink:0 }
.opcion.marcada{ border-color:var(--azul-oscuro); background:var(--azul-claro-2) }
.opciones-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px }
@media (max-width:640px){ .opciones-grid{ grid-template-columns:1fr } }

.oculto{ display:none !important }

.aviso{
  display:flex; gap:10px; background:#FFF6E4; border:1px solid #F1DBA0; color:#7A5719;
  border-radius:12px; padding:14px; font-size:.85rem; margin-top:6px;
}
.reglamento-caja{
  display:flex; gap:10px; background:var(--azul-claro-2); border:1px solid var(--borde);
  border-radius:12px; padding:16px; font-size:.9rem; color:var(--texto)
}

/* Calendario */
.calendario{ display:grid; grid-template-columns:repeat(7,1fr); gap:8px }
@media (max-width:600px){ .calendario{ grid-template-columns:repeat(3,1fr) } }
.dia-calendario{
  border:2px solid var(--borde); border-radius:12px; padding:10px 4px; text-align:center; cursor:pointer;
  background:#fff; font-size:.78rem;
}
.dia-calendario .numero{ font-family:var(--fuente-titulo); font-weight:700; font-size:1.15rem; color:var(--azul-oscuro) }
.dia-calendario.disponible{ border-color:#BFE3D2; background:#F1FBF6 }
.dia-calendario.casi{ border-color:#F1DBA0; background:#FFF8E9 }
.dia-calendario.lleno{ border-color:#F3C9C9; background:#FDEEEE; color:#B23A3A; cursor:not-allowed; opacity:.85 }
.dia-calendario.seleccionado{ outline:3px solid var(--azul-oscuro); outline-offset:1px }
.leyenda{ display:flex; gap:18px; font-size:.78rem; color:var(--texto-suave); margin-top:12px; flex-wrap:wrap }
.leyenda span{ display:inline-flex; align-items:center; gap:6px }
.punto{ width:10px; height:10px; border-radius:50% }

/* Panel resumen (sticky) */
.panel-resumen{
  background:linear-gradient(160deg, var(--azul-oscuro), var(--azul-oscuro-2));
  color:#fff; border-radius:10px; padding:26px; position:sticky; top:96px;
}
.panel-resumen .etiqueta{ font-size:.75rem; text-transform:uppercase; letter-spacing:.06em; color:#BFE0F5 }
.panel-resumen .tiempo{ font-family:var(--fuente-titulo); font-size:2.3rem; font-weight:800; margin:6px 0 14px }
.panel-resumen .barra{ height:6px; border-radius:999px; background:rgba(255,255,255,.18); overflow:hidden }
.panel-resumen .barra-relleno{ height:100%; background:var(--azul-claro); transition:width .4s ease }
.panel-resumen .desglose{ margin-top:16px; font-size:.82rem; color:#D8ECF9 }
.panel-resumen .desglose div{ display:flex; justify-content:space-between; padding:4px 0 }
.panel-resumen .nota{ font-size:.72rem; color:#AFCFE6; margin-top:14px; border-top:1px solid rgba(255,255,255,.15); padding-top:12px }

/* Confirmación */
.confirmacion{
  max-width:520px; margin:0 auto; text-align:center; background:#fff; border:1px solid var(--borde);
  border-radius:10px; padding:40px 32px;
}
.confirmacion .icono-check{
  width:60px; height:60px; border-radius:50%; background:#E6F7EE; color:var(--exito);
  display:flex; align-items:center; justify-content:center; margin:0 auto 16px;
}
.resumen-lista{ text-align:left; background:var(--fondo); border-radius:12px; padding:18px; margin:20px 0; font-size:.9rem }
.resumen-lista p{ margin:0 0 6px }

.mensaje-error{ color:var(--peligro); font-size:.85rem; margin-top:10px }

/* ---------- Footer ---------- */
footer{ background:var(--azul-oscuro); color:#CFE1F0; padding:48px 0 28px; margin-top:40px }
footer .contenedor{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:24px }
footer a{ color:#CFE1F0 }
footer small{ display:block; margin-top:24px; color:#8FB3D0 }

/* Animación de aparición al hacer scroll */
.aparece{ opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease }
.aparece.visible{ opacity:1; transform:none }

/* ---------- Tarjetas de producto (líneas de servicio) ---------- */
.tarjetas-producto{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px }
@media (max-width:900px){ .tarjetas-producto{ grid-template-columns:1fr } }
.tarjeta-producto{
  background:#fff; border:1px solid var(--borde); border-radius:10px; padding:30px;
  display:flex; flex-direction:column; transition:transform .18s ease, box-shadow .18s ease;
}
.tarjeta-producto:hover{ transform:translateY(-4px); box-shadow:var(--sombra-hover) }
.tarjeta-producto .icono-servicio{ background:var(--azul-claro-2); color:var(--azul-vivo) }
.tarjeta-producto p{ color:var(--texto-suave); font-size:.93rem; flex-grow:1 }
.tarjeta-producto .conocer-mas{
  display:inline-flex; align-items:center; gap:6px; color:var(--azul-vivo); font-weight:600;
  font-size:.9rem; text-decoration:none; margin-top:6px;
}
.tarjeta-producto .conocer-mas:hover{ gap:10px }

/* ---------- Qué incluye (franja de iconos) ---------- */
.incluye-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px }
@media (max-width:900px){ .incluye-grid{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:560px){ .incluye-grid{ grid-template-columns:1fr } }
.incluye-item{ text-align:center }
.incluye-item .icono-servicio{ margin:0 auto 14px; background:var(--azul-claro-2); color:var(--azul-vivo) }
.incluye-item h3{ font-size:1.02rem }
.incluye-item p{ color:var(--texto-suave); font-size:.88rem }

/* ---------- Confianza / misión ---------- */
.confianza{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center }
@media (max-width:860px){ .confianza{ grid-template-columns:1fr } }
.confianza-lista{ list-style:none; margin:20px 0 0; padding:0; display:flex; flex-direction:column; gap:16px }
.confianza-lista li{ display:flex; gap:12px; font-size:.95rem; color:var(--texto) }
.confianza-lista .marca-check{
  flex-shrink:0; width:26px; height:26px; border-radius:50%; background:var(--azul-claro-2); color:var(--azul-vivo);
  display:flex; align-items:center; justify-content:center;
}
.confianza-visual{
  background:var(--azul-claro-2); border-radius:16px; position:relative; overflow:hidden;
  min-height:280px; display:flex; align-items:center; justify-content:center; padding:30px;
}
.confianza-visual .cifra{ text-align:center; position:relative; z-index:1 }
.confianza-visual .cifra strong{ display:block; font-family:var(--fuente-titulo); font-size:2.6rem; color:var(--azul-oscuro) }
.confianza-visual .cifra span{ font-size:.85rem; color:var(--texto-suave) }
.confianza-cifras{ display:flex; gap:28px; flex-wrap:wrap; justify-content:center }

/* ---------- Testimonios ---------- */
.testimonios-nota{
  text-align:center; font-size:.8rem; color:var(--texto-suave); background:var(--azul-claro-2);
  border-radius:999px; padding:6px 16px; display:inline-block; margin:0 auto 28px;
}
.testimonios-wrap{ text-align:center }
.testimonios-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px }
@media (max-width:860px){ .testimonios-grid{ grid-template-columns:1fr } }
.tarjeta-testimonio{
  background:#fff; border:1px solid var(--borde); border-radius:18px; padding:24px; text-align:left;
}
.tarjeta-testimonio .estrellas{ color:#F2B807; font-size:.9rem; margin-bottom:10px }
.tarjeta-testimonio p{ color:var(--texto); font-size:.92rem }
.tarjeta-testimonio .autor{ display:flex; justify-content:space-between; margin-top:14px; font-size:.78rem; color:var(--texto-suave) }

/* ---------- Banda CTA final ---------- */
.cta-banda{
  background:var(--azul-claro-2);
  border-radius:16px; padding:56px 40px; text-align:center; position:relative; overflow:hidden;
}
.cta-banda .circulo-decorativo{ opacity:.16 }
.cta-banda h2, .cta-banda p{ position:relative; z-index:1 }
.cta-banda p{ color:var(--texto-suave); max-width:46ch; margin:0 auto 26px }

/* ---------- Hero de página interna (agendar) ---------- */
.hero-interno{ padding:56px 0 8px; text-align:center }
.hero-interno h1{ font-size:clamp(1.9rem,3.6vw,2.6rem) }
.hero-interno p{ color:var(--texto-suave); max-width:52ch; margin:0 auto }