/* Lo propio de las páginas de evento, sobre la hoja del sitio (p1.css).
   Dos tramos de color y nada más: arriba, la portada (la escena a sangre bajo
   un velo de noche, con el grano del sitio); abajo, un solo degradado claro que
   va del gris al champaña, de la primera sección al pie. Colores: los tokens
   del sitio; la terracota de la escena solo vive dentro de un degradado, como
   en los espectros del sitio, nunca como tinta. */

/* Tramo claro. Vive en el cuerpo para que las secciones y el pie compartan un
   solo degradado, sin costuras entre bandas; la portada lo cubre arriba. El
   grano del sitio (.grano en el body) va encima. */
body {
  background:
    radial-gradient(ellipse 58% 12% at 94% 23%, color-mix(in srgb, var(--champagne-300) 40%, transparent), transparent 70%),
    radial-gradient(ellipse 70% 18% at 6% 40%, color-mix(in srgb, var(--champagne-300) 26%, transparent), transparent 70%),
    radial-gradient(ellipse 60% 18% at 4% 56%, color-mix(in srgb, var(--paper) 92%, transparent), transparent 72%),
    radial-gradient(ellipse 70% 18% at 96% 74%, color-mix(in srgb, var(--champagne-300) 38%, transparent), transparent 72%),
    radial-gradient(ellipse 110% 20% at 28% 102%, color-mix(in srgb, var(--champagne-300) 62%, transparent), transparent 74%),
    linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 38%, var(--paper) 72%, color-mix(in srgb, var(--champagne-300) 40%, var(--paper)) 100%);
}

/* Encabezado: superpuesto a la portada, con la marca en blanco. Fuera de un
   espectro el botón no hereda el estilo del sitio sobre noche, así que se lo
   damos aquí con los mismos valores: relleno claro y canto de luz al pasar. */
.ev-cabeza { position: absolute; inset: 0 0 auto; z-index: 5; }
.ev-cabeza-fila { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 72px; }
.ev-marca { display: inline-flex; padding-block: 8px; }
.ev-marca img { height: 22px; width: auto; }
.ev-cabeza .btn-primary {
  --f: #FFFFFF; --edge: linear-gradient(#FFFFFF, #FFFFFF); color: var(--ink);
  background: linear-gradient(var(--f), var(--f)) padding-box, var(--edge) border-box;
}
.ev-cabeza .btn-primary:hover {
  --f: var(--bg-2); --edge: var(--giro-blanco); color: var(--ink);
  background: linear-gradient(var(--f), var(--f)) padding-box, var(--edge) border-box;
}
@media (min-width: 720px) {
  .ev-cabeza-fila { min-height: 88px; }
  .ev-marca img { height: 26px; }
}

/* Portada. En escritorio toma la proporción de la escena (3:2) para que la
   placa, el láser y la figura se vean completos; en celular llena la pantalla y
   la escena se recorta por los lados, nunca por el centro. */
.ev-portada {
  position: relative; isolation: isolate; overflow: hidden; display: flex;
  min-height: max(100svh, 640px); background: var(--noche); color: var(--noche-texto);
}
@media (min-width: 900px) { .ev-portada { min-height: clamp(680px, 66.667vw, 1200px); } }
.ev-portada-fondo { position: absolute; inset: 0; z-index: 0; }
.ev-portada-fondo img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 50%; }
@media (prefers-reduced-motion: no-preference) {
  .ev-portada-fondo img { transform-origin: 50% 48%; animation: deriva-portada 40s ease-in-out infinite alternate; will-change: transform; }
}
@keyframes deriva-portada {
  from { transform: scale(1.01); }
  to { transform: scale(1.06) translate3d(0, -.8%, 0); }
}
/* El velo oscurece solo arriba (el titular) y abajo (el patrocinio): la luz del
   centro, donde están la placa y la figura, queda intacta. */
.ev-portada-velo {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--noche) 64%, transparent) 0%, color-mix(in srgb, var(--noche) 44%, transparent) 30%, color-mix(in srgb, var(--noche) 12%, transparent) 48%, transparent 58%),
    linear-gradient(0deg, color-mix(in srgb, var(--noche) 72%, transparent) 0%, transparent 24%);
}
/* El grano de los espectros del sitio, sobre la escena: además disimula los
   escalones que deja la compresión en la niebla. */
