/*!
 * APEX — «Te escuchamos» · HOJA 3D DE ESCRITORIO DE LA PORTADA (somosapex.com) · OBRA LOCAL 2026-10-09 · NO DESPLEGADO
 * Decisión de Sergio 2026-10-09: web = variante A con la hoja 3D de Codex v3 (imán lima + dos esquinas levantadas);
 * app = variante A aprobada (rincon.css; este archivo NO la toca: solo actúa sobre `.apex-rincon--portada` y desde 720 px).
 *
 * `apex_rincon_componente( array( 'puerta' => 'portada' ) )` lo encola solo, DESPUÉS de rincon.css (no lo modifica ni hace falta
 * copiarlo a mano). Recursos: img/nota_blanca_3d_v3@1x.webp (380×290, 7 KB) y @2x (760×580, 17 KB), limpios de flecos
 * (umbral + islas + erosión 1 px + borde descontaminado) y enderezados. Fuente: _fuente/preparar_nota_codex.py.
 * Maqueta de referencia: mockups/A3-4_escritorio.png / A3-4_zoom.png.
 *
 * Cómo funciona: la hoja va en 9 cortes (border-image, siempre la @2x: ver nota junto a border-image-source). Franja de arriba = imán + esquina izquierda (60 px); franja de abajo =
 * esquina derecha levantada (100 px); el centro (papel liso) se estira solo en VERTICAL. El ANCHO es fijo (380 px): así el imán
 * nunca se deforma. Todo el contenido vive dentro del área lisa. La inclinación (−2°) la pone rincon.css para papel y texto juntos.
 * Por debajo de 720 px no hay hoja: queda el papel con cinta de rincon.css (la misma variante A del celular).
 * Contraste: tinta #1E4A2C / papel 8,9:1 · tinta suave #4A6B52 / papel 5,2:1 · opción elegida (papel / tinta) 8,9:1.
 */
@media (min-width: 720px) {
  .apex-rincon--portada {
    width: 380px;
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    padding: 0 22px 0 24px;
    background: none;
    border-radius: 0;
    box-shadow: none;
    border-style: solid;
    border-width: 60px 12px 100px;
    /* Solo @2x (17 KB), sin image-set(): Safari/WebKit con image-set() + cortes en % dibuja solo la franja de arriba
       (imán aplastado) y la de abajo, y deja el centro vacío. Medido 2026-10-11 en Safari privado y WebKit de Playwright. */
    border-image-source: url("img/nota_blanca_3d_v3@2x.webp");
    border-image-slice: 20.69% 3.16% 34.48% fill;   /* en % de la imagen: igual en todo navegador */
    border-image-repeat: stretch;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.45)) drop-shadow(14px 22px 16px rgba(0, 0, 0, 0.55));
  }
  .apex-rincon--portada::before { display: none; }                       /* el imán ya viene en la imagen: no va la cinta */
  .apex-rincon--portada .apex-rincon__x { top: -6px; right: -6px; }
  /* campos y correo bloqueado: velo de tinta muy suave sobre el papel (siguen AA) */
  .apex-rincon--portada .apex-rincon__mensaje,
  .apex-rincon--portada .apex-rincon__whatsapp,
  .apex-rincon--portada .apex-rincon__correo { background-color: color-mix(in srgb, var(--rincon-tinta) 3%, transparent); }
  .apex-rincon--portada.apex-rincon--sesion .apex-rincon__correo { background-color: transparent; }
  .apex-rincon--portada.apex-rincon--sesion .apex-rincon__caja-correo { background: color-mix(in srgb, var(--rincon-tinta) 5%, transparent); }
}
@media (min-width: 720px) and (hover: hover) {
  .apex-rincon--portada .apex-rincon__chip:hover { background: color-mix(in srgb, var(--rincon-tinta) 7%, transparent); }
  .apex-rincon--portada .apex-rincon__chip:has(.apex-rincon__radio:checked):hover { background: var(--rincon-acento); }
}
@media (min-width: 720px) and (hover: hover) and (prefers-reduced-motion: no-preference) {
  .apex-rincon--portada { transition: transform var(--rincon-transicion), filter 350ms ease; }
  /* cerrada: al pasar el mouse sube 3 px y la esquina levantada proyecta más sombra */
  .apex-rincon--portada:not(.apex-rincon--abierta):not(.apex-rincon--enviado):hover {
    transform: rotate(-1.4deg) translateY(-3px);
    filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.45)) drop-shadow(20px 30px 20px rgba(0, 0, 0, 0.55));
  }
}