/* ==========================================================================
   CAUCE · Hoja de estilos
   --------------------------------------------------------------------------
   1. Variables (colores y tipografías)
   2. Base
   3. Piezas reutilizables (botones, íconos, listas, chips)
   4. Cabecera y hero
   5. Cómo trabajamos
   6. Planes por rubro (pestañas, planes, propuestas, aviso)
   7. Incluido en todos los planes
   7.5 Quiénes somos
   8. Preguntas frecuentes
   9. Contacto
   10. Pie
   11. Botón flotante de WhatsApp
   12. Animaciones y efectos
   13. Celular
   14. Accesibilidad (movimiento reducido)
   ========================================================================== */

/* 1. Variables ============================================================ */
:root {
  /* Marca */
  --acento: #FF8A6B;          /* coral: botones y detalles */
  --acento-tinta: #2B0E06;    /* texto sobre coral */
  --profundo: #08303A;        /* azul petróleo: fondos oscuros y títulos */
  --profundo-2: #0F4450;      /* tarjetas sobre fondo oscuro */
  --teal: #1D5F6B;
  --teal-claro: #3F8C96;
  --agua: #86D8D6;
  --agua-suave: #CFE7E3;

  /* Arenas */
  --arena: #EADFC8;           /* fondo general */
  --arena-2: #DFD1B4;
  --arena-borde: #D6C6A5;
  --crema: #F4ECDD;           /* tarjetas claras */

  /* Textos */
  --texto: #3D5A5E;
  --texto-fuerte: #1F3B40;
  --texto-claro: #C3DCE0;     /* sobre fondo oscuro */
  --texto-claro-fuerte: #E3EEF0;
  --titulo-claro: #F3E9D6;    /* títulos sobre fondo oscuro */

  /* Tipografías */
  --fuente-texto: 'Figtree', sans-serif;
  --fuente-titulo: 'Bricolage Grotesque', sans-serif;

  --ancho-max: 1160px;

  /* Curva de las animaciones: arranca ágil y frena suave, sin rebote */
  --curva: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* 2. Base ================================================================= */
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--arena);
  color: var(--texto);
  font-family: var(--fuente-texto);
  min-height: 100vh;
}

[hidden] { display: none !important; }

/* Que la cabecera fija no tape el título al saltar a una sección */
#planes, #faq, #contacto { scroll-margin-top: 24px; }
#incluido { scroll-margin-top: 60px; }

a:not([class]) { color: #B84A2B; }
a:not([class]):hover { color: #8A3820; }

:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }

/* Datos a completar: se ven resaltados hasta que los reemplaces */
.pendiente {
  background: rgba(255, 138, 107, 0.3);
  color: inherit;
  border-radius: 4px;
  padding: 0 3px;
}

/* 3. Piezas reutilizables ================================================= */

/* Botones */
.btn {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
}
.btn--acento { background: var(--acento); color: var(--acento-tinta); }
.btn--profundo { background: var(--profundo); color: var(--titulo-claro); }
.btn--borde-agua { border: 1.5px solid var(--agua); color: #FFFFFF; font-weight: 600; }
.btn--borde-teal { border: 1.5px solid var(--teal); color: var(--profundo); }
.btn--borde-profundo { border: 1.5px solid var(--profundo); color: var(--profundo); }

.btn--nav { min-height: 44px; padding: 0 20px; }
.btn--medio { min-height: 48px; padding: 0 24px; }
.btn--grande { min-height: 52px; padding: 0 28px; font-size: 16px; }

/* Íconos de línea */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icono {
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icono--check { stroke: var(--teal); stroke-width: 2.4; margin-top: 1px; }
.icono--chat { stroke-width: 2; }
.icono--flecha { stroke-width: 2.2; }

/* Listas con tilde */
.lista-check {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--texto-fuerte);
}
.lista-check li { display: flex; gap: 10px; }
.lista-check--amplia { gap: 14px; }
.lista-check--oscura { color: var(--texto-claro-fuerte); }
.lista-check--oscura .icono--check { stroke: var(--agua); }
.lista-check--columnas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
  gap: 12px 20px;
}

/* Chips y rótulos */
.chip {
  display: inline-flex;
  align-self: flex-start;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.chip--claro { background: #F6DCD1; color: #9A3D22; }
.chip--oscuro { background: rgba(255, 138, 107, 0.16); color: var(--acento); }
.chip--agua { background: rgba(29, 95, 107, 0.14); color: var(--teal); }

.rotulo {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--agua);
}

/* 4. Cabecera y hero ====================================================== */
.portada { background: var(--profundo); color: var(--texto-claro); }

/* Fija arriba; al hacer scroll (clase que pone main.js) se vuelve translúcida */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(8, 48, 58, 1);
  color: var(--texto-claro);
  transition: background-color 0.4s var(--curva), box-shadow 0.4s var(--curva);
}
.cabecera--scroll {
  background: rgba(8, 48, 58, 0.8);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(134, 216, 214, 0.14), 0 12px 28px -18px rgba(4, 24, 30, 0.7);
}

.cabecera__interior {
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: 18px 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  position: relative;
  z-index: 2;
}

.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.marca__icono { stroke: var(--agua); stroke-width: 2.4; }
.marca__nombre {
  font-family: var(--fuente-titulo);
  font-weight: 800;
  font-size: 24px;
  letter-spacing: -0.03em;
  color: #FFFFFF;
}

.nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; }
.nav__links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; }
.menu-boton { display: none; }   /* solo en celular: ver sección 13 */
.nav__link {
  color: var(--texto-claro);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  padding: 10px 0;
}

