/*
 * Secciones de la portada (pagos/public/portada/secciones.html). Todo cuelga de .cs-zona para no
 * chocar con los estilos de la primera pantalla. Los colores son los de pagos/public/estilos.css
 * (mismos nombres y valores); se repiten aquí para que estas secciones no dependan de otra hoja.
 * También las usa la plantilla de las páginas legales (legal.html).
 */
.cs-zona {
  --cielo-alto: #cddff9;
  --cielo-bajo: #eef3fb;
  --tinta: #1a2b4c;
  --gris: #5b6b86;
  --azul: #3f6fe8;
  --azul-hondo: #2c54c4;
  --azul-suave: #e7eefd;
  --nube: #ffffff;
  --sombra-nube: #d9e5f7;
  --borde: #d6e0f0;
  --sol: #f6b93b;
  --sol-suave: #fff3d6;
  --tarjeta: #ffffff;
  --cs-azul2: #8fb0f5;
  --cs-pie: #14223f;
  --cs-arriba: 0px; /* si la portada tiene una barra fija arriba, su altura */
  box-sizing: border-box;
  color: var(--tinta);
  font-family: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-color-scheme: dark) {
  .cs-zona {
    --cielo-alto: #0c1428;
    --cielo-bajo: #16213d;
    --tinta: #e8eefa;
    --gris: #a3b1cc;
    --azul: #7fa2ff;
    --azul-hondo: #9db8ff;
    --azul-suave: #22325a;
    --nube: #dfe7f7;
    --sombra-nube: #aebcd8;
    --borde: #2c3b61;
    --sol: #f6c35b;
    --sol-suave: #3a3222;
    --tarjeta: #121b33;
    --cs-azul2: #3d5a9e;
    --cs-pie: #080e1d;
  }
}
.cs-zona *, .cs-zona *::before, .cs-zona *::after { box-sizing: border-box; }
.cs-zona h2, .cs-zona h3 {
  font-family: "Bricolage Grotesque", "Instrument Sans", system-ui, sans-serif;
  font-weight: 700; letter-spacing: -.02em; margin: 0; color: var(--tinta);
}
.cs-zona a:focus-visible, .cs-zona summary:focus-visible, .cs-zona button:focus-visible {
  outline: 3px solid var(--azul); outline-offset: 3px; border-radius: 8px;
}
.cs-ancho { max-width: 1040px; margin: 0 auto; padding: 0 20px; }
.cs-estrecho { max-width: 760px; }
.cs-bloque { padding: 72px 0; scroll-margin-top: var(--cs-arriba); }
.cs-bloque h2 { font-size: clamp(30px, 7.5vw, 44px); line-height: 1.08; }
.cs-entradilla { color: var(--gris); font-size: 17px; margin: 14px 0 0; max-width: 60ch; }
.cs-entradilla strong { color: var(--tinta); }
.cs-nota { color: var(--gris); font-size: 14px; margin: 18px 0 0; max-width: 70ch; }

/* ------------------------------------------------------------------ Demostración (demo.css, al acercarse) */
.cs-demo { background: var(--cielo-bajo); padding-bottom: 56px; }
.cs-demo-sitio { margin-top: 28px; min-height: 420px; }
.cs-demo-sitio:has(.dm) { min-height: 0; }
.cs-demo .cs-nota { margin-top: 14px; }
.cs-demo-accion { margin: 22px 0 0; }
@media (min-width: 760px) {
  .cs-demo-sitio { min-height: 300px; }
  .cs-demo-accion .cs-boton { display: inline-block; width: auto; min-width: 260px; padding-left: 40px; padding-right: 40px; }
}

