/* DeMark, la portada. Solo lo que es suyo: la linea de "sin riesgo" pegada al
   boton del hero, la prueba social, la linea de las webs y la FAQ. El ritmo de
   las secciones tambien vive aqui porque sus ids son de esta pagina.

   Lo comun (el sistema en filas, los planes, la franja final) sigue en
   pivote.css, que comparten Pricing y el alta. Aqui no se anima nada: los
   efectos los ponen sitio.js y secciones.js, y sin JS todo se ve en su sitio.
   Ninguna etiqueta baja de 14 px (los tokens de sitio.css ya estan a 14). */

/* ---- (a) hero: el boton y su linea de sin riesgo ----
   La objecion ("me van a pedir la tarjeta") se responde donde se pulsa, no
   tres parrafos mas abajo. La linea va debajo del boton y con su ancho. */
.sitio .hero-alta { display: grid; justify-items: start; gap: 10px; margin: 0; }
.sitio .hero-nota {
  font-family: var(--fuente-mono); font-size: 14px; line-height: 1.4;
  letter-spacing: .1em; text-transform: uppercase; color: var(--texto-3);
}
/* .apertura-acciones es flex en sitio.css: el bloque boton+nota es un item mas
   y se alinea por arriba para que la nota no arrastre al boton de la demo. */
.sitio .apertura-acciones { align-items: flex-start; }

/* ---- (b) prueba social ---- */
.sitio .portada-pruebas {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(24px, 3vw, 48px);
}
.sitio .portada-prueba { position: relative; padding: 0 0 clamp(28px, 3vw, 40px); }
.sitio .portada-prueba::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--linea); }
.sitio .portada-prueba .dato { display: block; margin-bottom: 14px; }
.sitio .portada-prueba h3 { margin: 0 0 12px; font-size: clamp(24px, 2.1vw, 30px); }
.sitio .portada-prueba p { margin: 0 0 14px; color: var(--texto-2); }

/* El asesor: foto o monograma a la izquierda, su papel y su nombre al lado. */
.sitio .portada-asesor {
  display: flex; align-items: center; gap: clamp(20px, 2.4vw, 32px);
  margin-top: clamp(32px, 3.4vw, 48px); padding: clamp(24px, 2.6vw, 32px);
  border: 1px solid var(--linea); border-radius: var(--radio); background: var(--superficie);
}
.sitio .portada-asesor > div > p { margin: 0 0 10px; color: var(--texto-2); }
.sitio .portada-asesor > div > p:last-child { margin-bottom: 0; }
.sitio .portada-asesor-foto,
.sitio .portada-monograma {
  flex: none; width: 96px; height: 96px; border-radius: 50%;
  border: 1px solid var(--verde); object-fit: cover;
}
.sitio .portada-monograma {
  display: grid; place-items: center; margin: 0; background: var(--fondo-2);
  font-family: var(--fuente-titular); font-size: 34px; line-height: 1; color: var(--azul);
}
.sitio .portada-asesor-nombre {
  font-family: var(--fuente-titular); font-size: clamp(24px, 2.1vw, 30px); line-height: 1.1;
  color: var(--tinta);
}
@media (max-width: 900px) {
  .sitio .portada-pruebas { grid-template-columns: minmax(0, 1fr); }
  .sitio .portada-prueba { padding-top: clamp(20px, 3vw, 28px); }
}
@media (max-width: 640px) {
  .sitio .portada-asesor { flex-direction: column; align-items: flex-start; }
}

/* ---- (e) precios: la linea de las webs, debajo de los dos planes ---- */
.sitio .portada-webs {
  margin: clamp(28px, 3vw, 40px) 0 0; color: var(--texto-2);
  font-size: clamp(17px, 1.5vw, 20px);
}

/* ---- (f) FAQ: diez <details>, sin JS ----
   El triangulo propio del navegador se quita y en su sitio va la flecha de la
   identidad, girada cuando esta abierto. El area de pulsacion es toda la fila. */
