.layout-1 { min-height:100vh }
.layout-2 { position:sticky; top:0; z-index:30; background:rgba(250,249,245,.92); backdrop-filter:blur(10px); border-bottom:1px solid #E3E2DA }
.layout-3 { max-width:1180px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:24px; height:62px; padding:0 28px }
.layout-4 { display:flex; align-items:center; gap:10px }
.layout-5 { display:block; color:#14150F }
.layout-6 { display:flex; align-items:center; gap:26px; font-size:14px; font-weight:500; color:#3A3A32 }
.layout-7 { display:flex; align-items:center; height:38px; padding:0 16px; border-radius:9px; background:#14150F; color:#FAF9F5; font-size:13.5px; font-weight:600 }
/* Grupo "Iniciar sesión" + CTA (obra#1159): un <span>, no un <div>, para
   quedar exento de la regla mobile ".layout-3 > div{display:none}" y seguir
   siendo alcanzable desde el celular. Mismo tipografía que .layout-6. */
.layout-nav-actions { display:flex; align-items:center; gap:16px }
.layout-nav-login { font-size:14px; font-weight:500; color:#3A3A32 }
.layout-8 { position:relative; overflow:hidden; background:#EEF0EA; min-height:calc(100vh - 62px); display:flex; align-items:center }
.layout-9 { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:70% 50%; display:block }
.layout-10 { position:absolute; inset:0; width:100%; height:100%; display:block }
.layout-11 { position:absolute; inset:0; background:linear-gradient(90deg, rgba(238,240,234,.92) 0%, rgba(238,240,234,.7) 45%, rgba(238,240,234,.05) 100%); pointer-events:none }
.layout-12 { position:relative; width:100%; max-width:1180px; margin:0 auto; padding:96px 28px 110px; pointer-events:none }
.layout-13 { max-width:760px; pointer-events:auto }
.layout-14 { margin:0; font-size:clamp(44px, 6.2vw, 84px); font-weight:800; letter-spacing:-.04em; line-height:.98; text-wrap:balance }
.layout-15 { color:#2F7150 }
.layout-16 { margin:26px 0 0; max-width:560px; font-size:19px; line-height:1.5; color:#3A3A32; text-wrap:pretty; opacity:0 }
.layout-17 { display:flex; align-items:center; gap:12px; margin-top:32px; flex-wrap:wrap; opacity:0 }
.layout-18 { display:flex; align-items:center; height:50px; padding:0 24px; border-radius:10px; background:#14150F; color:#FAF9F5; font-size:15px; font-weight:600 }
.layout-19 { display:flex; align-items:center; gap:9px; height:50px; padding:0 20px; border-radius:10px; border:1px solid #14150F; font-size:15px; font-weight:600; background:rgba(255,255,255,.5) }
.layout-20 { width:8px; height:8px; border-radius:50%; background:#2F7150 }
.layout-21 { display:flex; gap:28px; margin-top:44px; padding-top:22px; border-top:1px solid #D9D8CF; font-size:13px; color:#5E5E55; opacity:0; flex-wrap:wrap }
.layout-22 { color:#14150F; font-weight:700 }
.layout-23 { position:absolute; left:28px; bottom:26px; display:flex; align-items:center; gap:10px; font-family:'Archivo Narrow',Archivo,sans-serif; font-size:11.5px; font-weight:600; letter-spacing:.12em; color:#8E8D82; opacity:0 }
.layout-24 { display:block; color:#2F7150 }
.layout-25 { max-width:1180px; margin:0 auto; padding:96px 28px 40px }
.layout-26 { display:flex; align-items:baseline; gap:16px }
.layout-27 { flex:none; font-size:19px; font-weight:800; letter-spacing:-.02em; padding:2px 8px; background-image:linear-gradient(#C9E8D4,#C9E8D4); background-repeat:no-repeat; background-size:100% 100% }
.layout-28 { height:1px; margin:18px 0 44px; background:#E3E2DA }
.layout-29 { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); gap:22px }
.layout-30 { display:flex; flex-direction:column; gap:14px; padding:26px 26px 28px; border:1px solid #E3E2DA; border-radius:14px; background:#FFFFFF; transition:border-color .2s, box-shadow .3s }
.layout-31 { font-family:'Archivo Narrow',Archivo,sans-serif; font-size:12px; font-weight:600; letter-spacing:.12em; color:#2F7150 }
.layout-32 { font-size:24px; font-weight:800; letter-spacing:-.025em; line-height:1.15; text-wrap:balance }
.layout-33 { font-size:14.5px; line-height:1.55; color:#5E5E55; text-wrap:pretty }
.layout-34 { margin-top:auto; padding-top:14px; border-top:1px solid #F1F0EA; font-size:14px; line-height:1.5; color:#14150F; text-wrap:pretty }
.layout-35 { font-weight:700; color:#2F7150 }
.layout-36 { max-width:1180px; margin:0 auto; padding:72px 28px 40px }
.layout-37 { font-size:15px; color:#5E5E55 }
.layout-38 { height:1px; margin:18px 0 40px; background:#E3E2DA }
.layout-39 { display:grid; grid-template-columns:260px minmax(0,1fr); gap:28px; align-items:start }
.layout-40 { display:flex; flex-direction:column; gap:4px }
.layout-41 { font-size:15px; font-weight:700; color:#14150F }
.layout-42 { font-size:12.5px; line-height:1.45; color:#5E5E55 }
.layout-43 { border:1px solid #E3E2DA; border-radius:14px; background:#FFFFFF; overflow:hidden }
.layout-44 { display:flex; align-items:center; justify-content:space-between; height:38px; padding:0 14px; border-bottom:1px solid #F1F0EA; background:#FBFAF6; font-size:12.5px; color:#5E5E55 }
.layout-45 { font-family:'Archivo Narrow',Archivo,sans-serif; letter-spacing:.06em; font-weight:600; font-size:11px }
.layout-46 { width:100%; height:520px }
.layout-47 { display:flex; gap:10px; margin-top:14px; flex-wrap:wrap }
.layout-48 { display:inline-flex; align-items:center; gap:7px; height:30px; padding:0 12px; border-radius:8px; border:1px solid #E3E2DA; background:#FFFFFF; font-size:13px; color:#3A3A32 }
.layout-49 { width:6px; height:6px; border-radius:50%; background:#2F7150 }
.layout-50 { position:relative; margin-top:72px; background:#14150F; color:#FAF9F5; overflow:hidden }
.layout-51 { position:relative; max-width:1180px; margin:0 auto; padding:96px 28px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:60px; align-items:center }
.layout-52 { flex:none; font-size:19px; font-weight:800; letter-spacing:-.02em; padding:2px 8px; background-image:linear-gradient(#2F7150,#2F7150); background-repeat:no-repeat; background-size:100% 100%; color:#FAF9F5 }
.layout-53 { margin:26px 0 0; font-size:44px; font-weight:800; letter-spacing:-.032em; line-height:1.05; text-wrap:balance }
.layout-54 { margin:20px 0 0; font-size:17px; line-height:1.55; color:#B7B6AB; text-wrap:pretty }
.layout-55 { display:flex; flex-direction:column; gap:12px; margin-top:28px }
.layout-56 { display:flex; gap:12px; font-size:15px; line-height:1.5; color:#FAF9F5 }
.layout-57 { flex:none; margin-top:8px; width:7px; height:7px; border-radius:50%; background:#4FA877 }
.layout-58 { border:1px solid rgba(250,249,245,.14); border-radius:16px; background:#1B1C16; padding:20px; display:flex; flex-direction:column; gap:14px }
.layout-59 { display:flex; align-items:center; gap:10px; padding-bottom:12px; border-bottom:1px solid rgba(250,249,245,.12) }
.layout-60 { display:flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%; background:#2F7150; font-weight:800; font-size:14px }
.layout-61 { font-size:14px; font-weight:600 }
.layout-62 { margin-left:auto; display:flex; align-items:center; gap:6px; font-size:12px; color:#B7B6AB }
.layout-63 { width:6px; height:6px; border-radius:50%; background:#4FA877 }
.layout-64 { align-self:flex-end; max-width:82%; padding:11px 14px; border-radius:12px 12px 3px 12px; background:#FAF9F5; color:#14150F; font-size:14.5px; line-height:1.45 }
.layout-65 { align-self:flex-start; max-width:88%; padding:12px 14px; border-radius:12px 12px 12px 3px; background:rgba(250,249,245,.08); font-size:14.5px; line-height:1.5 }
.layout-66 { display:flex; gap:8px; flex-wrap:wrap }
.layout-67 { height:32px; display:inline-flex; align-items:center; padding:0 12px; border-radius:8px; background:#2F7150; font-size:13px; font-weight:600 }
.layout-68 { height:32px; display:inline-flex; align-items:center; padding:0 12px; border-radius:8px; border:1px solid rgba(250,249,245,.25); font-size:13px; font-weight:600 }
.layout-69 { color:#4FA877 }
.layout-70 { display:flex; align-items:center; gap:10px; height:44px; padding:0 14px; border-radius:10px; border:1px solid rgba(250,249,245,.18); font-size:14px; color:#8E8D82 }
.layout-71 { margin-left:auto; width:26px; height:26px; border-radius:7px; background:#2F7150 }
.layout-72 { max-width:1180px; margin:0 auto; padding:96px 28px 40px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:56px; align-items:center }
.layout-73 { display:flex; justify-content:center; gap:18px }
.layout-74 { width:230px; border:1px solid #D9D8CF; border-radius:30px; background:#FFFFFF; padding:9px; box-shadow:0 30px 60px -30px rgba(20,21,15,.35); margin-top:40px }
/* obra#1159: dc-runtime.js renderiza el <image-slot> con el atributo
 * "classname" en vez de "class" (verificado inspeccionando el DOM real:
 * DOM.getAttributes muestra "classname":"layout-75", nunca "class") — la
 * regla .layout-75 nunca se aplicaba al host y el componente caía a su
 * fallback interno (:host{aspect-ratio:3/2}), que no tiene nada que ver
 * con la proporción real de las capturas y las recortaba al centro
 * (ni el encabezado "Pendientes" ni la tab bar quedaban visibles). Se fija
 * el tamaño por id (#movil-1/#movil-2, atributos que sí llegan intactos)
 * en vez de depender de esa clase rota, con aspect-ratio igual a la
 * proporción real de los PNG (1206×2622): con el frame en la MISMA
 * proporción que la imagen, "cover" (default del componente) ya muestra
 * la captura completa de arriba a abajo sin recortar nada. */
.layout-75, #movil-1, #movil-2 { width:100%; aspect-ratio:1206/2622; height:auto }
.layout-76 { width:270px; border:1px solid #D9D8CF; border-radius:30px; background:#FFFFFF; padding:9px; box-shadow:0 30px 60px -30px rgba(20,21,15,.35) }
.layout-77 { margin:20px 0 0; font-size:17px; line-height:1.55; color:#3A3A32; text-wrap:pretty }
.layout-78 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:28px }
.layout-79 { padding:16px 18px; border:1px solid #E3E2DA; border-radius:12px; background:#FFFFFF; transition:border-color .2s, transform .25s }
.layout-80 { font-size:15px; font-weight:700 }
.layout-81 { margin-top:5px; font-size:13.5px; line-height:1.5; color:#5E5E55 }
.layout-82 { max-width:1180px; margin:0 auto; padding:96px 28px 40px; display:grid; grid-template-columns:300px minmax(0,1fr); gap:48px; align-items:start }
.layout-83 { position:sticky; top:96px; display:flex; flex-direction:column }
.layout-84 { margin:20px 0 0; font-size:15px; line-height:1.55; color:#5E5E55; text-wrap:pretty }
.layout-85 { display:flex; align-items:center; gap:14px; margin-top:34px }
.layout-86 { font-family:'Archivo Narrow',Archivo,sans-serif; font-size:40px; font-weight:700; letter-spacing:-.02em; line-height:1; color:#14150F; font-variant-numeric:tabular-nums; transition:color .3s }
.layout-87 { flex:none; white-space:nowrap; font-family:'Archivo Narrow',Archivo,sans-serif; font-size:13px; font-weight:600; letter-spacing:.12em; color:#8E8D82 }
.layout-88 { display:flex; gap:6px; margin-top:14px }
.layout-89 { display:inline-flex; align-items:center; gap:10px; align-self:flex-start; margin-top:36px; height:42px; padding:0 16px 0 14px; border-radius:10px; border:1px solid #E3E2DA; background:#FFFFFF; font-size:14px; font-weight:600; color:#14150F; transition:border-color .2s, box-shadow .3s }
.layout-90 { display:flex; flex-direction:column }
.layout-91 { position:absolute; left:20px; right:20px; top:0; height:1px; background:#E3E2DA }
.layout-92 { display:grid; grid-template-columns:44px minmax(0,1fr) 36px; align-items:center; gap:16px; width:100%; padding:22px 0; border:none; background:transparent; text-align:left; cursor:pointer; color:#14150F }
.layout-93 { overflow:hidden }
.layout-94 { justify-self:center; width:1px; border-left:2px dashed #C9E8D4 }
.layout-95 { margin:0; font-size:15.5px; line-height:1.6; color:#3A3A32; text-wrap:pretty }
.layout-96 { border-top:1px solid #E3E2DA }
.layout-97 { max-width:1180px; margin:88px auto 0; padding:0 28px }
.layout-98 { position:relative; overflow:hidden; border-radius:18px; background:#2F7150; color:#FAF9F5; padding:64px 56px; display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:40px; align-items:center }
.layout-99 { display:block; position:absolute; inset:0 }
.layout-100 { position:relative }
.layout-101 { margin:0; font-size:42px; font-weight:800; letter-spacing:-.032em; line-height:1.05; text-wrap:balance }
.layout-102 { margin:18px 0 0; font-size:17px; line-height:1.5; color:#C9E8D4; text-wrap:pretty }
.layout-103 { position:relative; display:flex; flex-direction:column; gap:10px; padding:22px; border-radius:14px; background:#FAF9F5; color:#14150F }
.layout-104 { height:44px; padding:0 14px; border:1px solid #E3E2DA; border-radius:9px; background:#FFFFFF; font-size:14.5px; outline:none }
.demo-field { display:flex; flex-direction:column; gap:6px; min-width:0; font-size:13px; font-weight:600 }
.demo-field .layout-104 { width:100%; min-width:0; border-color:#8E8D82; font:inherit; font-weight:400; color:#14150F }
.demo-field textarea.layout-104 { height:auto; min-height:90px; padding:12px 14px; resize:vertical }
.demo-consent { display:flex; align-items:flex-start; gap:10px; padding:8px 0; font-size:13px; line-height:1.5; cursor:pointer; overflow-wrap:anywhere }
.demo-consent input { flex:none; width:20px; height:20px; margin:1px 0 0; accent-color:#2F7150 }
.demo-consent a { color:#2F7150; text-decoration:underline }
.demo-status { margin:2px 0; font-size:13px; line-height:1.5; color:#5E5E55; overflow-wrap:anywhere }
.demo-status[role=alert] { color:#972E22 }
#demo { scroll-margin-top:90px }
#demo :focus-visible, #demo-modal :focus-visible { outline:2px solid #2F7150; outline-offset:3px }
#demo button:disabled { opacity:.65; cursor:default }
#demo input:disabled, #demo select:disabled, #demo textarea:disabled { color:#5E5E55; background:#F1F0EA; opacity:1 }
#demo .layout-105 { min-height:48px; height:auto; padding:12px; white-space:normal }
.layout-105 { display:flex; align-items:center; justify-content:center; gap:10px; height:48px; margin-top:4px; border:none; border-radius:10px; background:#14150F; color:#FAF9F5; font-size:15px; font-weight:600; cursor:pointer; transition:background .25s, transform .15s, box-shadow .3s }
.layout-106 { display:block }
.layout-107 { font-size:12px; color:#8E8D82; text-align:center; margin-top:2px }
.layout-108 { position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center; padding:24px; background:rgba(20,21,15,.55); backdrop-filter:blur(6px) }
.layout-109 { position:relative; width:100%; max-width:440px; padding:36px 32px 28px; border-radius:18px; background:#FAF9F5; color:#14150F; box-shadow:0 40px 80px -30px rgba(20,21,15,.5) }
#demo-modal { max-height:calc(100dvh - 48px); overflow-y:auto; overflow-wrap:anywhere }
#demo-modal .layout-110 { width:44px; height:44px; top:8px; right:8px }
.layout-110 { position:absolute; top:14px; right:14px; width:34px; height:34px; border:none; border-radius:50%; background:transparent; color:#5E5E55; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .2s, color .2s }
.layout-111 { display:flex; align-items:center; justify-content:center; width:64px; height:64px; border-radius:50%; background:#C9E8D4; color:#2F7150 }
.layout-112 { margin:22px 0 0; font-size:26px; font-weight:800; letter-spacing:-.03em; line-height:1.1; text-wrap:balance }
.layout-113 { margin:12px 0 0; font-size:15px; line-height:1.55; color:#5E5E55; text-wrap:pretty }
.layout-114 { color:#14150F; font-weight:600 }
.layout-115 { display:flex; align-items:center; gap:10px; margin-top:22px; padding:12px 14px; border-radius:10px; border:1px solid #E3E2DA; background:#FFFFFF; font-size:13.5px; color:#3A3A32 }
.layout-116 { width:8px; height:8px; border-radius:50%; background:#2F7150; flex:none }
.layout-117 { display:flex; gap:10px; margin-top:22px }
.layout-118 { flex:1; height:46px; border:none; border-radius:10px; background:#14150F; color:#FAF9F5; font-size:15px; font-weight:600; cursor:pointer; transition:background .25s }
.layout-119 { flex:1; display:flex; align-items:center; justify-content:center; height:46px; border-radius:10px; border:1px solid #14150F; font-size:15px; font-weight:600; transition:background .2s }
.layout-120 { max-width:1180px; margin:0 auto; padding:64px 28px 48px; display:flex; align-items:flex-start; justify-content:space-between; gap:40px; flex-wrap:wrap }
.layout-121 { display:flex; flex-direction:column; gap:14px }
.layout-122 { font-size:13.5px; color:#5E5E55; max-width:300px; line-height:1.55 }
.layout-123 { display:flex; gap:56px; flex-wrap:wrap }
.layout-124 { display:flex; flex-direction:column; gap:9px; font-size:14px }
.layout-125 { font-family:'Archivo Narrow',Archivo,sans-serif; font-size:11.5px; font-weight:600; letter-spacing:.12em; color:#8E8D82 }
.layout-126 { color:#5E5E55 }
.layout-127 { width:100%; padding-top:22px; border-top:1px solid #E3E2DA; font-size:12.5px; color:#8E8D82 }

/* Stack existing sections on phones without changing desktop motion hooks. */
@media (max-width: 760px) {
  .layout-3 { gap: 12px; padding-inline: 14px; }
  .layout-3 > div { display: none; }
  /* "Iniciar sesión" queda exento de la regla anterior (vive en un <span>,
     no un <div>) para seguir siendo alcanzable desde el celular; se
     comprime junto al CTA para que ambos entren en 390px sin desbordar. */
  .layout-nav-actions { gap: 6px; }
  .layout-nav-login { font-size: 11px; white-space: nowrap; }
  .layout-nav-actions .layout-7 { padding: 0 10px; height: 32px; font-size: 11px; white-space: nowrap; }
  .layout-39, .layout-51, .layout-72, .layout-82, .layout-98 { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .layout-98 { padding: 36px 24px; }
  .layout-29 { grid-template-columns: minmax(0, 1fr); }
  [data-wipe] { flex-shrink: 1; }
  .layout-92 { grid-template-columns: 28px minmax(0, 1fr) 36px; gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-hero-fade] { opacity: 1; }
}

/* The video viewport is independent of animated copy and font reflow. */
#top > video.layout-9 {
  top: 0; right: 0; bottom: auto; left: 0;
  width: 100%;
  height: max(760px, calc(100svh - 63px));
  object-fit: cover;
  object-position: 70% 50%;
  transform: none;
  transform-origin: center center;
}
@media (max-width: 760px) {
  #top > video.layout-9 { height: max(960px, calc(100svh - 63px)); }
}