.hero { position: relative; overflow: hidden; min-height: 640px; }

/* Ondas animadas: cada línea se desplaza a su propia velocidad */
.hero__ondas { position: absolute; left: 0; bottom: 0; pointer-events: none; }
.hero__ondas g { animation: cc-flow 40s linear infinite; }
.hero__ondas g:nth-child(2) { animation-duration: 30s; }
.hero__ondas g:nth-child(3) { animation-duration: 22s; }
.hero__ondas g:nth-child(4) { animation-duration: 34s; }
.hero__ondas g:nth-child(5) { animation-duration: 18s; }
.hero__ondas g:nth-child(6) { animation-duration: 26s; }

@keyframes cc-flow {
  from { transform: translateX(0); }
  to { transform: translateX(-800px); }
}

.hero__contenido {
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: 72px 24px 240px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.hero__etiqueta {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--acento);
}
.hero__titulo {
  font-family: var(--fuente-titulo);
  font-weight: 800;
  font-size: clamp(36px, 6vw, 68px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  margin: 0;
  max-width: 820px;
  color: #F0DDB8;
}
.hero__bajada {
  font-size: 19px;
  line-height: 1.55;
  color: var(--texto-claro);
  max-width: 620px;
  margin: 0;
}
.hero__acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }

/* 5. Cómo trabajamos ====================================================== */
.pasos { background: var(--agua-suave); color: #2F4B50; }
.pasos__interior {
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: 64px 24px 72px;
}
.pasos__etiqueta {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 36px;
  text-align: center;
}
.pasos__camino { position: relative; }
.pasos__linea { position: absolute; left: 0; top: 0; pointer-events: none; }
.pasos__grilla {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 40px 32px;
  text-align: center;
}

.paso { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.paso__numero {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--profundo);
  color: #F0DDB8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fuente-titulo);
  font-weight: 800;
  font-size: 20px;
  box-shadow: 0 0 0 8px var(--agua-suave);
}
.paso__numero--acento { background: var(--acento); color: var(--acento-tinta); }
.paso__titulo {
  font-family: var(--fuente-titulo);
  font-weight: 700;
  font-size: 21px;
  margin: 8px 0 0;
  color: var(--profundo);
}
.paso__texto { margin: 0; font-size: 15px; line-height: 1.55; max-width: 300px; }

/* 6. Planes por rubro ===================================================== */
.planes { max-width: var(--ancho-max); margin: 0 auto; padding: 96px 24px 0; }
.planes__encabezado { display: flex; flex-direction: column; gap: 10px; margin-bottom: 28px; }
.planes__titulo {
  font-family: var(--fuente-titulo);
  font-weight: 800;
  font-size: clamp(30px, 4vw, 44px);
  letter-spacing: -0.03em;
  margin: 0;
  color: var(--profundo);
}
.planes__bajada { margin: 0; font-size: 17px; }

/* Pestañas */
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 36px; }
.tab {
  min-height: 46px;
  padding: 0 22px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  background: transparent;
  color: var(--profundo);
  border: 1.5px solid #C2AF89;
}
.tab[aria-selected="true"] {
  background: var(--acento);
  color: var(--acento-tinta);
  border-color: var(--acento);
}

/* Planes con precio (Inmobiliarias) */
.planes__grilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 24px;
  align-items: stretch;
}