.ev-portada::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  mix-blend-mode: soft-light; opacity: .55;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23r)' opacity='.12'/%3E%3C/svg%3E");
}
.ev-portada-contenido {
  position: relative; z-index: 2; display: grid; grid-template-rows: auto auto 1fr auto;
  justify-items: center; text-align: center;
  padding-top: calc(72px + clamp(28px, 5vw, 72px)); padding-bottom: clamp(24px, 3vw, 40px);
}
@media (min-width: 720px) { .ev-portada-contenido { padding-top: calc(88px + clamp(16px, 3vw, 40px)); } }
/* El segundo renglón cruza la cara clara de la placa: el halo lo separa de ella. */
.ev-portada-titulo {
  margin: 0; color: #fff;
  text-shadow: 0 2px 28px color-mix(in srgb, var(--noche) 55%, transparent), 0 0 64px color-mix(in srgb, var(--noche) 45%, transparent);
}
/* El sitio deja cada renglón del titular entero (nowrap), calibrado para frases
   cortas; los nuestros son más largos. Aquí se parten con balance solo cuando
   no caben: en escritorio siguen en dos. */
.ev-portada .hero-titular .linea, .ev-apertura .hero-titular .linea { white-space: normal; text-wrap: balance; }
.ev-portada-titulo em { color: var(--champagne-300); font-style: italic; }
/* El tamaño del sitio (.hero-titular:has(.linea)) pesa más que una clase sola: aquí se iguala para ganarle en celular. */
@media (max-width: 719px) { .ev-portada .ev-portada-titulo:has(.linea) { font-size: clamp(2.375rem, 1.6rem + 3.2vw, 2.875rem); } }
.ev-portada-patrocinio { grid-row: 4; margin: 0; max-width: 34em; color: var(--noche-tenue); text-wrap: balance; }
.ev-portada-patrocinio strong { color: var(--champagne-300); font-weight: 600; }
/* El sitio pone en línea los renglones de un párrafo por debajo de 1200 px; aquí van siempre en bloque. */
.ev-portada-patrocinio .linea { display: block; }

/* El mando: un panel de vidrio dentro de un visor. Las esquinas enfocan al
   cargar —vigilar es enfocar— y después respiran despacio. */
.ev-mando { position: relative; width: min(100%, 640px); margin-top: clamp(28px, 4vw, 48px); }
.ev-mando-cuerpo {
  position: relative; display: grid; gap: 12px; padding: 12px; text-align: left;
  background: color-mix(in srgb, var(--noche) 40%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid rgb(255 255 255 / .16); border-radius: var(--r-lg);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .10), 0 24px 60px -24px color-mix(in srgb, var(--noche) 85%, transparent);
}
/* Donde el láser de la escena entra a la placa: un destello cobre en el canto superior. */
.ev-mando-cuerpo::before {
  content: ""; position: absolute; top: -1px; left: 50%; width: min(48%, 260px); height: 2px; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgb(196 85 46 / .95), rgb(230 211 166 / .35) 60%, transparent);
  pointer-events: none;
}
.ev-mando-frase {
  display: block; min-height: 7.5rem; padding: 16px 18px; border-radius: var(--r-md);
  background: color-mix(in srgb, var(--noche) 55%, transparent);
  color: #fff; font-size: clamp(1.125rem, 1rem + .6vw, 1.5rem); line-height: 1.35; letter-spacing: -.01em;
}
.ev-mando-frase:hover { color: #fff; }
.ev-cursor {
  display: inline-block; width: 2px; height: 1.1em; margin-left: 3px; vertical-align: -.15em;
  background: var(--champagne-300);
}
.ev-mando-acciones { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.ev-mando-secundarias { display: flex; flex-wrap: wrap; gap: 8px; }
.ev-mando-sec {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 14px;
  border: 1px solid rgb(255 255 255 / .22); border-radius: var(--r-sm); background: rgb(255 255 255 / .04);
  color: rgb(247 247 251 / .92); font-size: .875rem; font-weight: 600;
  transition: color var(--t) var(--ease), border-color var(--t) var(--ease), background var(--t) var(--ease), box-shadow var(--t-tarjeta) var(--ease);
}
.ev-mando-sec:hover { color: #fff; border-color: rgb(255 255 255 / .5); background: rgb(255 255 255 / .08); }
.ev-mando-prim {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px;
  border-radius: var(--r-sm); background: #fff; color: var(--ink); font-size: .9375rem; font-weight: 600;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--noche) 30%, transparent);
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-tarjeta) var(--ease), background var(--t) var(--ease);
}
.ev-mando-prim:hover { color: var(--ink); background: var(--bg-2); transform: translateY(-2px); }
.ev-mando-prim svg { transition: transform var(--t) var(--ease); }
.ev-mando-prim:hover svg { transform: translateX(3px); }
/* El camino de la frase que se escribe se enciende en champaña. */
.ev-mando-sec[data-activo] {
  color: #fff; border-color: color-mix(in srgb, var(--champagne-300) 75%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--champagne-300) 30%, transparent), 0 8px 24px -12px color-mix(in srgb, var(--champagne-300) 70%, transparent);
}
.ev-mando-prim[data-activo] {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--champagne-300) 55%, transparent), 0 12px 32px -12px color-mix(in srgb, var(--champagne-300) 80%, transparent);
}
/* En celular el principal va arriba y a todo lo ancho; los otros dos, lado a
   lado, para que el panel no tape la figura de la escena. */
