/*
 * Web pública de Lawks.
 *
 * Hereda la identidad del portal (lawks.css: Nunito, neutros fríos, menta
 * como acento MEDIDO y no como protagonista, píldoras, sombras discretas) y
 * añade solo lo que una página larga necesita y la app no tiene: franjas,
 * rejillas de tres, pasos numerados y el bloque de precios.
 *
 * Decisiones de conversión que están en el CSS y no en el copy:
 *
 *  - El formulario del hero es lo más grande y lo más contrastado de la
 *    página. Todo lo demás cede protagonismo.
 *  - Un solo estilo de acción primaria (.cta). Los enlaces de sección son
 *    texto, no botones: dos botones compitiendo reparten la atención y
 *    bajan las dos.
 *  - Ancho de lectura acotado a ~62ch en los párrafos largos. Una línea de
 *    140 caracteres se abandona a la mitad.
 */

body.web {
  background: var(--fondo);
  color: var(--tinta);
  margin: 0;
}

body.web main { display: block; max-width: none; padding: 0; }

/* El enlace de salto: invisible hasta que alguien tabula, que es justo
   cuando hace falta. Sin él, quien navega con teclado se come la cabecera
   entera antes de llegar al formulario. */
.salto-contenido {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--tinta);
  color: #fff;
  padding: .8rem 1.2rem;
  border-radius: 0 0 var(--radio) 0;
  z-index: 100;
}
.salto-contenido:focus { left: 0; }

/* --- Cabecera ---------------------------------------------------------- */

.web-cabecera {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1rem clamp(1rem, 4vw, 3rem);
  background: var(--tarjeta);
  border-bottom: 1px solid var(--linea);
  position: sticky;
  top: 0;
  z-index: 20;
}
.web-logo img { height: 30px; display: block; }
.web-nav { display: flex; gap: 1.4rem; margin-left: auto; }
.web-nav a {
  color: var(--tinta-media);
  text-decoration: none;
  font-size: .95rem;
  padding: .3rem 0;
  border-bottom: 2px solid transparent;
}
.web-nav a:hover, .web-nav a:focus-visible {
  color: var(--tinta);
  border-bottom-color: var(--menta);
}
.web-entrar {
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--pildora);
  padding: .5rem 1.1rem;
  text-decoration: none;
  color: var(--tinta);
  font-weight: 600;
  font-size: .95rem;
  white-space: nowrap;
}
.web-entrar:hover, .web-entrar:focus-visible { border-color: var(--menta-oscuro); }

@media (max-width: 860px) {
  .web-nav { display: none; }
  .web-entrar { margin-left: auto; }
}

/* --- Hero -------------------------------------------------------------- */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
  max-width: 1140px;
  margin: 0 auto;
  padding: clamp(2.5rem, 7vw, 5rem) clamp(1rem, 4vw, 3rem);
}

.hero h1 {
  font-size: clamp(2rem, 5.2vw, 3.2rem);
  line-height: 1.08;
  letter-spacing: -.02em;
  margin: 0 0 1rem;
  text-wrap: balance;
}
.hero-entrada {
  font-size: clamp(1.05rem, 2vw, 1.2rem);
  color: var(--tinta-media);
  max-width: 34rem;
  margin: 0 0 1.8rem;
}

.hero-form { display: flex; flex-direction: column; gap: .9rem; max-width: 34rem; }
.hero-form textarea {
  width: 100%;
  font: inherit;
  font-size: 1.05rem;
  padding: 1rem 1.1rem;
  border: 1.5px solid var(--linea-fuerte);
  border-radius: var(--radio);
  background: var(--tarjeta);
  resize: vertical;
  min-height: 5.5rem;
}
.hero-form textarea:focus-visible {
  border-color: var(--menta-oscuro);
  outline: 2px solid var(--menta);
  outline-offset: 1px;
}
.cta.grande { font-size: 1.05rem; padding: .95rem 2rem; align-self: flex-start; }

.hero-garantias {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.4rem;
  list-style: none;
  padding: 0;
  margin: 1.2rem 0 0;
  color: var(--tinta-media);
  font-size: .95rem;
}
/* La marca de verificación va con ::before y aria-hidden implícito: es
   decoración, y un lector de pantalla no debe leer "marca de verificación"
   antes de cada palabra. */
.hero-garantias li::before {
  content: "✓";
  color: var(--menta-oscuro);
  font-weight: 800;
  margin-right: .4rem;
}