.plan {
  background: var(--crema);
  border: 1px solid var(--arena-borde);
  border-radius: 20px;
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.plan__cabecera { display: flex; flex-direction: column; gap: 8px; }
.plan__nombre {
  font-family: var(--fuente-titulo);
  font-weight: 700;
  font-size: 26px;
  margin: 0;
  color: var(--profundo);
}
.plan__desc { margin: 0; font-size: 15px; line-height: 1.5; }
.plan__precio { display: flex; align-items: baseline; gap: 6px; }
.plan__monto {
  font-family: var(--fuente-titulo);
  font-weight: 800;
  font-size: 46px;
  letter-spacing: -0.03em;
  color: var(--profundo);
}
.plan__periodo { font-size: 16px; }
.plan__boton { margin-top: auto; display: flex; justify-content: center; min-height: 48px; }

.plan--oscuro {
  background: var(--profundo);
  color: var(--texto-claro);
  border: 0;
  position: relative;
}
.plan--oscuro .plan__nombre { color: var(--titulo-claro); }
.plan--oscuro .plan__monto { color: #FFFFFF; }
.plan__insignia {
  position: absolute;
  top: -14px;
  left: 32px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--acento);
  color: var(--acento-tinta);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Caso real: inmobiliaria que ya trabaja con Cauce */
.caso {
  margin-top: 24px;
  background: var(--agua-suave);
  color: #2F4B50;
  border-radius: 20px;
  padding: 36px 32px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 32px 48px;
  align-items: center;
  overflow: hidden;
}
.caso__info { display: flex; flex-direction: column; gap: 14px; }
.caso__titulo {
  font-family: var(--fuente-titulo);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--profundo);
}
.caso__texto { margin: 0; font-size: 16px; line-height: 1.55; }
.caso__boton { align-self: flex-start; gap: 8px; margin-top: 4px; }

.caso__visual { position: relative; display: flex; justify-content: center; padding: 18px 8px 34px; }
/* Formas orgánicas detrás de la ventana (se mueven lento: sección 12.10) */
.caso__mancha {
  position: absolute;
  inset: -4% 2%;
  background: var(--agua);
  opacity: 0.6;
  border-radius: 58% 42% 55% 45% / 48% 56% 44% 52%;
}
.caso__gota {
  position: absolute;
  right: 4%;
  top: 2%;
  width: 54px;
  height: 54px;
  background: var(--acento);
  opacity: 0.85;
  border-radius: 62% 38% 46% 54% / 55% 48% 52% 45%;
}

/* Ventana de navegador con un boceto de la web (o tu captura real) */
.caso__ventana {
  position: relative;
  width: 100%;
  max-width: 380px;
  background: #FFFDF8;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 24px 44px -24px rgba(8, 48, 58, 0.55);
}
.caso__barra {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  background: var(--profundo);
}
.caso__barra i { width: 8px; height: 8px; border-radius: 50%; background: var(--teal-claro); }
.caso__barra i:first-child { background: var(--acento); }
.caso__url {
  flex: 1;
  min-width: 0;
  margin-left: 8px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--profundo-2);
  color: var(--texto-claro);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.caso__pantalla img,
.caso__telefono img { display: block; width: 100%; height: auto; }
.caso__telefono {
  position: absolute;
  right: 3%;
  bottom: 0;
  width: 27%;
  max-width: 108px;
  border: 4px solid var(--profundo);
  border-radius: 16px;
  background: var(--profundo);
  overflow: hidden;
  box-shadow: 0 18px 30px -14px rgba(8, 48, 58, 0.65);
}
.caso__foto {
  height: 96px;
  background: linear-gradient(120deg, var(--teal), var(--teal-claro));
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 14px;
}
.caso__buscador { width: 64%; height: 22px; border-radius: 999px; background: #FFFDF8; }
.caso__fichas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 14px; }
.caso__ficha {
  height: 74px;
  border-radius: 8px;
  background:
    linear-gradient(var(--arena-borde), var(--arena-borde)) 8px 52px / 70% 5px no-repeat,
    linear-gradient(var(--arena-borde), var(--arena-borde)) 8px 62px / 45% 5px no-repeat,
    linear-gradient(var(--agua-suave), var(--agua-suave)) 0 0 / 100% 44px no-repeat,
    var(--crema);
}

/* Propuestas a medida (resto de los rubros) */
.propuesta {
  background: var(--crema);
  border: 1px solid var(--arena-borde);
  border-radius: 20px;
  padding: 40px 36px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 32px;
  align-items: center;
}
.propuesta__info { display: flex; flex-direction: column; gap: 14px; }
.propuesta__titulo {
  font-family: var(--fuente-titulo);
  font-weight: 700;
  font-size: 30px;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--profundo);
}
.propuesta__texto { margin: 0; font-size: 16px; line-height: 1.55; }
.propuesta__boton { align-self: flex-start; }