@media (max-width: 559px) {
  .ev-mando-acciones { flex-direction: column-reverse; align-items: stretch; }
  .ev-mando-secundarias { flex-wrap: nowrap; }
  .ev-mando-secundarias > * { flex: 1 1 0; padding-inline: 10px; white-space: nowrap; }
}

.ev-esquina { position: absolute; z-index: 1; width: 18px; height: 18px; border: 0 solid rgb(255 255 255 / .7); pointer-events: none; }
.ev-esquina-1 { top: -14px; left: -14px; border-top-width: 1.5px; border-left-width: 1.5px; --dx: -16px; --dy: -12px; }
.ev-esquina-2 { top: -14px; right: -14px; border-top-width: 1.5px; border-right-width: 1.5px; --dx: 16px; --dy: -12px; }
.ev-esquina-3 { bottom: -14px; left: -14px; border-bottom-width: 1.5px; border-left-width: 1.5px; --dx: -16px; --dy: 12px; }
.ev-esquina-4 { bottom: -14px; right: -14px; border-bottom-width: 1.5px; border-right-width: 1.5px; --dx: 16px; --dy: 12px; }
@media (prefers-reduced-motion: no-preference) {
  .ev-esquina { animation: enfoca 1100ms var(--ease) 380ms both, respira 4.8s ease-in-out 1.6s infinite alternate; }
  .ev-cursor { animation: parpadeo 1.05s steps(1) infinite; }
  .ev-mando-cuerpo::before { animation: destello 5.6s ease-in-out infinite alternate; }
}
@keyframes enfoca { from { opacity: 0; transform: translate(var(--dx), var(--dy)); } to { opacity: 1; transform: none; } }
@keyframes respira { from { border-color: rgb(255 255 255 / .7); } to { border-color: rgb(255 255 255 / .38); } }
@keyframes parpadeo { 50% { opacity: 0; } }
@keyframes destello { from { opacity: .55; } to { opacity: 1; } }

/* La apertura del sitio, para las páginas que la usan (404). */
.ev-apertura .hero-editorial { padding-block: calc(72px + clamp(28px, 6vw, 88px)) clamp(48px, 6vw, 96px); }
@media (min-width: 720px) { .ev-apertura .hero-editorial { padding-top: calc(88px + clamp(28px, 6vw, 88px)); } }
.ev-apertura .hero-titular em { color: var(--champagne-300); font-style: italic; }
@media (max-width: 719px) { .ev-apertura .hero-titular { font-size: clamp(2.375rem, 1.5rem + 3.6vw, 3rem); } }