.hero-prueba {
  background: var(--tarjeta);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 1.6rem;
}
.hero-prueba-titulo {
  font-weight: 800;
  font-size: 1.15rem;
  margin: 0 0 .5rem;
}
.hero-prueba p { color: var(--tinta-media); margin: 0; }

.cifras { display: flex; gap: 1.5rem; margin: 1.4rem 0 0; }
.cifras > div { flex: 1; }
.cifras dt {
  font-size: 2.2rem;
  font-weight: 800;
  line-height: 1;
  color: var(--menta-oscuro);
  font-variant-numeric: tabular-nums;
}
.cifras dd { margin: .35rem 0 0; font-size: .85rem; color: var(--gris); }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
  .hero-prueba { order: 2; }
}

/* --- Franjas ----------------------------------------------------------- */

.franja {
  padding: clamp(3rem, 7vw, 5rem) clamp(1rem, 4vw, 3rem);
}
.franja.alterna { background: var(--tarjeta); border-block: 1px solid var(--linea); }
.franja > * { max-width: 1140px; margin-inline: auto; }

.franja h2 {
  font-size: clamp(1.6rem, 3.4vw, 2.2rem);
  line-height: 1.15;
  letter-spacing: -.015em;
  margin: 0 0 1rem;
  text-wrap: balance;
}
.franja-entrada {
  color: var(--tinta-media);
  font-size: 1.05rem;
  max-width: 62ch;
  margin: 0 0 2.2rem;
}
.franja-nota {
  color: var(--gris);
  font-size: .9rem;
  max-width: 62ch;
  margin-top: 2rem;
}
.franja-cta { margin-top: 2.5rem; }

.tres, .dos {
  display: grid;
  gap: clamp(1.2rem, 3vw, 2.2rem);
  margin-top: 2rem;
}
.tres { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.dos { grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); }

.tres h3, .dos h3 { font-size: 1.1rem; margin: 0 0 .6rem; }
.tres p, .dos p { color: var(--tinta-media); margin: 0 0 .6rem; max-width: 46ch; }

.tarjeta {
  background: var(--fondo);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 1.5rem;
}
.franja.alterna .tarjeta { background: var(--fondo); }

/* --- Pasos ------------------------------------------------------------- */
/* La numeración se muestra porque el orden ES información: el paso 3 solo
   ocurre si el usuario lo decide, y eso hay que poder señalarlo. */

.pasos {
  list-style: none;
  padding: 0;
  margin: 2rem 0 0;
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  counter-reset: paso;
}
.pasos li { position: relative; padding-top: 3.2rem; }
.paso-num {
  position: absolute;
  top: 0;
  left: 0;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: var(--menta-tenue);
  color: var(--menta-oscuro);
  font-weight: 800;
  display: grid;
  place-items: center;
  font-variant-numeric: tabular-nums;
}
.pasos h3 { font-size: 1.1rem; margin: 0 0 .5rem; }
.pasos p { color: var(--tinta-media); margin: 0; max-width: 42ch; }

/* --- Sí / no ----------------------------------------------------------- */

.dos-columnas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: clamp(1.2rem, 3vw, 2.2rem);
  margin-top: 1rem;
}
.columna {
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 1.6rem;
  background: var(--tarjeta);
}
.columna.si { border-top: 3px solid var(--menta); }
/* Coral y no rojo de alarma: no es un error, es un límite declarado. */
.columna.no { border-top: 3px solid var(--coral); }
.columna h3 { margin: 0 0 1rem; font-size: 1.1rem; }
.columna ul { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: .8rem; }
.columna li { color: var(--tinta-media); }
.columna.si li::marker { color: var(--menta-oscuro); }
.columna.no li::marker { color: var(--coral); }

/* --- Precios ----------------------------------------------------------- */

.precios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: clamp(1.2rem, 3vw, 1.8rem);
}
.precio {
  background: var(--tarjeta);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 1.6rem;
}
/* Un solo destacado, y el del medio: el efecto ancla funciona cuando hay
   algo que anclar, no cuando todo grita. */
.precio.destacado {
  border: 1.5px solid var(--menta-oscuro);
  box-shadow: var(--sombra);
}
.precio h3 { margin: 0 0 .4rem; font-size: 1rem; color: var(--gris); font-weight: 600; }
.precio-cifra {
  font-size: 1.8rem;
  font-weight: 800;
  margin: 0 0 .8rem;
  letter-spacing: -.02em;
}
.precio p:last-child { color: var(--tinta-media); margin: 0; }

/* --- Preguntas --------------------------------------------------------- */