.propuesta--oscura { background: var(--profundo); color: var(--texto-claro); border: 0; }
.propuesta--oscura .propuesta__titulo { color: var(--titulo-claro); }

/* Variante "Estudios": más aire, precio a consultar y detalle a la derecha */
.propuesta--estudios { padding: 44px 40px; gap: 36px 48px; align-items: start; position: relative; }
.propuesta--estudios .propuesta__info { gap: 16px; }
.propuesta--estudios .propuesta__titulo { font-size: 32px; line-height: 1.1; }
.propuesta--estudios .propuesta__texto { line-height: 1.6; }
.propuesta--estudios .propuesta__boton { gap: 10px; min-height: 50px; padding: 0 26px; margin-top: 4px; }

.propuesta__precio {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
  padding-top: 20px;
  border-top: 1px solid var(--teal);
}
.propuesta__precio-texto {
  font-family: var(--fuente-titulo);
  font-weight: 700;
  font-size: 22px;
  color: #FFFFFF;
}
.propuesta__detalle { display: flex; flex-direction: column; gap: 22px; }
.propuesta__incluye { display: flex; flex-direction: column; gap: 12px; }

.nota {
  background: var(--profundo-2);
  border: 1px solid var(--teal);
  border-radius: 16px;
  padding: 20px 22px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.nota__icono { stroke: var(--acento); margin-top: 2px; }
.nota__cuerpo { display: flex; flex-direction: column; gap: 4px; }
.nota__titulo { font-weight: 700; font-size: 15px; color: var(--titulo-claro); }
.nota__texto { font-size: 14px; line-height: 1.5; }

/* Aviso de administración */
.aviso {
  margin-top: 28px;
  background: var(--arena-2);
  border-radius: 18px;
  padding: 24px 28px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
}
.aviso__icono {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--profundo);
  color: var(--agua);
  display: flex;
  align-items: center;
  justify-content: center;
}
.aviso__cuerpo { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.aviso__titulo {
  font-family: var(--fuente-titulo);
  font-weight: 700;
  font-size: 19px;
  color: var(--profundo);
}
.aviso__texto { font-size: 15px; line-height: 1.5; }
.aviso__boton { min-height: 46px; padding: 0 22px; }

/* 7. Incluido en todos los planes ========================================= */
.incluido {
  margin-top: 112px;
  background: var(--profundo);
  color: var(--texto-claro);
  position: relative;
}
.incluido__onda { display: block; position: absolute; left: 0; }
.incluido__onda--arriba { top: -59px; }
.incluido__onda--abajo { bottom: -59px; }
.incluido__interior {
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: 72px 24px 96px;
}
.incluido__titulo {
  font-family: var(--fuente-titulo);
  font-weight: 800;
  font-size: clamp(28px, 4vw, 40px);
  letter-spacing: -0.03em;
  margin: 0 0 8px;
  color: var(--titulo-claro);
}
.incluido__bajada { margin: 0 0 32px; font-size: 17px; }
.incluido__grilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.beneficio {
  background: var(--profundo-2);
  border: 1px solid var(--teal);
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.beneficio__icono { stroke: var(--agua); }
.beneficio__titulo {
  font-family: var(--fuente-titulo);
  font-size: 18px;
  font-weight: 700;
  margin: 0;
  color: var(--titulo-claro);
}
.beneficio__texto { margin: 0; font-size: 14px; line-height: 1.5; }

/* 7.5 Quiénes somos ======================================================= */
/* overflow-x: clip evita que la forma, al girar, asome por el costado en celular */
.nosotros { max-width: var(--ancho-max); margin: 0 auto; padding: 128px 24px 0; overflow-x: clip; }
.nosotros__grilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 56px 64px;
  align-items: center;
}
.nosotros__info { display: flex; flex-direction: column; gap: 16px; }
.nosotros__etiqueta {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal);
}
.nosotros__titulo {
  font-family: var(--fuente-titulo);
  font-weight: 800;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin: 0;
  color: var(--profundo);
}
.nosotros__texto { margin: 0; font-size: 17px; line-height: 1.6; }
.nosotros__frase {
  margin: 8px 0 0;
  padding-left: 18px;
  border-left: 3px solid var(--acento);
  font-family: var(--fuente-titulo);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.4;
  color: var(--profundo);
}