/* Texturas vivas (DS 3.3, lámina 14). Cada trama dice algo de la tecnología,
   sale una sola vez y es la única capa expresiva de su vista (lámina 15):
   Registro detrás del panel de actividad, Campo junto al hallazgo del motor y
   la Diagonal como corona del CTA final. Van a toda su fuerza, sin velo de
   opacidad: "que se vea la grandeza de VDM". El texto nunca va encima: cada
   una lleva su máscara hacia el contenido. */

/* La ventana de noche: el registro vivo alrededor del panel de actividad. Más
   margen arriba y a la izquierda, donde las líneas del registro son largas. */
.ev-ventana {
  position: relative; isolation: isolate; overflow: hidden; border-radius: var(--r-xl);
  padding: clamp(44px, 6vw, 88px) clamp(16px, 2.4vw, 32px) clamp(16px, 2.4vw, 32px) clamp(44px, 6vw, 88px);
  background:
    radial-gradient(ellipse 80% 60% at 0% 0%, rgb(158 211 230 / .14), transparent 70%),
    radial-gradient(ellipse 80% 60% at 100% 100%, rgb(230 211 166 / .12), transparent 70%),
    var(--noche);
  box-shadow: 0 1px 0 rgb(17 15 28 / .06), 0 36px 64px -40px rgb(17 15 28 / .6);
}
.ev-ventana > :not(.trama) { position: relative; z-index: 1; }
.ev-ventana .producto-pantalla { box-shadow: 0 28px 56px -28px rgb(0 0 0 / .7); }
.ev-trama-registro { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; }

/* El campo del motor: ocupa lo que queda del bloque bajo el texto, de canto a
   canto, y nace desvanecido arriba. Los focos quedan a la derecha. */
.ev-campo {
  position: relative; flex: 1 1 auto; min-height: clamp(220px, 30vw, 340px);
  margin: 0 calc(-1 * var(--pad)) calc(-1 * var(--pad));
}
.ev-trama-campo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 32%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 32%);
}
.ev-pieza-noche > :not(.trama) { position: relative; z-index: 1; }

/* La corona del pie: la Diagonal a sangre, gruesa arriba y fina abajo, que se
   desvanece hacia el titular. El pie le deja su alto libre. */
.ev-contacto { --corona: clamp(140px, 15vw, 240px); position: relative; isolation: isolate; }
.ev-trama-corona {
  position: absolute; top: 0; left: 0; z-index: -1; width: 100%; height: var(--corona);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 40%, transparent 100%), linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(180deg, #000 0%, #000 40%, transparent 100%), linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
  mask-composite: intersect;
}

/* Las secciones del tramo claro, cada una con su propia estructura: primero el
   valor, sin formularios; el único va al final, en el pie. */
.ev-seccion { padding-block: clamp(64px, 8vw, 112px); }
.ev-seccion + .ev-seccion { padding-top: 0; }

/* Conoce: el texto y, a su lado, la vista del producto, que se queda a la vista mientras se lee. */
.ev-rejilla { display: grid; gap: clamp(32px, 5vw, 72px); }
@media (min-width: 960px) {
  .ev-rejilla { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); align-items: start; }
  .ev-conoce .ev-figura { position: sticky; top: 40px; }
}
.ev-figura { margin: 0; }
.ev-figura figcaption { margin-top: 14px; color: var(--ink-3); text-wrap: pretty; }
/* El rótulo "Vista de ejemplo" del sitio mide 12 px; aquí va a 13, el mínimo. */
.producto-muestra { font-size: .8125rem; }
.ev-texto h2 { max-width: 14em; text-wrap: balance; }
.ev-texto .lead { margin-top: .5em; max-width: 30em; text-wrap: pretty; }
.ev-texto p { text-wrap: pretty; }
.ev-lema span { display: block; }

