/* Generado por scripts/build.mjs desde bloques/<tipo>/estilos.css. No se edita aquí. */

/* ===== portada ===== */
/* Portada: a sangre, sube bajo la cabecera transparente */
.portada {
  position: relative; margin-top: calc(-1 * var(--alto-cabecera)); min-height: 640px;
  display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden;
}
@media (min-width: 1024px) { .portada { min-height: max(640px, 100vh); min-height: max(640px, 100svh); } }
/* Si no es el primer bloque, no sube bajo la cabecera (taparía el bloque anterior) */
* + .portada { margin-top: 0; }
* + .portada .portada__interior { padding-top: 112px; }
.portada__fondo { position: absolute; inset: 0; background: repeating-linear-gradient(135deg, #f1f5f9 0 12px, #eaf0f5 12px 24px); }
.portada__imagen { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.portada__interior { position: relative; max-width: 1200px; width: 100%; margin: 0 auto; padding: 180px 32px 32px; } /* margen inferior = margen lateral */
.portada__cuerpo { max-width: 880px; }
.portada__titulo { margin: 0; font-size: clamp(44px, 7.6vw, 96px); line-height: 1.06; letter-spacing: -0.03em; font-weight: 300; text-wrap: balance; }
.portada__texto { margin: 32px 0 0; font-size: 20px; line-height: 1.65; font-weight: 300; color: var(--gris); max-width: 600px; text-wrap: pretty; }
/* Botones del mismo ancho (el del texto más largo); en celular, uno sobre otro a todo el ancho */
.portada__botones { margin-top: 44px; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 14px; max-width: 100%; }
.portada__botones .boton { text-align: center; }
@media (max-width: 639px) { .portada__botones { display: grid; grid-auto-flow: row; } }
.portada__botones .boton--borde { background-color: #ffffff; }

/* ===== portada_2 ===== */
/* Portada 2: imagen a sangre con el título en una franja blanca translúcida, centrado abajo.
   Desde 640px los botones van sobre la imagen; en celular bajan, apilados y a todo el ancho.
   Tiene fondo propio (la imagen): no lleva la casilla de fondo. */
.portada-2 { position: relative; --portada-2-botones: 0px; }
.portada-2__marco { position: relative; overflow: hidden; height: 125vw; min-height: 380px; display: flex; flex-direction: column; justify-content: flex-end; }
.portada-2__imagen { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.portada-2__texto { position: relative; width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 16px; display: flex; justify-content: center; padding-bottom: calc(28px + var(--portada-2-botones)); }
.portada-2__titulo {
  margin: 0; max-width: 100%; padding: 8px 14px; overflow-wrap: break-word; background: rgba(255, 255, 255, 0.3);
  font-size: clamp(28px, 4.6vw, 56px); line-height: 1.15; letter-spacing: -0.015em; font-weight: 300;
  color: var(--tinta); text-align: center; text-wrap: balance;
}
.portada-2__botones { padding: 28px 16px 36px; background: var(--suave); display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.portada-2__botones .boton { text-align: center; }
.portada-2__botones .boton--borde { background-color: #ffffff; }
@media (min-width: 640px) {
  .portada-2 { --portada-2-botones: 100px; }
  .portada-2__marco { height: auto; min-height: max(560px, calc(100vh - var(--alto-cabecera))); min-height: max(560px, calc(100svh - var(--alto-cabecera))); }
  .portada-2__texto { padding-left: 32px; padding-right: 32px; padding-bottom: calc(40px + var(--portada-2-botones)); }
  .portada-2__titulo { padding: 10px 24px; }
  .portada-2__botones {
    position: absolute; left: 50%; bottom: 48px; transform: translateX(-50%); padding: 0; background: none;
    display: inline-grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 14px;
    width: max-content; max-width: calc(100% - 64px);
  }
  .portada-2__botones .boton { min-width: 200px; }
}
/* Sin botones, el título baja hasta el margen inferior */
.portada-2__marco:last-child .portada-2__texto { padding-bottom: 40px; }

/* ===== funciones ===== */
/* Funciones: tarjetas numeradas en rejilla con filete */
.funciones { border-top: 1px solid var(--linea); }
.funciones__interior { max-width: 1200px; margin: 0 auto; padding: 112px 32px; }
.funciones__rejilla {
  margin-top: 72px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 1px; background: var(--linea); border: 1px solid var(--linea); border-radius: 16px; overflow: hidden;
}
.funciones__tarjeta { background: var(--papel); padding: 40px 36px; display: flex; flex-direction: column; gap: 16px; }
.funciones__numero { font-size: 13px; letter-spacing: 0.2em; color: var(--acento); }
.funciones__titulo { margin: 8px 0 0; font-size: 22px; letter-spacing: -0.01em; font-weight: 400; }
.funciones__texto { margin: 0; font-size: 16px; line-height: 1.6; color: var(--gris); }

/* ===== funciones_2 ===== */
/* Funciones 2: tarjetas unidas por filetes internos (como funciones), enlace por tarjeta y botón final opcional */
.funciones-2 { border-top: 1px solid var(--linea); }
.funciones-2__interior { max-width: 1200px; margin: 0 auto; padding: 112px 32px; }
.funciones-2__rejilla {
  margin-top: 72px; display: grid; grid-template-columns: minmax(0, 1fr);
  gap: 1px; background: var(--linea); border: 1px solid var(--linea); border-radius: 16px; overflow: hidden;
}
/* 1 → 2 → 4 columnas: con 4 tarjetas nunca queda una sola en la fila */
@media (min-width: 640px) { .funciones-2__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .funciones-2__rejilla { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.funciones-2__tarjeta { background: var(--papel); padding: 40px 36px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.funciones-2__titulo { margin: 0; font-size: 20px; line-height: 1.3; letter-spacing: -0.02em; font-weight: 500; color: var(--tinta); text-wrap: balance; }
.funciones-2__texto { margin: 0; font-size: 16px; line-height: 1.6; color: var(--gris); text-wrap: pretty; }
.funciones-2__enlace {
  margin-top: auto; padding-top: 8px; display: inline-flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 500; color: var(--acento);
}
.funciones-2__enlace::after { content: "→"; transition: transform .2s ease; }
.funciones-2__enlace:hover { color: var(--acento-fuerte); }
.funciones-2__enlace:hover::after { transform: translateX(4px); }
.funciones-2__pie { margin-top: 72px; display: flex; justify-content: center; }

/* ===== funciones_3 ===== */
/* Funciones 3: tarjetas sueltas con imagen opcional arriba, categoría, texto y enlace */
.funciones-3 { border-top: 1px solid var(--linea); }
.funciones-3__interior { max-width: 1200px; margin: 0 auto; padding: 112px 32px; }
.funciones-3__rejilla { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.funciones-3__interior > .encabezado + .funciones-3__rejilla { margin-top: 72px; }
@media (min-width: 640px) { .funciones-3__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .funciones-3__rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.funciones-3__tarjeta {
  display: flex; flex-direction: column; background: var(--papel);
  border: 1px solid var(--linea); border-radius: 16px; overflow: hidden;
  transition: border-color .2s ease, box-shadow .25s ease;
}
.funciones-3__tarjeta:hover { border-color: var(--linea-fuerte); box-shadow: 0 12px 32px -16px rgba(20, 24, 33, 0.18); }
/* La imagen guarda proporción 16:9; mientras no hay foto se ve el rayado */
.funciones-3__imagen { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-bottom: 1px solid var(--linea); }
.funciones-3__imagen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.funciones-3__imagen img:not([src]), .funciones-3__imagen img[src=""] { display: none; }
.funciones-3__cuerpo { flex: 1; padding: 28px 28px 32px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.funciones-3__categoria { margin: 0; font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gris); }
.funciones-3__titulo { margin: 0; font-size: 20px; line-height: 1.3; letter-spacing: -0.02em; font-weight: 500; color: var(--tinta); text-wrap: balance; }
.funciones-3__texto { margin: 0; font-size: 16px; line-height: 1.6; color: var(--gris); text-wrap: pretty; }
.funciones-3__enlace {
  margin-top: auto; padding-top: 10px; display: inline-flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 500; color: var(--acento);
}
.funciones-3__enlace::after { content: "→"; transition: transform .2s ease; }
.funciones-3__enlace:hover { color: var(--acento-fuerte); }
.funciones-3__enlace:hover::after { transform: translateX(4px); }

/* ===== iconos ===== */
/* Iconos: icono en círculo, título, texto y enlace; filetes discretos sólo entre columnas y filas.
   1 columna → 2 (640px) → 3 (1024px). Los filetes son el borde izq./sup. de cada elemento;
   el marco recorta los de la primera columna y la primera fila. */
.iconos { border-top: 1px solid var(--linea); }
.iconos__interior { max-width: 1200px; margin: 0 auto; padding: 112px 32px; }
.iconos__interior > .encabezado + .iconos__marco { margin-top: 72px; }
.iconos__marco { overflow: hidden; }
.iconos__rejilla { display: grid; grid-template-columns: minmax(0, 1fr); margin: -1px 0 0 -1px; }
@media (min-width: 640px) { .iconos__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .iconos__rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.iconos__item {
  border-left: 1px solid var(--linea); border-top: 1px solid var(--linea);
  padding: 40px 8px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center;
}
@media (min-width: 640px) { .iconos__item { padding: 48px 36px; } }
.iconos__icono {
  flex: none; width: 64px; height: 64px; margin-bottom: 8px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--acento-tenue); color: var(--acento);
}
.iconos__icono .icono { font-size: 30px; }
.bloque--suave .iconos__icono { background: var(--papel); }
.iconos__titulo { margin: 0; font-size: 20px; line-height: 1.3; letter-spacing: -0.01em; font-weight: 400; color: var(--tinta); text-wrap: balance; }
.iconos__texto { margin: 0; max-width: 34ch; font-size: 16px; line-height: 1.6; color: var(--gris); text-wrap: pretty; }
.iconos__enlace {
  margin-top: auto; padding-top: 8px; display: inline-flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 500; color: var(--acento);
}
.iconos__enlace::after { content: "→"; transition: transform .2s ease; }
.iconos__enlace:hover { color: var(--acento-fuerte); }
.iconos__enlace:hover::after { transform: translateX(4px); }
.iconos__pie { margin-top: 72px; display: flex; justify-content: center; }

/* ===== incluye ===== */
/* Incluye: lista de palomitas en dos columnas */
.incluye { border-top: 1px solid var(--linea); }
.incluye__interior { max-width: 1040px; margin: 0 auto; padding: 112px 32px; display: flex; flex-direction: column; align-items: center; }
.incluye__rejilla { margin-top: 72px; width: 100%; display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 768px) { .incluye__rejilla { grid-template-columns: 1fr 1fr; } }
.incluye__punto { display: flex; align-items: center; gap: 20px; padding: 24px 28px; border-radius: 12px; background: var(--suave); }
.incluye__palomita {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--acento);
  display: flex; align-items: center; justify-content: center;
}
.incluye__palomita span { width: 6px; height: 11px; margin-top: -3px; border-right: 2px solid var(--acento); border-bottom: 2px solid var(--acento); transform: rotate(45deg); }
.incluye__texto { font-size: 17px; font-weight: 500; letter-spacing: -0.01em; }
.incluye__boton { margin-top: 72px; }
/* Sobre fondo gris suave, las tarjetas pasan al color de la página para no perderse. */
.bloque--suave .incluye__punto { background: var(--papel); }

/* ===== imagen_texto ===== */
/* Imagen y texto: imagen a sangre a un lado (se oculta en celular) */
.imagen-texto { background: var(--papel); border-top: 1px solid var(--linea); }
.imagen-texto--suave { background: var(--suave); border-top: 0; }
.imagen-texto__fila { display: flex; align-items: stretch; }
.imagen-texto--derecha .imagen-texto__fila { flex-direction: row-reverse; }
.imagen-texto__imagen { position: relative; flex-shrink: 0; width: 0; overflow: hidden; }
.imagen-texto__imagen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* La foto se dibuja al doble del ancho de su columna, anclada al lado del texto: su eje central
   cae justo en el borde de la pantalla y se ve la mitad que mira hacia el texto. Con cover
   llena el recuadro en los dos ejes.
   Altura de referencia: la caja de la foto mide al menos --alto-foto (centrada a lo alto; lo que
   sobra se recorta), así la foto sale del mismo tamaño en todos los bloques de hasta esa altura,
   tengan más o menos texto. Sólo un bloque más alto agranda su foto. */
.imagen-texto { --alto-foto: 800px; }
.imagen-texto__imagen img {
  top: 50%; bottom: auto; right: 0; left: auto; transform: translateY(-50%);
  width: 200%; max-width: none; height: 100%; height: max(100%, var(--alto-foto));
}
.imagen-texto--derecha .imagen-texto__imagen img { right: auto; left: 0; }
.imagen-texto__cuerpo { flex: 1; min-width: 0; padding: 112px 32px; }
@media (min-width: 768px) {
  .imagen-texto__imagen { width: 50%; }
  .imagen-texto__cuerpo { padding-inline: clamp(48px, 6vw, 112px); }
}
.imagen-texto__rotulo { margin: 0 0 20px; font-size: 14px; font-weight: 500; color: var(--acento); }
.imagen-texto__texto { margin: 28px 0 0; font-size: 18px; line-height: 1.65; color: var(--gris); text-wrap: pretty; }
.imagen-texto__pasos { margin-top: 40px; display: flex; flex-direction: column; border-top: 1px solid var(--linea-fuerte); counter-reset: paso; }
.imagen-texto__paso { padding: 18px 0; border-bottom: 1px solid var(--linea-fuerte); display: flex; gap: 20px; font-size: 16px; font-weight: 500; }
.imagen-texto__paso::before { counter-increment: paso; content: counter(paso); font-family: var(--mono); font-size: 13px; color: var(--gris-claro); padding-top: 3px; }
/* Botones opcionales al final del texto: en línea a la izquierda y del mismo ancho (el del texto más largo);
   en celular, uno sobre otro a todo el ancho */
.imagen-texto__botones { margin-top: 40px; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 12px; max-width: 100%; }
.imagen-texto__botones .boton { text-align: center; }
.imagen-texto__boton2 { background: var(--blanco); }
@media (max-width: 639px) {
  .imagen-texto__botones { display: grid; grid-auto-flow: row; }
}
/* Si la columna de texto queda angosta (imagen al lado), los botones también van uno sobre otro.
   Navegadores con consultas de contenedor: se decide por el ancho real de la columna.
   Navegadores viejos: respaldo por ancho de pantalla (768–1023px). */
.imagen-texto__cuerpo { container-type: inline-size; }
@media (min-width: 768px) and (max-width: 1023px) {
  .imagen-texto__botones { display: grid; grid-auto-flow: row; }
}
@supports (container-type: inline-size) {
  @media (min-width: 768px) and (max-width: 1023px) {
    .imagen-texto__botones { display: inline-grid; grid-auto-flow: column; }
  }
  @container (max-width: 440px) {
    .imagen-texto__botones { display: grid; grid-auto-flow: row; }
  }
}

/* ===== testimonios ===== */
/* Testimonios: citas en rejilla con filete */
.testimonios { max-width: 1200px; margin: 0 auto; padding: 112px 32px; width: 100%; }
.testimonios__rejilla {
  margin-top: 72px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 1px; background: var(--linea); border: 1px solid var(--linea); border-radius: 16px; overflow: hidden;
}
.testimonios__tarjeta { margin: 0; padding: 40px 36px; background: var(--papel); display: flex; flex-direction: column; justify-content: space-between; gap: 40px; }
.testimonios__cita { margin: 0; font-size: 19px; line-height: 1.55; letter-spacing: -0.01em; font-weight: 500; text-wrap: pretty; }
.testimonios__autor { display: flex; align-items: center; gap: 14px; }
.testimonios__foto {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; overflow: hidden;
  background: repeating-linear-gradient(135deg, #e7eef4 0 5px, #dde6ee 5px 10px);
}
.testimonios__foto img { width: 100%; height: 100%; object-fit: cover; }
.testimonios__datos { display: flex; flex-direction: column; gap: 2px; }
.testimonios__nombre { font-size: 15px; font-weight: 500; }
.testimonios__cargo { font-size: 14px; color: var(--gris); }

/* ===== precios ===== */
/* Precios: planes en tarjetas; el destacado va en oscuro. Si hay precio
   anual, un selector Mensual/Anual cambia las cifras (js/sitio.js). */
.precios { border-top: 1px solid var(--linea); }
.precios__interior { max-width: 1200px; margin: 0 auto; padding: 112px 32px; }
.precios__cabeza { display: flex; justify-content: space-between; align-items: end; gap: 32px; flex-wrap: wrap; }
@media (min-width: 768px) { .precios__cabeza { flex-direction: column; align-items: center; text-align: center; gap: 40px; } }
.precios__intro { max-width: 600px; }
.precios__texto { margin: 20px 0 0; font-size: 18px; line-height: 1.6; color: var(--gris); }
.precios__periodos { display: flex; padding: 4px; border-radius: calc(var(--radio-boton) + 2px); background: var(--suave); gap: 4px; }
.precios__periodo {
  font-size: 14px; font-weight: 500; padding: 10px 18px; border-radius: calc(var(--radio-boton) - 2px); border: none; cursor: pointer;
  background: transparent; color: var(--tinta); box-shadow: none;
}
.precios__periodo[aria-pressed="true"] { background: var(--blanco); box-shadow: 0 1px 3px rgba(19, 22, 28, 0.12); }
.precios__planes { margin-top: 64px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 24px; align-items: stretch; }

.plan { padding: 36px; border-radius: 16px; display: flex; flex-direction: column; background: transparent; color: var(--tinta); border: 1px solid var(--linea-fuerte); }
.plan--destacado { background: var(--tinta); color: var(--blanco); border-color: var(--tinta); }
.plan__cabeza { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.plan__nombre { margin: 0; font-size: 18px; font-weight: 400; letter-spacing: 0.02em; }
.plan__insignia { font-size: 12px; font-weight: 500; letter-spacing: 0.06em; padding: 5px 12px; border-radius: 999px; background: var(--acento); color: var(--blanco); }
.plan__precio { margin-top: 28px; display: flex; align-items: baseline; gap: 6px; }
.plan__cifra { font-size: 52px; font-weight: 300; letter-spacing: -0.04em; line-height: 1; }
.plan__cifra--anual { display: none; }
.precios--anual .plan__cifra--anual { display: inline; }
.precios--anual .plan--con-anual .plan__cifra--mensual { display: none; }
.plan__periodo { font-size: 14px; color: var(--gris); }
.plan--destacado .plan__periodo { color: #aaaeb4; }
.plan__descripcion { margin: 16px 0 0; font-size: 15px; line-height: 1.55; color: var(--gris); }
.plan--destacado .plan__descripcion { color: #b4b8be; }
.plan__incluye { margin: 32px 0; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.plan__punto { display: flex; gap: 12px; align-items: center; font-size: 15px; }
.plan__vineta { width: 6px; height: 6px; border-radius: 50%; background: var(--acento); flex-shrink: 0; }
.plan__boton {
  text-align: center; font-size: 15px; font-weight: 400; letter-spacing: 0.04em; padding: 14px 20px; border-radius: var(--radio-boton);
  background: transparent; color: var(--tinta); border: 1px solid var(--linea-fuerte);
}
.plan--destacado .plan__boton { background: var(--acento); color: var(--blanco); border-color: var(--acento); }
/* Sobre fondo gris suave, el selector Mensual/Anual se oscurece un poco para seguir viéndose. */
.bloque--suave .precios__periodos { background: #dfe8ef; }

/* ===== llamada ===== */
/* Llamada a la acción: franja oscura a todo el ancho; título, texto, dos botones y nota, centrados.
   En celular el texto se alinea a la izquierda y los botones van uno sobre otro, a todo el ancho. */
.llamada { background: var(--tinta); color: var(--blanco); padding: 128px 32px; }
.llamada__caja { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; }
.llamada__titulo { margin: 0; font-size: clamp(36px, 5vw, 60px); line-height: 1.05; letter-spacing: -0.02em; font-weight: 300; color: var(--blanco); text-wrap: balance; }
.llamada__texto { margin: 24px 0 0; font-size: 19px; line-height: 1.7; font-weight: 300; color: rgba(255, 255, 255, 0.78); text-wrap: pretty; }
.llamada__texto strong, .llamada__nota strong { color: var(--blanco); font-weight: 500; }
.llamada__botones { margin-top: 44px; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 12px; max-width: 100%; }
.llamada__botones .boton { text-align: center; }
.llamada__boton { background: var(--blanco); color: var(--tinta); border: 1px solid var(--blanco); transition: background-color .2s, color .2s, border-color .2s; }
.llamada__boton:hover { background: var(--acento); border-color: var(--acento); color: var(--blanco); }
.llamada__boton2 { background: transparent; color: var(--blanco); border: 1px solid rgba(251, 252, 254, 0.22); transition: border-color .2s, background-color .2s; }
.llamada__boton2:hover { border-color: rgba(251, 252, 254, 0.6); background: rgba(251, 252, 254, 0.06); }
.llamada__nota { margin: 28px 0 0; font-size: 14px; line-height: 1.5; color: rgba(251, 252, 254, 0.55); text-wrap: pretty; }
@media (max-width: 639px) {
  .llamada { padding: 88px 24px; }
  .llamada__caja { align-items: stretch; text-align: left; }
  .llamada__botones { margin-top: 36px; display: grid; grid-auto-flow: row; }
  .llamada__nota { text-align: center; }
}

/* ===== contacto ===== */
/* Contacto: formulario en tarjeta a la izquierda e información a la derecha (desde 768px);
   en celular, formulario arriba e información abajo. Enviar y WhatsApp quedan a la misma
   altura: los dos van al fondo de su columna y la información compensa el relleno de la tarjeta. */
.contacto { background: var(--suave); }
.contacto__rejilla { max-width: 1200px; margin: 0 auto; padding: 96px 20px; display: flex; flex-direction: column; gap: 56px; }
@media (min-width: 640px) { .contacto__rejilla { padding: 112px 32px; } }
.contacto__form, .contacto__enviado {
  padding: 28px 24px; border-radius: 24px; background: var(--papel); border: 1px solid var(--linea-fuerte);
  display: flex; flex-direction: column;
}
.contacto__form { gap: 20px; }
@media (min-width: 640px) { .contacto__form, .contacto__enviado { padding: 44px; } }
.contacto__campo { display: flex; flex-direction: column; gap: 10px; }
.contacto__etiqueta-campo { font-size: 15px; font-weight: 400; color: var(--tinta); }
.contacto__obligatorio { color: var(--acento); }
.contacto input, .contacto textarea {
  width: 100%; font-size: 16px; padding: 14px 18px; border-radius: var(--radio-campo); border: 1px solid var(--linea-fuerte);
  background: var(--papel); outline: none; color: var(--tinta); transition: border-color .2s ease, box-shadow .2s ease;
}
.contacto input:focus, .contacto textarea:focus { border-color: var(--acento); box-shadow: 0 0 0 3px rgba(20, 24, 33, 0.06); }
.contacto textarea { resize: vertical; min-height: 120px; }
.contacto__nota { margin: 0; font-size: 14px; color: var(--gris); }
.contacto__boton, .contacto__whatsapp { width: 100%; min-height: 56px; border-radius: var(--radio-boton); line-height: 1.2; }
.contacto__boton {
  margin-top: auto; font-size: 15px; font-weight: 400; letter-spacing: 0.04em; padding: 16px 28px;
  border: none; cursor: pointer; background: var(--tinta); color: var(--blanco);
}
.contacto__boton:hover { background: var(--acento); }
.contacto__enviado { gap: 12px; justify-content: center; }
.contacto__enviado[hidden] { display: none; }
.contacto__enviado h3 { margin: 0; font-size: 26px; font-weight: 300; letter-spacing: -0.01em; }
.contacto__enviado p { margin: 0; font-size: 16px; color: var(--gris); }
.contacto__info { display: flex; flex-direction: column; align-items: flex-start; }
.contacto__titulo { margin-top: -0.1em; text-wrap: balance; }
.contacto__texto { margin: 24px 0 0; font-size: 18px; line-height: 1.6; color: var(--gris); max-width: 560px; text-wrap: pretty; }
.contacto__datos { align-self: stretch; margin-top: 40px; display: flex; flex-direction: column; gap: 24px; font-size: 16px; }
.contacto__dato { display: flex; align-items: flex-start; gap: 18px; }
.contacto__icono {
  flex: none; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--linea-fuerte);
  background: var(--papel); color: var(--acento); display: flex; align-items: center; justify-content: center;
}
.contacto__dato-texto { flex: 1 1 auto; min-width: 0; padding-top: 2px; display: flex; flex-direction: column; gap: 6px; }
.contacto__etiqueta { font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gris); }
.contacto__valor { font-size: 18px; line-height: 1.4; font-weight: 300; color: var(--tinta); overflow-wrap: anywhere; }
.contacto__whatsapp { margin-top: 40px; }
@media (min-width: 768px) {
  .contacto__rejilla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(32px, 5vw, 64px); align-items: stretch; }
  .contacto__form, .contacto__enviado { grid-column: 1; grid-row: 1; }
  .contacto__info { grid-column: 2; grid-row: 1; padding-bottom: 45px; }
  .contacto__whatsapp { margin-top: auto; }
  .contacto__datos { margin-bottom: 40px; }
}

/* ===== contacto_2 ===== */
/* Contacto 2: todo centrado en una columna. Formulario con etiquetas arriba (nombre y correo
   lado a lado, también en celular), filete y debajo correo, dirección y redes. */
.contacto-2 { border-top: 1px solid var(--linea); }
.contacto-2__interior { max-width: 1200px; margin: 0 auto; padding: 112px 24px; }
@media (min-width: 640px) { .contacto-2__interior { padding: 112px 32px; } }
.contacto-2__cuerpo { max-width: 640px; margin: 56px auto 0; }
.contacto-2__form { display: flex; flex-direction: column; gap: 20px; }
.contacto-2__fila { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 640px) { .contacto-2__fila { gap: 20px; } }
.contacto-2__campo { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.contacto-2__etiqueta { font-size: 14px; color: var(--gris); }
.contacto-2 input, .contacto-2 textarea {
  width: 100%; font-size: 16px; padding: 12px 14px; border-radius: var(--radio-campo);
  border: 1px solid var(--linea-fuerte); background: #f7f9fb; color: var(--tinta); outline: none;
  transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.contacto-2 input:focus, .contacto-2 textarea:focus { border-color: var(--acento); background: var(--papel); box-shadow: 0 0 0 3px rgba(20, 24, 33, 0.06); }
.contacto-2 textarea { min-height: 140px; resize: vertical; }
.contacto-2__boton { border: none; cursor: pointer; }
/* Botones: apilados a todo el ancho en celular; desde 640px lado a lado, centrados y del mismo ancho */
.contacto-2__botones { margin-top: 20px; /* + gap 20px = 40px, igual que debajo hasta el filete */ display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.contacto-2__botones > .boton { width: 100%; }
@media (min-width: 640px) {
  .contacto-2__botones { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: minmax(0, 1fr); width: max-content; max-width: 100%; margin-left: auto; margin-right: auto; }
}
.contacto-2__enviado {
  padding: 48px 32px; border-radius: 16px; background: var(--papel); border: 1px solid var(--linea-fuerte);
  display: flex; flex-direction: column; gap: 12px; text-align: center;
}
.contacto-2__enviado[hidden] { display: none; }
.contacto-2__enviado h3 { margin: 0; font-size: 26px; font-weight: 300; letter-spacing: -0.01em; }
.contacto-2__enviado p { margin: 0; font-size: 16px; color: var(--gris); }
.contacto-2__datos {
  margin-top: 40px; padding-top: 40px; border-top: 1px solid var(--linea);
  display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center;
}
.contacto-2__correo { font-size: 16px; font-weight: 400; color: var(--acento); overflow-wrap: anywhere; }
.contacto-2__correo:hover { color: var(--acento-fuerte); }
.contacto-2__direccion { margin: 0; font-size: 16px; line-height: 1.6; color: var(--gris); white-space: pre-line; }
.contacto-2__redes { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px; }
.contacto-2__red { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; color: var(--gris); }
.contacto-2__red:hover { color: var(--tinta); background: var(--suave); }
.bloque--suave .contacto-2__red:hover { background: var(--papel); }