/* Ilustración: una forma orgánica con ondas que corren por dentro */
.nosotros__visual {
  position: relative;
  width: 100%;
  max-width: 400px;
  aspect-ratio: 1;
  margin: 0 auto;
}
.nosotros__halo {
  position: absolute;
  inset: -7%;
  background: var(--agua-suave);
  border-radius: 44% 56% 42% 58% / 57% 43% 58% 42%;
}
.nosotros__mancha {
  position: absolute;
  inset: 0;
  background: var(--profundo);
  border-radius: 58% 42% 55% 45% / 48% 56% 44% 52%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nosotros__icono {
  position: relative;
  width: 34%;
  height: auto;
  margin-bottom: 26%;
  stroke: var(--agua);
  stroke-width: 2;
}
.nosotros__ondas { position: absolute; left: 0; bottom: 0; }
.nosotros__ondas g { animation: cc-flow 30s linear infinite; }
.nosotros__ondas g:nth-child(2) { animation-duration: 20s; }
.nosotros__ondas g:nth-child(3) { animation-duration: 26s; }
.nosotros__ondas g:nth-child(4) { animation-duration: 16s; }

.nosotros__chip {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--crema);
  color: var(--profundo);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 14px 26px -14px rgba(8, 48, 58, 0.55);
}
.nosotros__chip::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--acento);
}
.nosotros__chip--1 { top: 9%; left: -6%; }
.nosotros__chip--2 { top: 45%; right: -8%; }
.nosotros__chip--3 { bottom: 9%; left: 4%; }

.nosotros__valores {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 16px;
  margin-top: 64px;
}
.valor {
  background: var(--crema);
  border: 1px solid var(--arena-borde);
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.valor__icono {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--agua-suave);
  color: var(--teal);
  display: flex;
  align-items: center;
  justify-content: center;
}
.valor__titulo {
  font-family: var(--fuente-titulo);
  font-size: 18px;
  font-weight: 700;
  margin: 0;
  color: var(--profundo);
}
.valor__texto { margin: 0; font-size: 14px; line-height: 1.5; }

/* 8. Preguntas frecuentes ================================================= */
.faq { max-width: var(--ancho-max); margin: 0 auto; padding: 96px 24px 0; }
.faq__titulo {
  font-family: var(--fuente-titulo);
  font-weight: 800;
  font-size: clamp(28px, 4vw, 40px);
  letter-spacing: -0.03em;
  margin: 0 0 22px;
  color: var(--profundo);
}
.faq__tabs { margin-bottom: 28px; }
.faq__grilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 16px 32px;
}
.faq__item { border-top: 2px solid var(--acento); padding: 20px 4px 8px; }
.faq__pregunta {
  font-family: var(--fuente-titulo);
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--profundo);
}
.faq__respuesta { margin: 0; font-size: 15px; line-height: 1.55; }

/* 9. Contacto ============================================================= */
.contacto { max-width: var(--ancho-max); margin: 0 auto; padding: 96px 24px 0; }
.contacto__caja {
  background: var(--arena-2);
  border: 1.5px solid #B9A47C;
  border-radius: 24px;
  box-shadow: 0 0 0 7px var(--arena), 0 0 0 8px #CBB68F, 0 28px 60px -32px rgba(8, 48, 58, 0.45);
  padding: 56px 32px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
}
/* Recorta las ondas al borde redondeado sin recortar el efecto de alrededor */
.contacto__fondo {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
}
.contacto__ondas {
  position: absolute;
  left: 50%;
  bottom: -60px;
  transform: translateX(-50%);
  pointer-events: none;
}
.contacto__titulo {
  font-family: var(--fuente-titulo);
  font-weight: 800;
  font-size: clamp(28px, 4vw, 42px);
  letter-spacing: -0.03em;
  margin: 0;
  position: relative;
  color: var(--profundo);
}
.contacto__texto {
  margin: 0;
  font-size: 17px;
  max-width: 520px;
  line-height: 1.55;
  position: relative;
}
.contacto__boton { position: relative; gap: 10px; margin-top: 8px; }
.contacto__boton .icono { stroke: var(--acento); }