.ev-puntos { list-style: none; margin: clamp(24px, 3vw, 40px) 0 0; padding: 0; }
.ev-puntos li { display: grid; gap: 4px; padding-block: 18px; border-top: 1px solid color-mix(in srgb, var(--paper-line) 80%, transparent); }
.ev-puntos li:last-child { border-bottom: 1px solid color-mix(in srgb, var(--paper-line) 80%, transparent); }
@media (min-width: 560px) {
  .ev-puntos li { grid-template-columns: 10em minmax(0, 1fr); gap: 24px; align-items: baseline; }
}
.ev-puntos h3 { margin: 0; font-size: 1.0625rem; }
.ev-puntos p { margin: 0; color: var(--ink-2); }

/* La tarjeta del formulario: blanca sobre el degradado, con su borde y su sombra suave. */
.ev-tarjeta {
  background: var(--neutral-0); border: 1px solid color-mix(in srgb, var(--paper-line) 70%, transparent);
  border-radius: var(--r-lg); padding: clamp(20px, 3vw, 36px); box-shadow: var(--shadow-panel);
}
/* Demo: un mosaico editorial. Bloques que se tocan, sin aire entre ellos, cada
   uno con su superficie: claro, la vista del producto, el motor en noche (el
   bloque grande, dos por dos), el render, violeta y champaña. En escritorio son
   cuatro columnas; en tableta, dos; en celular, una. */
