/*
 * Secciones de página: los bloques grandes de la Home y de las páginas de servicio.
 * Se apoyan en tokens.css, layout.css y componentes.css. Detalle en docs/DISENO.md §7 y §9.
 *
 * Índice:
 *   1. Portada            4. Experiencias / Proceso     7. Contacto
 *   2. Presentación       5. Portfolio                  8. Páginas de servicio
 *   3. Servicios          6. Personas y créditos · FAQ  9. Página legal
 */

/* ============================================================
   1. PORTADA — imagen (luego video) + capa de contraste + texto
   Alto: toda la pantalla (100svh), con un mínimo para que el contenido nunca se corte.
   La cabecera 'sobre-portada' flota arriba de este bloque.
   ============================================================ */
.portada {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: max(100vh, 40rem);
  min-height: max(100svh, 40rem);
  overflow: hidden;
}

.portada__fondo,
.portada__capa {
  position: absolute;
  inset: 0;
}

.portada__fondo {
  z-index: -2;
}

.portada__fondo picture,
.portada__fondo img {
  display: block;
  width: 100%;
  height: 100%;
}

.portada__fondo img {
  object-fit: cover;
  object-position: center;
}

/* Capa fija de contraste: el texto se lee con cualquier imagen o fotograma */
.portada__capa {
  z-index: -1;
  background: var(--overlay-video-movil);
}

@media (min-width: 1024px) {
  .portada__fondo img { object-position: right center; }
  .portada__capa { background: var(--overlay-video); }
}

.portada__contenido {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e-5);
  padding-block: calc(var(--alto-cabecera) + var(--e-7)) clamp(3rem, 7vw, 6rem);
}

.portada h1 {
  max-width: 14ch;
}

.portada__bajada {
  max-width: 34ch;
}

/* Botón principal + «Primera reunión sin cargo» (+ el círculo del reel en celular) */
.portada__acciones {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-5);
  width: 100%;
}

.portada__cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e-3);
}

/* En celular el texto puede pasar a dos líneas para dejar aire al círculo */
.portada__cta .etiqueta {
  max-width: 11rem;
  text-wrap: balance; /* «PRIMERA REUNIÓN / SIN CARGO» en vez de dejar «CARGO» solo */
}

@media (min-width: 768px) {
  .portada__cta {
    flex-direction: row;
    align-items: center;
    gap: var(--e-6);
  }

  .portada__cta .etiqueta {
    max-width: none;
  }
}

/* Escritorio: el círculo flota a la derecha, a media altura */
@media (min-width: 1024px) {
  .portada__acciones {
    width: auto;
  }

  .portada .reel {
    position: absolute;
    top: 44%;
    right: calc(var(--margen) + 8%);
  }
}

/* ============================================================
   2. PRESENTACIÓN — declaración grande y la S como firma
   ============================================================ */
.presentacion__texto {
  display: flex;
  flex-direction: column;
  gap: var(--e-5);
  align-items: flex-start;
}

.presentacion__firma {
  justify-self: end;
  align-self: center;
}

.presentacion__firma img {
  width: clamp(7.5rem, 22vw, 20rem);
  height: auto;
}

.presentacion .linea {
  margin-top: var(--separacion);
}

/* ============================================================
   3. SERVICIOS — dos columnas del mismo peso
   ============================================================ */
.servicio {
  gap: var(--e-5);
}

/* Las dos columnas miden lo mismo: el botón baja al fondo y quedan alineados */
.servicio .boton {
  align-self: flex-start;
  margin-top: auto;
}

/* ============================================================
   4. EXPERIENCIAS y PROCESO
   ============================================================ */
.encabezado-seccion {
  margin-bottom: var(--e-7);
  max-width: 18ch;
}

.proceso {
  list-style: none;
  margin: 0;
  padding: 0;
}

.paso {
  gap: var(--e-3);
}

/* ============================================================
   5. PORTFOLIO — bloque oscuro con un solo botón
   ============================================================ */
.portfolio__fila {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--e-6) var(--e-7);
}