.faq { max-width: 48rem; margin-inline: 0; }
.faq details {
  border-bottom: 1px solid var(--linea);
  padding: 1.1rem 0;
}
.faq summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 1.05rem;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  color: var(--menta-oscuro);
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 1;
  flex-shrink: 0;
}
.faq details[open] summary::after { content: "−"; }
.faq summary:focus-visible { outline: 2.5px solid var(--menta-oscuro); outline-offset: 3px; }
.faq p { color: var(--tinta-media); margin: .8rem 0 0; max-width: 62ch; }

/* --- Cierre ------------------------------------------------------------ */

.cierre {
  text-align: center;
  padding: clamp(3.5rem, 8vw, 6rem) clamp(1rem, 4vw, 3rem);
  background: var(--tinta);
  color: #fff;
}
.cierre h2 {
  font-size: clamp(1.7rem, 4vw, 2.4rem);
  margin: 0 0 .7rem;
  text-wrap: balance;
  /* EXPLICITO: el h1,h2 de lawks.css fija --tinta y gana a la herencia del
     bloque oscuro — el titular del cierre se pintaba invisible (oscuro
     sobre oscuro, 1:1 medido). El color del bloque se declara aqui. */
  color: #fff;
}
.cierre p { color: #b8c2ca; margin: 0 0 2rem; }
.cierre .cta { background: var(--menta); color: var(--tinta); }
.cierre .cta:hover { background: #2ad493; }

/* --- Pie --------------------------------------------------------------- */

.web-pie {
  background: var(--tarjeta);
  border-top: 1px solid var(--linea);
  padding: clamp(2rem, 5vw, 3rem) clamp(1rem, 4vw, 3rem);
}
.pie-columnas {
  max-width: 1140px;
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: space-between;
  align-items: start;
}
.pie-logo { height: 26px; display: block; margin-bottom: .7rem; }
.pie-columnas .suave { max-width: 30ch; margin: 0; }
.web-pie nav { display: flex; gap: 1.4rem; flex-wrap: wrap; }
.web-pie nav a { color: var(--tinta-media); text-decoration: none; font-size: .95rem; }
.web-pie nav a:hover, .web-pie nav a:focus-visible { color: var(--tinta); text-decoration: underline; }
.pie-legal {
  max-width: 1140px;
  margin: 2rem auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--linea);
  color: var(--gris);
  font-size: .82rem;
  line-height: 1.6;
}

/* Quien pide menos movimiento no debería notar ninguno: aquí no hay
   animaciones esenciales, así que se apagan enteras. */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* --- v2: la estructura de lawks.co ------------------------------------- */

/* El "como tú" en cursiva del H1 original de lawks.co: es SU gesto de marca
   y se respeta tal cual. */
.hero h1 em { font-style: italic; color: var(--menta-oscuro); }

/* Tres caminos: cada tarjeta con su flecha, como en la web actual. */
.caminos .tarjeta { display: flex; flex-direction: column; }
.camino-cta {
  margin-top: auto;
  padding-top: 1rem;
  font-weight: 800;
  text-decoration: none;
  color: var(--menta-oscuro);
}
.camino-cta:hover, .camino-cta:focus-visible { text-decoration: underline; }

/* Testimonios: la comilla es la protagonista; el nombre, la prueba. */
.testimonios blockquote {
  margin: 0;
  background: var(--tarjeta);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.testimonios blockquote p {
  margin: 0;
  font-size: 1.05rem;
  color: var(--tinta);
  max-width: none;
}
.testimonios footer { color: var(--gris); font-size: .9rem; }
.testimonios footer strong { color: var(--tinta-media); }

/* Las tres garantías de respaldo bajo el sí/no. */
.respaldo { margin-top: 3rem; padding-top: 2.5rem; border-top: 1px solid var(--linea); }

/* El bloque de rondas: un aparte dentro de precios, no otra sección. */
.para-rondas {
  margin-top: 2.5rem;
  background: var(--fondo);
  border: 1px solid var(--linea);
  border-left: 3px solid var(--menta);
  border-radius: var(--radio);
  padding: 1.4rem 1.6rem;
}
.para-rondas h3 { margin: 0 0 .5rem; font-size: 1.05rem; }
.para-rondas p { margin: 0; color: var(--tinta-media); max-width: 62ch; }

/* La posdata del cierre: pequeña y en el color secundario del bloque
   oscuro, como una nota al pie que se lee entera precisamente por serlo. */
.cierre .posdata {
  margin: 2rem auto 0;
  max-width: 46ch;
  font-size: .92rem;
  color: #b8c2ca;
}