/* 10. Pie ================================================================= */
.pie { margin-top: 72px; border-top: 1px solid var(--arena-borde); }
.pie__interior {
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: 32px 24px 40px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
  color: var(--texto);
}
.pie__marca { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pie__icono { stroke: var(--teal); stroke-width: 2.6; }
.pie__nombre {
  font-family: var(--fuente-titulo);
  font-weight: 800;
  font-size: 18px;
  color: var(--profundo);
}

/* 11. Botón flotante de WhatsApp ========================================== */
.wa-flotante {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 50;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 24px -8px rgba(8, 48, 58, 0.6);
  transition: transform 0.4s var(--curva);
}
.wa-flotante:hover { transform: scale(1.06); }

/* Deja lugar para que el botón flotante no tape el texto del pie */
@media (max-width: 1400px) {
  .pie__interior { padding-bottom: 96px; }
}

/* 12. Animaciones y efectos ===============================================
   Todo lo que depende de "html.anim" solo se activa si el dispositivo permite
   animaciones (la clase la pone un script mínimo en el <head> de index.html).
   Para ajustar el ritmo general: --curva (arriba) y las duraciones de acá.
   ========================================================================== */

/* 12.1 Entrada del hero: etiqueta, título, bajada y botones, de a uno */
@keyframes subir {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .hero__etiqueta,
  .hero__titulo,
  .hero__bajada,
  .hero__acciones .btn { animation: subir 0.8s var(--curva) backwards; }
  .hero__etiqueta { animation-delay: 0.1s; }
  .hero__titulo { animation-delay: 0.22s; }
  .hero__bajada { animation-delay: 0.38s; }
  .hero__acciones .btn:nth-child(1) { animation-delay: 0.54s; }
  .hero__acciones .btn:nth-child(2) { animation-delay: 0.66s; }
}

/* 12.2 Aparición al hacer scroll (main.js agrega .is-visible y el retraso en cascada) */
html.anim [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--curva), transform 0.7s var(--curva);
}
html.anim [data-reveal].is-visible { opacity: 1; transform: none; }

/* 12.3 Parallax de las ondas del hero (main.js las desplaza con el scroll) */
html.anim .hero__ondas { will-change: transform; }

/* 12.4 "Cómo trabajamos": la línea se dibuja de izquierda a derecha y cada
        paso aparece cuando la línea llega a su círculo */
html.anim [data-secuencia] .pasos__linea {
  clip-path: inset(0 85% 0 0);
  transition: clip-path 0.8s ease-in-out 0.3s;
}
html.anim [data-secuencia].is-visible .pasos__linea { clip-path: inset(0 15% 0 0); }

html.anim [data-secuencia] .paso {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s var(--curva), transform 0.6s var(--curva);
}
html.anim [data-secuencia] .paso:nth-child(2) { transition-delay: 0.6s; }
html.anim [data-secuencia] .paso:nth-child(3) { transition-delay: 1s; }
html.anim [data-secuencia].is-visible .paso { opacity: 1; transform: none; }

/* 12.5 Pestañas: el contenido nuevo entra con un fundido */
@keyframes panel-entra {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
html.anim .panel { animation: panel-entra 0.5s var(--curva); }

/* 12.6 Hover: transición de color en botones y tarjetas que se elevan */
.btn,
.tab,
.nav__link {
  transition: background-color 0.4s var(--curva), color 0.4s var(--curva), border-color 0.4s var(--curva),
              transform 0.4s var(--curva), box-shadow 0.4s var(--curva);
}

/* Botones coral: se elevan, brillan y los cruza un reflejo de luz */
.btn--acento { position: relative; overflow: hidden; }
.btn--acento::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.6), transparent);
  transform: translateX(-130%);
  pointer-events: none;
}
.plan,
.propuesta { transition: transform 0.5s var(--curva), box-shadow 0.5s var(--curva); }