.portfolio__texto {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e-5);
  flex: 1 1 28rem;
}

/* ============================================================
   6. PERSONAS Y CRÉDITOS · PREGUNTAS FRECUENTES
   ============================================================ */
.personas__retrato {
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
  max-width: 35rem;
}

.personas__texto {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--e-7);
}

/* Crédito: línea, nombre en etiqueta y rol. Los dos cocreadores usan el mismo estilo */
.credito {
  display: flex;
  flex-direction: column;
  gap: var(--e-1);
  padding-top: var(--e-3);
  border-top: 1px solid var(--texto);
}

.credito__rol {
  color: var(--texto-2);
}

/* Preguntas frecuentes: acordeón.
   Sin JavaScript todas las respuestas se ven y el botón queda como un título.
   faq.js agrega [data-listo], cierra las respuestas y muestra el ícono +/×.
   Cada respuesta es una grilla de una fila cuyo alto pasa de 0fr a 1fr (250 ms): así el alto se
   anima sin medirlo con JavaScript. Cerrada, queda con visibility:hidden (no se lee ni se enfoca). */
.faq {
  border-top: 1px solid var(--regla);
}

.faq__item {
  border-bottom: 1px solid var(--regla);
}

.faq__pregunta {
  font-size: var(--t-cuerpo-grande);
  font-weight: var(--peso-semibold);
  letter-spacing: 0;
  line-height: 1.3;
}

.faq__boton {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-5);
  width: 100%;
  min-height: 4.5rem;
  padding: var(--e-4) 0;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  cursor: default;
}

.faq[data-listo] .faq__boton {
  cursor: pointer;
}

.faq__icono {
  display: none;
  position: relative;
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  transition: transform var(--d-faq) var(--curva-salida);
}

.faq[data-listo] .faq__icono {
  display: block;
}

.faq__icono::before,
.faq__icono::after {
  content: "";
  position: absolute;
  background-color: currentColor;
}

.faq__icono::before {
  top: 50%;
  right: 0;
  left: 0;
  height: 2px;
  transform: translateY(-50%);
}

.faq__icono::after {
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
}

.faq__boton[aria-expanded="true"] .faq__icono {
  transform: rotate(45deg);
}


.faq__panel {
  display: grid;
  grid-template-rows: 1fr;
}

.faq__interior {
  min-height: 0;
  overflow: hidden;
}

.faq__interior p {
  padding: 0 var(--e-8) var(--e-5) 0;
  color: var(--texto-2);
}

.faq[data-listo] .faq__panel {
  transition:
    grid-template-rows var(--d-faq) var(--curva-salida),
    visibility 0s linear 0s;
}

.faq[data-listo] .faq__item:not([data-abierto]) .faq__panel {
  grid-template-rows: 0fr;
  visibility: hidden;
  transition:
    grid-template-rows var(--d-faq) var(--curva-salida),
    visibility 0s linear var(--d-faq);
}

/* faq.js lo pone un instante al arrancar para cerrar las respuestas sin animarlas */
.faq.sin-transicion *,
.faq.sin-transicion *::before,
.faq.sin-transicion *::after {
  transition: none !important;
}

/* ============================================================
   7. CONTACTO — bloque oscuro con WhatsApp y formulario
   ============================================================ */
.contacto__titulo {
  max-width: 16ch;
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
  text-wrap: balance; /* «Hablemos de / tu web» en vez de dejar «web» solo */
}

.contacto__whatsapp {
  gap: var(--e-5);
}

.contacto__formulario {
  --sep: var(--e-5);
}

.contacto__aviso {
  font-size: 0.9375rem;
  color: var(--texto-2);
}

.contacto__aviso a {
  color: var(--texto);
}

/* Cuando el formulario está apagado: explicación honesta + WhatsApp y correo */
.contacto__alternativa {
  --sep: var(--e-4);
}

/* Campo trampa anti-spam: fuera de la pantalla (no con display:none, que los bots saltean).
   Las personas no lo ven y el lector de pantalla lo ignora (aria-hidden + tabindex -1). */