/* ------------------------------------------------------------------ Galería del Estudio */
.cs-galeria { background: linear-gradient(180deg, var(--cielo-alto) 0, var(--cielo-bajo) 260px); }
.cs-galeria[hidden] { display: none; }
.cs-galeria-lista {
  display: grid; gap: 14px; margin: 28px 0 0; padding: 0; list-style: none;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr));
}
@media (min-width: 760px) { .cs-galeria-lista { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; } }
.cs-foto a { display: block; border-radius: 16px; overflow: hidden; background: var(--azul-suave); border: 1px solid var(--borde); }
.cs-foto img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; transition: transform .3s; }
.cs-foto a:hover img { transform: scale(1.03); }
.cs-foto p { margin: 8px 2px 0; font-size: 14px; color: var(--gris); line-height: 1.4; }
.cs-foto-modo {
  display: inline-block; margin: 0 6px 4px 0; padding: 1px 8px; border-radius: 99px;
  background: var(--azul-suave); color: var(--azul-hondo); font-weight: 700; font-size: 14px;
}
.cs-foto-texto { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ------------------------------------------------------------------ Ventajas
   Las cuatro a la vista, sin números (no son pasos) ni tarjetas: icono pequeño, título y texto.
   Móvil: lista con el icono a la izquierda. Desde 760 px: dos columnas. */
.cs-ventajas { background: var(--tarjeta); }
.cs-ventajas-lista {
  list-style: none; margin: 30px 0 0; padding: 0;
  display: grid; gap: 26px;
}
.cs-ventaja { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 16px; align-items: start; }
.cs-icono {
  grid-row: 1 / span 2; width: 36px; height: 36px; margin-top: 2px;
  fill: none; stroke: var(--azul); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.cs-icono-nube { height: 24px; margin-top: 8px; stroke-width: 7; } /* la nube de la marca, en trazo como los demás */
.cs-ventaja h3 { font-size: 21px; line-height: 1.2; margin: 0 0 6px; }
.cs-ventaja p { margin: 0; color: var(--gris); font-size: 16px; max-width: 46ch; }
.cs-ventaja strong { color: var(--tinta); }
@media (min-width: 760px) {
  .cs-ventajas-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 56px; margin-top: 40px; }
  .cs-ventaja h3 { font-size: 23px; }
  .cs-ventaja p { font-size: 17px; }
}

/* ------------------------------------------------------------------ Precios */
.cs-precios { background: var(--cielo-bajo); }
.cs-packs { display: grid; gap: 16px; margin-top: 30px; }
.cs-sin-packs {
  margin: 0; padding: 20px; border-radius: 20px; background: var(--tarjeta);
  border: 1px solid var(--borde); color: var(--gris);
}
.cs-pack {
  position: relative; display: flex; flex-direction: column;
  padding: 22px 20px 20px; border-radius: 22px;
  background: var(--tarjeta); border: 1.5px solid var(--borde);
}
/* Solo el pack destacado se eleva; los demás, planos */
.cs-pack.cs-mejor { border-color: var(--azul); box-shadow: inset 0 0 0 1px var(--azul), 0 24px 48px -28px rgba(63, 111, 232, .45); }
.cs-pack-cabeza { display: flex; align-items: center; gap: 16px; }
.cs-pack-nube { flex: none; width: 64px; display: flex; justify-content: center; }
.cs-pack-nube svg { display: block; fill: var(--nube); stroke: var(--sombra-nube); stroke-width: 2.5; }
/* En claro, nube blanca sobre tarjeta blanca: borde y sombra azulados para que se vea. */
@media (prefers-color-scheme: light) {
  .cs-pack-nube svg { fill: #f4f8ff; stroke: #a9c0ec; stroke-width: 3; filter: drop-shadow(0 5px 8px rgba(63, 111, 232, .3)); }
}
.cs-pack-precio {
  display: block; font-family: "Bricolage Grotesque", sans-serif; font-weight: 700;
  font-size: 36px; line-height: 1; letter-spacing: -.02em;
}
.cs-pack-nubes { display: block; color: var(--gris); margin-top: 4px; }
.cs-pack-nubes strong { color: var(--tinta); }
.cs-pack-datos { flex: 1 0 auto; list-style: none; margin: 16px 0 0; padding: 14px 0 0; border-top: 1px solid var(--borde); color: var(--gris); font-size: 15px; }
.cs-pack-datos li { margin: 0 0 4px; }
.cs-pack-ahorro { color: var(--azul-hondo) !important; font-weight: 700; }
.cs-pack-extra {
  position: absolute; top: -12px; right: 16px;
  padding: 4px 12px; border-radius: 99px; font-size: 14px; font-weight: 700;
  background: var(--sol); color: #3a2a05;
}
.cs-boton {
  display: block; width: 100%; margin-top: auto; padding: 15px 18px; border: 0; border-radius: 14px;
  font: inherit; font-weight: 700; font-size: 17px; text-align: center; text-decoration: none; cursor: pointer;
  color: #fff; background: var(--azul);
  box-shadow: 0 10px 22px -12px rgba(63, 111, 232, .7);
  transition: background .15s, transform .1s;
}
.cs-pack-datos + .cs-boton { margin-top: 18px; }
.cs-lista { margin: 24px 0 0; }
@media (min-width: 760px) { .cs-lista .cs-boton { display: inline-block; width: auto; min-width: 300px; padding-left: 40px; padding-right: 40px; } }
.cs-boton:hover { background: var(--azul-hondo); }
.cs-boton:active { transform: translateY(1px); }
.cs-zona .cs-boton:focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; border-radius: 14px; }
.cs-pack:not(.cs-mejor) .cs-boton { background: var(--azul-suave); color: var(--azul-hondo); box-shadow: none; }
.cs-pack:not(.cs-mejor) .cs-boton:hover { background: var(--borde); }
@media (prefers-color-scheme: dark) { .cs-boton { color: #0c1428; } }
@media (min-width: 760px) {
  .cs-packs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
  .cs-pack { padding: 26px 22px 22px; }
  .cs-pack-cabeza { flex-direction: column; align-items: flex-start; gap: 14px; }
  .cs-pack-nube { height: 56px; align-items: flex-end; justify-content: flex-start; }
}

/* ------------------------------------------------------------------ Preguntas */
.cs-preguntas { background: var(--tarjeta); }
.cs-faq { margin-top: 28px; }
.cs-faq-estado { color: var(--gris); margin: 0; padding: 16px 0; }
.cs-faq-estado a, .cs-faq .respuesta a { color: var(--azul-hondo); font-weight: 600; }
.cs-faq details { border-bottom: 1px solid var(--borde); }
.cs-faq details:first-child { border-top: 1px solid var(--borde); }
.cs-faq summary {
  list-style: none; cursor: pointer; position: relative;
  padding: 17px 40px 17px 4px; font-weight: 600; font-size: 17px; border-radius: 10px;
}
.cs-faq summary::-webkit-details-marker { display: none; }
.cs-faq summary::after {
  content: ""; position: absolute; right: 12px; top: 50%; width: 9px; height: 9px;
  border-right: 2px solid var(--gris); border-bottom: 2px solid var(--gris);
  transform: translateY(-70%) rotate(45deg); transition: transform .2s;
}
.cs-faq details[open] > summary::after { transform: translateY(-30%) rotate(-135deg); }
.cs-faq summary:hover { color: var(--azul-hondo); }
.cs-faq .respuesta { padding: 0 4px 18px; }
.cs-faq .respuesta p { margin: 0 0 10px; }
.cs-faq .respuesta p:last-child { margin-bottom: 0; }
.cs-faq .respuesta ul, .cs-faq .respuesta ol { margin: 0 0 12px; padding-left: 22px; }
.cs-faq .respuesta li { margin-bottom: 6px; }
.cs-faq [hidden] { display: none !important; }
.cs-faq .consejo { background: var(--sol-suave); border-radius: 12px; padding: 12px 14px; }
.cs-faq .nota { color: var(--gris); font-size: 15px; }
.cs-faq .tenue { color: var(--gris); }
.cs-faq .tabla-envoltorio { overflow-x: auto; margin: 4px 0 12px; border: 1px solid var(--borde); border-radius: 14px; }
.cs-faq .tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
.cs-faq .tabla th, .cs-faq .tabla td { text-align: left; padding: 9px 10px; vertical-align: top; border-bottom: 1px solid var(--borde); }
.cs-faq .tabla tr:last-child th, .cs-faq .tabla tr:last-child td { border-bottom: 0; }
.cs-faq .tabla thead th { background: var(--cielo-bajo); font-size: 14px; color: var(--gris); font-weight: 600; }
.cs-faq .tabla .cifra { white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 600; }
@media (min-width: 620px) {
  .cs-faq .tabla { font-size: 15px; }
  .cs-faq .tabla th, .cs-faq .tabla td { padding: 10px 12px; }
  .cs-faq .tabla tbody th { white-space: nowrap; }
}
.cs-mas { margin: 26px 0 0; }
.cs-enlace {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; margin-left: -4px;
  color: var(--azul-hondo); font-weight: 700; text-decoration: none; font-size: 17px;
}
.cs-enlace:hover { text-decoration: underline; }

/* ------------------------------------------------------------------ Pie */
.cs-pie { background: var(--cs-pie); color: #c9d4ea; padding: 44px 0 36px; font-size: 15px; }
.cs-pie-dentro { display: grid; gap: 18px; }
.cs-pie-marca { display: inline-flex; align-items: center; min-height: 44px; gap: 10px; color: #fff; text-decoration: none; justify-self: start; }
.cs-pie-marca svg { width: 36px; fill: #7fa2ff; }
.cs-pie-marca span { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 22px; letter-spacing: -.01em; }
.cs-pie-enlaces { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-left: -10px; }
.cs-pie-enlaces a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: #e8eefa; text-decoration: none; padding: 10px; border-radius: 8px;
  overflow-wrap: anywhere;
}
.cs-pie-enlaces a:hover { background: rgba(255, 255, 255, .08); text-decoration: underline; }
.cs-zona.cs-pie a:focus-visible { outline-color: #9db8ff; }
.cs-pie-legal { margin: 0; color: #a3b1cc; font-size: 14px; max-width: 70ch; }
@media (min-width: 860px) {
  .cs-pie-dentro { grid-template-columns: auto 1fr; align-items: center; column-gap: 32px; }
  .cs-pie-enlaces { justify-content: flex-end; }
  .cs-pie-legal { grid-column: 1 / -1; }
}

/* ------------------------------------------------------------------ Menos movimiento */
@media (prefers-reduced-motion: reduce) {
  .cs-zona *, .cs-zona *::before, .cs-zona *::after { transition: none !important; animation: none !important; }
}