@media (hover: hover) {
  .nav__link:hover { color: #FFFFFF; }
  .btn--acento:hover {
    background: #FF9F84;
    transform: translateY(-3px);
    box-shadow: 0 14px 26px -10px rgba(255, 138, 107, 0.8);
  }
  .btn--acento:hover::after { transform: translateX(340%); transition: transform 0.8s var(--curva); }
  .btn--profundo:hover { background: var(--teal); }
  .btn--borde-agua:hover { background: rgba(134, 216, 214, 0.16); }
  .btn--borde-teal:hover,
  .btn--borde-profundo:hover {
    background: var(--profundo);
    border-color: var(--profundo);
    color: var(--titulo-claro);
  }
  .tab[aria-selected="false"]:hover { background: rgba(8, 48, 58, 0.07); }

  .plan:hover,
  .propuesta:hover {
    transform: translateY(-6px);
    box-shadow: 0 28px 44px -28px rgba(8, 48, 58, 0.5);
  }
}

/* 12.7 Al apretar (también en celular, donde no hay hover): el botón se hunde apenas */
.btn:active { transform: scale(0.96); }
.btn--acento:active { background: #F47A59; }

/* 12.8 "Ver planes": una luz color agua recorre el borde del botón */
@property --giro {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
@keyframes recorrer { to { --giro: 360deg; } }

.btn--recorrido { position: relative; }
.btn--recorrido::before {
  content: "";
  position: absolute;
  inset: -1.5px;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(from var(--giro), transparent 0deg 230deg, var(--agua) 310deg, #FFFFFF 348deg, transparent 360deg);
  /* Deja visible solo el anillo del borde */
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  display: none;
}
@media (prefers-reduced-motion: no-preference) {
  .btn--recorrido { border-color: rgba(134, 216, 214, 0.3); }
  .btn--recorrido::before { display: block; animation: recorrer 3.2s linear infinite; }
}

/* 12.9 Recuadro de contacto: ondas que se mecen y anillos que se expanden,
        como cuando cae una gota en el agua */
.contacto__caja { --sx: 1.025; --sy: 1.11; }
.contacto__caja::before,
.contacto__caja::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 32px;
  border: 1.5px solid var(--acento);
  opacity: 0;
  pointer-events: none;
}
/* El anillo nace invisible, se insinúa y se pierde mientras se aleja */
@keyframes anillo {
  0% { transform: scale(1); opacity: 0; }
  25% { opacity: 0.4; }
  80%, 100% { transform: scale(var(--sx), var(--sy)); opacity: 0; }
}
@keyframes mecer {
  from { transform: translateY(6px); }
  to { transform: translateY(-10px); }
}
/* Reflejo que cruza el recuadro al llegar desde un botón (lo dispara main.js) */
.contacto__fondo::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 55%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.32), transparent);
  transform: translateX(-130%);
}
@keyframes barrido { to { transform: translateX(300%); } }

@media (prefers-reduced-motion: no-preference) {
  .contacto__caja::before { animation: anillo 6s ease-in-out infinite; }
  .contacto__caja::after { animation: anillo 6s ease-in-out 1.4s infinite; }
  .contacto__ondas path { animation: mecer 5s ease-in-out infinite alternate; }
  .contacto__ondas path:nth-child(2) { animation-duration: 6.5s; }
  .contacto__ondas path:nth-child(3) { animation-duration: 8s; }
  .contacto__caja.is-llegada .contacto__fondo::after { animation: barrido 1.4s ease-in-out 0.2s; }
}

/* 12.10 Caso real: las formas de fondo cambian de forma y la ventana flota */
@keyframes fluir {
  from { border-radius: 58% 42% 55% 45% / 48% 56% 44% 52%; transform: rotate(0deg); }
  to { border-radius: 44% 56% 42% 58% / 57% 43% 58% 42%; transform: rotate(8deg); }
}
@keyframes flotar {
  from { transform: translateY(5px); }
  to { transform: translateY(-5px); }
}
@media (prefers-reduced-motion: no-preference) {
  .caso__mancha { animation: fluir 9s ease-in-out infinite alternate; }
  .caso__gota { animation: fluir 7s ease-in-out infinite alternate-reverse; }
  .caso__ventana { animation: flotar 4.5s ease-in-out infinite alternate; }
  .caso__telefono { animation: flotar 5.5s ease-in-out infinite alternate-reverse; }
}

/* 12.12 Quiénes somos: la forma respira y las etiquetas flotan */
@keyframes respirar {
  from { border-radius: 58% 42% 55% 45% / 48% 56% 44% 52%; }
  to { border-radius: 45% 55% 44% 56% / 56% 44% 57% 43%; }
}
@media (prefers-reduced-motion: no-preference) {
  .nosotros__mancha { animation: respirar 8s ease-in-out infinite alternate; }
  .nosotros__halo { animation: fluir 11s ease-in-out infinite alternate-reverse; }
  .nosotros__chip { animation: flotar 5s ease-in-out infinite alternate; }
  .nosotros__chip--2 { animation-duration: 6.5s; animation-direction: alternate-reverse; }
  .nosotros__chip--3 { animation-duration: 5.8s; animation-delay: -2s; }
}
.valor { transition: transform 0.5s var(--curva), box-shadow 0.5s var(--curva); }
@media (hover: hover) {
  .valor:hover { transform: translateY(-6px); box-shadow: 0 28px 44px -28px rgba(8, 48, 58, 0.5); }
}
@media (hover: hover) {
  .caso__boton .icono { transition: transform 0.4s var(--curva); }
  .caso__boton:hover .icono { transform: translate(3px, -3px); }
}