.trampa {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Mensajes del envío: zona de estado, falla (con WhatsApp) y éxito */
.formulario__estado {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e-4);
  outline: none;
}

.formulario__estado:empty {
  display: none;
}

.formulario__estado p {
  max-width: none;
}

.formulario__fallo,
.formulario__exito::before {
  --icono-estado: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 7v6m0 3.5v.01'/%3E%3C/svg%3E");
}

.formulario__fallo {
  display: flex;
  align-items: flex-start;
  gap: var(--e-2);
  color: var(--error);
  font-weight: var(--peso-semibold);
}

.formulario__fallo::before,
.formulario__exito::before {
  content: "";
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  background-color: currentColor;
  -webkit-mask: var(--icono-estado) center / contain no-repeat;
  mask: var(--icono-estado) center / contain no-repeat;
}

.formulario__exito {
  display: flex;
  align-items: flex-start;
  gap: var(--e-3);
  padding: var(--e-6);
  border: 1px solid var(--exito);
  color: var(--texto);
  outline: none;
}

.formulario__exito::before {
  color: var(--exito);
  --icono-estado: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M7.5 12.5l3 3 6-6.5'/%3E%3C/svg%3E");
}

.formulario__exito p {
  max-width: none;
  font-size: var(--t-cuerpo-grande);
}

/* El error de las opciones de servicio queda separado de las opciones */
.grupo .campo__error {
  margin-top: var(--e-3);
}

/* ============================================================
   8. PÁGINAS DE SERVICIO (/paginas-web y /desarrollo-a-medida)
   ============================================================ */
.servicio-inicio {
  padding-top: clamp(2.5rem, 6vw, 5rem);
}

.servicio-inicio__texto {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e-5);
  margin-bottom: var(--e-7);
}

.servicio-inicio h1 {
  max-width: 16ch;
}

.servicio-inicio__rotulo {
  display: block;
  margin-top: var(--e-3);
}

/* Bloques con texto e imagen alternados (/paginas-web) */
.bloques {
  display: flex;
  flex-direction: column;
  gap: clamp(3.5rem, 8vw, 7rem);
}

.bloque {
  align-items: center;
}

.bloque__texto {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e-4);
}

.bloque__texto .tarjeta__cabecera {
  align-self: stretch;
}

.bloque__imagen {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
}

/* En escritorio texto e imagen comparten fila aunque uno empiece más a la derecha */
@media (min-width: 1024px) {
  .bloque > * {
    grid-row: 1;
  }
}

.aclaracion {
  margin-top: var(--e-6);
  max-width: 50ch;
}

.intro-seccion {
  margin: calc(-1 * var(--e-5)) 0 var(--e-7);
  max-width: 50ch;
}

.nota-seccion {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e-3);
  margin-top: var(--e-6);
}

.nota-seccion p {
  max-width: 55ch;
}

/* ============================================================
   9. PÁGINA LEGAL (/politica-de-privacidad)
   Texto corrido de hasta 65 caracteres por línea.
   ============================================================ */
.legal {
  padding-block: clamp(2.5rem, 6vw, 5rem) var(--separacion);
}

.legal__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e-4);
  margin-bottom: var(--e-8);
}

/* El título de una página legal es largo: va más chico que el display de las portadas */
.legal h1 {
  font-size: clamp(2.25rem, 5vw, 4rem);
  max-width: 16ch;
}

.legal__cuerpo h2 {
  margin: var(--e-8) 0 var(--e-3);
  font-size: var(--t-h3);
  font-weight: var(--peso-semibold);
  line-height: var(--t-h3-lh);
  letter-spacing: var(--t-h3-ls);
}

.legal__cuerpo h2:first-child {
  margin-top: 0;
}

.legal__cuerpo p + p,
.legal__cuerpo ul + p,
.legal__cuerpo p + ul {
  margin-top: var(--e-4);
}

.legal__cuerpo ul {
  max-width: var(--ancho-texto);
  margin: var(--e-3) 0 0;
  padding-left: 1.25rem;
}

.legal__cuerpo li + li {
  margin-top: var(--e-2);
}