.sitio .portada-faq { list-style: none; margin: 0; padding: 0; max-width: 76ch; }
.sitio .portada-faq-item { border-top: 1px solid var(--linea); }
.sitio .portada-faq > li:last-child .portada-faq-item { border-bottom: 1px solid var(--linea); }
.sitio .portada-faq-item > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: clamp(18px, 2vw, 24px) 0; cursor: pointer; list-style: none;
  font-family: var(--fuente-titular); font-size: clamp(21px, 1.9vw, 26px); line-height: 1.2;
  color: var(--tinta);
}
.sitio .portada-faq-item > summary::-webkit-details-marker { display: none; }
.sitio .portada-faq-item > summary:hover { color: var(--azul); }
.sitio .portada-faq-item > summary:focus-visible { outline: 2px solid var(--azul); outline-offset: 4px; }
.sitio .portada-faq-item > summary svg {
  flex: none; width: 18px; height: 18px; color: var(--azul);
  transform: rotate(90deg); transition: transform .25s var(--suave);
}
.sitio .portada-faq-item[open] > summary svg { transform: rotate(-90deg); }
.sitio .portada-faq-item > p {
  margin: 0 0 clamp(18px, 2vw, 24px); padding-right: 38px;
  color: var(--texto-2); max-width: 62ch;
}
@media (prefers-reduced-motion: reduce) {
  .sitio .portada-faq-item > summary svg { transition: none; }
}

/* ---- el ritmo de la portada: <main> por debajo de 9.500 px en 1440 ----
   sitio.css da a cada seccion 150 px arriba y abajo y a sus titulares 72 px:
   en las paginas de una sola idea va bien, pero la portada encadena seis
   secciones. Aqui se acortan solo las suyas, por id.
   herramientas/medir_portada.py mide el resultado. */
.sitio :is(#confianza, #sistema, #cambio, #precios, #faq) { padding-block: clamp(72px, 7vw, 96px); }
.sitio :is(#confianza, #sistema, #cambio, #precios, #faq) .seccion-cabeza { margin-bottom: clamp(32px, 3.4vw, 48px); }
.sitio :is(#confianza, #sistema, #cambio, #precios, #faq) .seccion-cabeza h2 { font-size: clamp(40px, 4.2vw, 60px); }
.sitio section.apertura { padding-bottom: clamp(56px, 5vw, 72px); }
.sitio #final { padding-block: clamp(80px, 8vw, 116px); }
.sitio #final h2 { font-size: clamp(52px, 6.4vw, 92px); }
@media (min-width: 1000px) {
  /* Los dos planes, uno al lado del otro, con su filete de abajo cada uno. */
  .sitio #precios .plat-tabla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(28px, 3vw, 48px); }
  .sitio #precios .plat-tabla > .tabla-fila { align-content: start; }
  .sitio #precios .plat-tabla > .tabla-fila::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--filete-fila); }
}

/* El boton de alta: ancho de verdad y centrado con su nota bajo el titular. */
.sitio .apertura-texto { text-align: center; }
.sitio .apertura-texto h1, .sitio .apertura-sub { margin-inline: auto; }
.sitio .apertura-texto .ceja { justify-content: center; }
.sitio .apertura-acciones { justify-content: center; }
.sitio .hero-alta { justify-items: center; text-align: center; }
.sitio .hero-alta .boton { min-width: min(360px, 100%); justify-content: center; padding: 18px 36px; font-size: 15px; }

/* Los precios por proyecto, debajo de los planes. */
.sitio .portada-proyectos { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--linea); }
.sitio .portada-proyectos-titulo { font-family: var(--serif); font-weight: 500; font-size: clamp(28px, 3vw, 38px); margin: 0 0 6px; }
.sitio .portada-proyectos-grupos { display: grid; gap: 28px 40px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin-top: 20px; }
.sitio .portada-proyecto .tabla-nombre { font-size: 22px; margin: 0 0 8px; padding-bottom: 8px; border-bottom: 1px solid var(--linea); }
.sitio .portada-proyecto-lineas { list-style: none; margin: 0; padding: 0; }
.sitio .portada-proyecto-lineas li { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--linea); font-size: 15px; }
.sitio .portada-proyecto-lineas li:last-child { border-bottom: 0; }
.sitio .portada-proyecto-lineas .dato { white-space: nowrap; color: var(--verde); }