/* 12.11 Pulso del botón de WhatsApp: una onda suave cada 6 segundos */
.wa-flotante::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 50%;
  background: #25D366;
  opacity: 0;
}
@keyframes wa-pulso {
  0% { transform: scale(1); opacity: 0.45; }
  13%, 100% { transform: scale(1.7); opacity: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .wa-flotante::before { animation: wa-pulso 6s ease-out 3s infinite; }
}

/* 13. Celular ============================================================= */
@media (max-width: 800px) {
  .pasos__linea { display: none; }
  /* Sin línea, los pasos van uno debajo del otro: cascada corta */
  html.anim [data-secuencia] .paso:nth-child(2) { transition-delay: 0.12s; }
  html.anim [data-secuencia] .paso:nth-child(3) { transition-delay: 0.24s; }
}

/* Menú hamburguesa: los links del header pasan a un panel desplegable */
@media (max-width: 760px) {
  .cabecera__interior { flex-wrap: nowrap; }
  .nav { flex-wrap: nowrap; gap: 10px; }

  .menu-boton {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(134, 216, 214, 0.12);
    cursor: pointer;
  }
  .menu-boton span {
    width: 20px;
    height: 2px;
    border-radius: 2px;
    background: var(--agua);
    transition: transform 0.4s var(--curva), opacity 0.4s var(--curva);
  }
  /* Abierto: las tres rayas se convierten en una X */
  .cabecera--menu .menu-boton span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .cabecera--menu .menu-boton span:nth-child(2) { opacity: 0; }
  .cabecera--menu .menu-boton span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .nav__links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
    padding: 4px 20px 16px;
    background: rgba(8, 48, 58, 0.97);
    border-radius: 0 0 20px 20px;
    box-shadow: 0 24px 32px -20px rgba(4, 24, 30, 0.75);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.4s var(--curva), transform 0.4s var(--curva), visibility 0s 0.4s;
  }
  .cabecera--menu .nav__links {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition-delay: 0s;
  }
  .cabecera--menu { background: rgba(8, 48, 58, 0.97); }

  .nav__links .nav__link {
    padding: 16px 4px;
    font-size: 18px;
    border-bottom: 1px solid rgba(134, 216, 214, 0.14);
  }
  .nav__links .nav__link:last-child { border-bottom: 0; }
}

@media (max-width: 600px) {
  /* Cabecera compacta, porque queda fija */
  .cabecera__interior { padding: 10px 16px; }
  .marca { gap: 8px; }
  .marca__icono { width: 26px; height: 26px; }
  .marca__nombre { font-size: 22px; }
  .btn--nav { min-height: 40px; padding: 0 16px; font-size: 14px; }

  .nosotros { padding: 104px 20px 0; }
  .nosotros__grilla { gap: 48px; }
  .nosotros__visual { max-width: 300px; }
  .nosotros__frase { font-size: 18px; }
  .nosotros__chip { font-size: 13px; padding: 8px 14px; }
  .nosotros__chip--1 { left: -4%; }
  .nosotros__chip--2 { right: -4%; }
  .nosotros__valores { margin-top: 48px; }

  .hero { min-height: 0; }
  .hero__contenido { padding: 40px 20px 220px; gap: 20px; }
  .hero__bajada { font-size: 17px; }
  .hero__acciones .btn { flex: 1 1 auto; justify-content: center; }

  .pasos__interior { padding: 48px 20px 56px; }

  .planes { padding: 64px 20px 0; }
  .tabs { margin-bottom: 32px; }
  .tab { padding: 8px 18px; font-size: 14px; line-height: 1.25; }

  .plan { padding: 32px 22px 28px; }
  .plan__insignia { left: 22px; }
  .plan__monto { font-size: 40px; }

  .propuesta,
  .propuesta--estudios { padding: 30px 22px; gap: 28px; }
  .propuesta__titulo,
  .propuesta--estudios .propuesta__titulo { font-size: 26px; line-height: 1.15; }

  .aviso { padding: 22px; }

  .incluido { margin-top: 96px; }
  .incluido__interior { padding: 48px 20px 64px; }

  .faq { padding: 72px 20px 0; }

  .contacto { padding: 72px 20px 0; }
  .contacto__caja { padding: 44px 22px 52px; --sx: 1.06; --sy: 1.06; }

  .caso { padding: 30px 22px; }
  .caso__titulo { font-size: 24px; }

  .pie { margin-top: 56px; }
  .pie__interior { padding: 28px 20px 96px; }

  .wa-flotante { right: 16px; bottom: 16px; }
}

/* 14. Accesibilidad ======================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}