.ev-mosaico {
  display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--paper-line) 70%, transparent);
  border-radius: var(--r-xl); box-shadow: var(--shadow-panel);
}
@media (min-width: 720px) {
  .ev-mosaico { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ev-pieza-ancha, .ev-pieza-motor, .ev-pieza-champana { grid-column: span 2; }
}
@media (min-width: 1100px) {
  .ev-mosaico { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ev-pieza-motor { grid-row: span 2; }
}
.ev-pieza {
  --pad: clamp(24px, 3vw, 40px);
  position: relative; display: flex; flex-direction: column; gap: 12px;
  min-height: clamp(220px, 21vw, 300px); padding: var(--pad);
}
.ev-pieza h2, .ev-pieza h3, .ev-pieza p { margin: 0; }
.ev-pieza h3 {
  font-family: var(--serif); font-weight: 400; font-size: clamp(1.625rem, 1.2rem + 1.1vw, 2.125rem);
  line-height: 1.1; letter-spacing: -.015em; text-wrap: balance;
}
.ev-pieza h3 em { font-style: italic; }
.ev-pieza p { text-wrap: pretty; }
.ev-pieza-texto { background: var(--neutral-0); }
.ev-pieza-texto h2 { max-width: 12em; text-wrap: balance; }
.ev-pieza-accion { margin-top: auto !important; padding-top: 16px; }
/* La vista llega al marco del bloque, sin aire: el bloque es su marco. La barra
   queda pegada arriba y la imagen cubre hasta los cantos; si el renglón es más
   alto que ella, se recorta por abajo y a la derecha, nunca el resumen. */
.ev-pieza-vista { padding: 0; background: var(--neutral-0); }
.ev-pieza-vista .producto-pantalla { flex: 1 1 auto; display: flex; flex-direction: column; border: 0; border-radius: 0; }
.ev-pieza-vista .producto-lienzo { position: relative; flex: 1 1 auto; aspect-ratio: 3 / 2; }
.ev-pieza-vista .producto-lienzo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.ev-pieza-violeta { background: var(--primary); color: #fff; }
.ev-pieza-violeta h3 { color: #fff; }
.ev-pieza-violeta h3 em { color: var(--champagne-300); }
.ev-pieza-violeta p { color: rgb(255 255 255 / .9); }
.ev-pieza-render { padding: 0; background: var(--noche); overflow: hidden; }
.ev-pieza-render .render, .ev-pieza-render img { width: 100%; height: 100%; }
.ev-pieza-render img { object-fit: cover; }
@media (prefers-reduced-motion: no-preference) {
  .ev-pieza-render img { transition: transform 900ms var(--ease); }
  .ev-pieza-render:hover img { transform: scale(1.04); }
}
.ev-pieza-noche { background: var(--noche); color: var(--noche-texto); }
.ev-pieza-noche h3 { color: #fff; }
.ev-pieza-noche h3 em { color: var(--champagne-300); }
.ev-pieza-noche p { color: var(--noche-tenue); }
.ev-pieza-motor { overflow: hidden; }
.ev-pieza-motor h3 { font-size: clamp(2.125rem, 1.4rem + 2.2vw, 3.25rem); }
.ev-pieza-motor p { max-width: 24em; font-size: 1.0625rem; }
.ev-pieza-champana { background: color-mix(in srgb, var(--champagne-300) 45%, var(--neutral-0)); }
.ev-pieza-champana p { color: var(--ink-2); }

/* Alianzas: el encabezado al centro y tres columnas tipográficas, una por
   público, separadas por filetes. */
.ev-alianzas-cabeza { max-width: 46em; margin-inline: auto; text-align: center; }
.ev-alianzas-cabeza h2 { max-width: 16em; margin-inline: auto; text-wrap: balance; }
.ev-alianzas-cabeza .lead { margin: .6em auto 0; text-wrap: pretty; }
.ev-publicos {
  list-style: none; display: grid; margin: clamp(40px, 5vw, 64px) 0 0; padding: 0;
  border-block: 1px solid color-mix(in srgb, var(--paper-line) 85%, transparent);
}
.ev-publicos li { display: grid; gap: 12px; align-content: start; padding: clamp(28px, 3vw, 44px) clamp(8px, 2.4vw, 36px); }
.ev-publicos li + li { border-top: 1px solid color-mix(in srgb, var(--paper-line) 85%, transparent); }
@media (min-width: 900px) {
  .ev-publicos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ev-publicos li + li { border-top: 0; border-left: 1px solid color-mix(in srgb, var(--paper-line) 85%, transparent); }
}
.ev-publicos h3 {
  margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(1.5rem, 1.1rem + 1vw, 1.875rem);
  line-height: 1.15; letter-spacing: -.01em; text-wrap: balance;
}
.ev-publicos p { margin: 0; color: var(--ink-2); text-wrap: pretty; }
/* El deslizador de cristal del sitio, al centro. Su leyenda larga pide más
   ancho que la de Planes: entre 318 y 459 px de canal va la corta. */
.ev-alianzas { padding-bottom: clamp(96px, 11vw, 152px); }
.ev-alianzas-accion { display: grid; justify-items: center; margin: clamp(40px, 5vw, 64px) 0 0; }
.ev-alianzas-accion .deslizador { max-width: 480px; }
@container (min-width: 318px) and (max-width: 459px) {
  .ev-alianzas-accion .deslizador-texto .largo { display: none; }
  .ev-alianzas-accion .deslizador-texto .corto { display: inline; }
}

/* Contacto: el pie grande con el único formulario. Arriba, la corona; luego se
   elige qué interesa y los campos cambian con la elección. */
.ev-contacto { padding-block: calc(var(--corona) + clamp(16px, 2vw, 28px)) clamp(40px, 5vw, 72px); }
.ev-ancla { position: absolute; top: 0; left: 0; width: 1px; height: 1px; }
.ev-contacto-rejilla { display: grid; gap: clamp(32px, 5vw, 72px); }
@media (min-width: 1000px) {
  .ev-contacto-rejilla { grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); align-items: start; }
  .ev-contacto-texto { position: sticky; top: 40px; }
}
.ev-contacto-texto h2 { max-width: 13em; text-wrap: balance; }
.ev-contacto-texto .lead { margin-top: .5em; max-width: 30em; text-wrap: pretty; }
.ev-contacto-whatsapp { margin-top: 24px; color: var(--ink-2); }
.ev-contacto-whatsapp a { font-weight: 600; }
.ev-intereses { min-width: 0; margin: 0; padding: 0; border: 0; }
.ev-intereses legend { margin-bottom: 14px; padding: 0; font-size: 1.125rem; font-weight: 600; color: var(--ink); }
/* Las tres opciones van lado a lado solo si el formulario tiene ancho para
   ellas; si no, en renglones completos, que se leen de un vistazo. */
.ev-contacto-forma { container-type: inline-size; }
.ev-intereses-opciones { display: grid; gap: 10px; }
@container (min-width: 620px) { .ev-intereses-opciones { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ev-interes {
  position: relative; display: grid; gap: 4px; align-content: start; padding: 14px 44px 14px 16px;
  border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--neutral-0); cursor: pointer;
  transition: border-color var(--t) var(--ease), background var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.ev-interes input { position: absolute; top: 16px; right: 16px; width: 18px; height: 18px; margin: 0; accent-color: var(--primary); }
.ev-interes-titulo { font-weight: 600; color: var(--ink); line-height: 1.3; }
.ev-interes-promesa { font-size: .875rem; line-height: 1.4; color: var(--ink-3); }
.ev-interes:hover { border-color: var(--primary); }
.ev-interes:has(input:checked) { border-color: var(--primary); background: var(--primary-tint); box-shadow: inset 0 0 0 1px var(--primary); }
.ev-interes:has(input:focus-visible) { box-shadow: var(--ring); }
.ev-form-intro { margin: 0; color: var(--ink-2); text-wrap: pretty; }
.ev-campos { display: grid; gap: 20px; }
@media (min-width: 720px) {
  .ev-campos { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row dense; }
  .ev-ancho { grid-column: 1 / -1; }
}
.ev-otra { padding: 0; border: 0; background: none; font: inherit; color: var(--primary); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* Formularios: los campos son los del sitio (.form, .field, .choice, .check). */
.ev-form { max-width: none; }
.ev-opcional { font-weight: 400; color: var(--ink-3); }
.ev-error { margin: 0; color: var(--bad); font-size: var(--fs-small); }
.ev-con-error input:not([type="radio"]):not([type="checkbox"]),
.ev-con-error textarea { border-color: var(--bad); }
.ev-con-error input:not([type="radio"]):not([type="checkbox"]):focus,
.ev-con-error textarea:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--bad) 22%, transparent); }
.ev-trampa { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.ev-opciones { display: grid; gap: 8px; }
@media (min-width: 560px) { .ev-opciones { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ev-opciones label { width: 100%; line-height: 1.35; }
.ev-consentimiento { display: grid; gap: 8px; }
.ev-aviso { margin: 0; padding: 14px 16px; border: 1px solid var(--bad); border-radius: var(--r-sm); background: var(--neutral-0); color: var(--ink-2); }
.ev-aviso:focus { outline: none; }
.ev-aviso:focus-visible { box-shadow: var(--ring); }
.ev-enviar { width: 100%; }
@media (min-width: 640px) { .ev-enviar { width: auto; justify-self: start; } }

.ev-confirmacion { max-width: none; }
.ev-confirmacion h3 { margin: 0 0 8px; font-size: var(--fs-h3); }
.ev-confirmacion-accion { margin-top: 20px; }
.ev-confirmacion-nota { margin-top: 16px; color: var(--ink-3); }

/* Pie: cierra el tramo claro sobre el mismo degradado. */
.ev-pie { padding-block: clamp(56px, 7vw, 96px) clamp(28px, 4vw, 44px); }
.ev-pie-cima {
  display: grid; gap: 28px; padding-bottom: clamp(28px, 4vw, 40px);
  border-bottom: 1px solid color-mix(in srgb, var(--paper-line) 85%, transparent);
}
@media (min-width: 900px) { .ev-pie-cima { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 56px; } }
.ev-pie-logo { height: 26px; width: auto; }
.ev-pie-enlaces { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 28px; }
.ev-pie-enlaces a { display: inline-block; padding: 12px 0; color: var(--ink-2); font-weight: 500; transition: color var(--t) var(--ease); }
.ev-pie-enlaces a:hover { color: var(--primary); }
.ev-amppi { display: flex; align-items: center; gap: 14px; margin: 0; color: var(--ink-3); font-size: .8125rem; }
.ev-amppi-sello { display: block; height: 40px; overflow: hidden; }
.ev-amppi-sello img { height: 52px; width: auto; max-width: none; }
.ev-pie-legal { display: grid; gap: 12px 40px; padding-top: clamp(20px, 3vw, 28px); color: var(--ink-3); font-size: .8125rem; }
@media (min-width: 900px) { .ev-pie-legal { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; } }
.ev-pie-legal p { margin: 0; max-width: 72ch; }
.ev-pie-legal a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
.ev-pie-legal a:hover { color: var(--primary); }