/* Móvil de la portada dibujado en HTML+CSS con la interfaz actual de la app (sin imágenes, sin JavaScript).
   Todo escala con el ancho del contenedor: calc(1 * var(--u)) = 1/413,8 del ancho del móvil (pantalla de calc(390 * var(--u)), como la app). */
.phone {
  position: relative;
  width: calc(min(100svh - 11.6rem, 42rem) * .4918);
  aspect-ratio: 413.8 / 841.4;
  container-type: inline-size;
  flex: none;
}
.phone__body {
  --u: calc(100cqw / 413.8);
  position: absolute; inset: 0;
  border-radius: calc(58 * var(--u)); background: #0e1712;
  box-shadow: inset 0 0 0 calc(2.2 * var(--u)) #2a382f, 0 calc(14 * var(--u)) calc(28 * var(--u)) rgba(11, 26, 15, .28);
  font-family: var(--font-body);
}
.phone__screen { position: absolute; left: calc(11.9 * var(--u)); top: calc(11.9 * var(--u)); width: calc(390 * var(--u)); height: calc(818 * var(--u)); border-radius: calc(47.5 * var(--u)); overflow: hidden; background: #000; color: #fff; }
.phone__island { position: absolute; z-index: 5; left: 50%; top: calc(11 * var(--u)); width: calc(112 * var(--u)); height: calc(32 * var(--u)); margin-left: calc(-56 * var(--u)); border-radius: calc(20 * var(--u)); background: #05090a; }
.phone__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; display: block; max-width: none; }
.phone__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 20, 14, .78) 0%, rgba(8, 20, 14, .62) 16%, rgba(8, 20, 14, 0) 40%); }
.phone__status { position: absolute; z-index: 4; left: 0; right: 0; top: 0; height: calc(44 * var(--u)); font-weight: 700; font-size: calc(15 * var(--u)); }
.phone__status b { position: absolute; left: calc(30 * var(--u)); top: calc(13 * var(--u)); font-weight: 700; }
.phone__status svg { position: absolute; right: calc(26 * var(--u)); top: calc(15 * var(--u)); width: calc(66 * var(--u)); height: calc(14 * var(--u)); fill: currentColor; }
.phone__greet { position: absolute; left: calc(20 * var(--u)); top: calc(54 * var(--u)); font-size: calc(22 * var(--u)); font-weight: 800; letter-spacing: -.01em; text-shadow: 0 calc(1 * var(--u)) calc(8 * var(--u)) rgba(0, 0, 0, .45); }
.phone__comp { position: absolute; left: calc(20 * var(--u)); top: calc(84 * var(--u)); font-size: calc(14 * var(--u)); font-weight: 600; color: rgba(255, 255, 255, .92); text-shadow: 0 calc(1 * var(--u)) calc(6 * var(--u)) rgba(0, 0, 0, .45); }
.phone__tray { position: absolute; right: calc(20 * var(--u)); top: calc(54 * var(--u)); width: calc(38 * var(--u)); height: calc(38 * var(--u)); border-radius: 50%; background: rgba(255, 255, 255, .24); display: grid; place-items: center; }
.phone__tray svg { width: calc(20 * var(--u)); height: calc(20 * var(--u)); }
.phone__card { position: absolute; left: calc(16 * var(--u)); top: calc(130 * var(--u)); width: calc(358 * var(--u)); height: calc(226 * var(--u)); border-radius: calc(22 * var(--u)); padding: calc(16 * var(--u)) calc(18 * var(--u));
  background: rgba(15, 25, 38, .74); border: calc(1 * var(--u)) solid rgba(255, 255, 255, .18); }
.phone__tag { font-size: calc(11 * var(--u)); font-weight: 800; letter-spacing: calc(1.6 * var(--u)); color: rgba(255, 255, 255, .78); margin-bottom: calc(4 * var(--u)); }
.phone__fecha { font-size: calc(22 * var(--u)); font-weight: 800; line-height: 1.15; letter-spacing: -.3u; }
.phone__year { font-size: calc(12.5 * var(--u)); color: rgba(255, 255, 255, .78); margin-top: calc(3 * var(--u)); font-weight: 600; }
.phone__date { position: absolute; right: calc(18 * var(--u)); top: calc(16 * var(--u)); min-width: calc(54 * var(--u)); text-align: center; background: rgba(255, 255, 255, .14); border: calc(1 * var(--u)) solid rgba(255, 255, 255, .22); border-radius: calc(11 * var(--u)); padding: calc(6 * var(--u)) calc(9 * var(--u)); }
.phone__date i { display: block; font-style: normal; font-size: calc(10 * var(--u)); font-weight: 800; letter-spacing: calc(1.4 * var(--u)); color: rgba(255, 255, 255, .85); }
.phone__date b { display: block; font-size: calc(20 * var(--u)); font-weight: 800; line-height: 1; margin-top: calc(3 * var(--u)); }
.phone__row { position: absolute; left: calc(18 * var(--u)); right: calc(18 * var(--u)); top: calc(96 * var(--u)); height: calc(34 * var(--u)); display: flex; align-items: center; gap: calc(12 * var(--u)); font-size: calc(14 * var(--u)); font-weight: 600; }
.phone__dot { width: calc(12 * var(--u)); height: calc(12 * var(--u)); border-radius: 50%; background: #36c97c; box-shadow: 0 0 0 calc(3 * var(--u)) rgba(43, 160, 99, .25); flex: none; }
.phone__row span:nth-child(2) { flex: 1; }
.phone__row b { font-size: calc(15 * var(--u)); font-weight: 700; font-variant-numeric: tabular-nums; }
.phone__total { position: absolute; left: calc(18 * var(--u)); right: calc(18 * var(--u)); top: calc(160 * var(--u)); height: calc(44 * var(--u)); border-radius: calc(12 * var(--u)); background: #177a45; display: flex; align-items: center; justify-content: space-between; padding: 0 calc(14 * var(--u)); font-weight: 800; box-shadow: 0 calc(4 * var(--u)) calc(12 * var(--u)) rgba(23, 122, 69, .35); }
.phone__total span { font-size: calc(11 * var(--u)); letter-spacing: calc(1.6 * var(--u)); }
.phone__total b { font-size: calc(18 * var(--u)); font-weight: 800; font-variant-numeric: tabular-nums; }
.phone__btn { position: absolute; left: calc(16 * var(--u)); top: calc(368 * var(--u)); width: calc(358 * var(--u)); height: calc(46 * var(--u)); border-radius: calc(14 * var(--u)); background: #c2410c; display: flex; align-items: center; justify-content: center; gap: calc(8 * var(--u)); font-size: calc(14.5 * var(--u)); font-weight: 800; box-shadow: 0 calc(3 * var(--u)) calc(10 * var(--u)) rgba(0, 0, 0, .25); }
.phone__btn svg { width: calc(12 * var(--u)); height: calc(12 * var(--u)); }
.phone__tabs { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: calc(74 * var(--u)); padding: calc(8 * var(--u)) calc(8 * var(--u)) 0; display: grid; grid-template-columns: repeat(5, 1fr); background: rgba(255, 255, 255, .96); color: #6b7a70; font-size: calc(9.5 * var(--u)); font-weight: 600; text-align: center; }
.phone__tabs span { display: flex; flex-direction: column; align-items: center; gap: calc(4 * var(--u)); }
.phone__tabs svg { width: calc(22 * var(--u)); height: calc(22 * var(--u)); }
.phone__tabs .on { color: #0a9e55; }
.phone__bar { position: absolute; z-index: 4; left: 50%; bottom: calc(7 * var(--u)); width: calc(120 * var(--u)); height: calc(4.5 * var(--u)); margin-left: calc(-60 * var(--u)); border-radius: calc(3 * var(--u)); background: #0b1a0f; }

/* colocación en el hero */
.hero .hero__media .phone { transform: rotate(2deg); transform-origin: 50% 90%; }
@media (max-width: 55.99rem) {
  .hero .hero__media .phone { position: absolute; left: 50%; top: 0; width: min(58vw, 13rem); margin-left: calc(min(58vw, 13rem) / -2); }
  .hero .sticker { left: 1%; top: 40%; width: 4.4rem; height: 4.4rem; font-size: .72rem; }
  .hero .sticker b { font-size: 1.35rem; }
}

/* Cuadrante semanal del panel dibujado en HTML+CSS (datos ficticios). calc(1 * var(--u)) = 1/560 del ancho; en estrecho, 1/380 y sin fin de semana */
.cuad { container-type: inline-size; width: 100%; }
.cuad__win { --u: calc(100cqw / 560); background: #fff; color: #16221b; border-radius: calc(16 * var(--u)); overflow: hidden; font-family: var(--font-body);
  box-shadow: 0 0 0 calc(1 * var(--u)) rgba(11, 26, 15, .14), 0 calc(14 * var(--u)) calc(28 * var(--u)) rgba(11, 26, 15, .22); }
.cuad__tabs { display: flex; height: calc(38 * var(--u)); border-bottom: calc(1.5 * var(--u)) solid #d8e0d9; font-size: calc(13 * var(--u)); font-weight: 700; color: #56665b; }
.cuad__tabs span { position: relative; display: flex; align-items: center; padding: 0 calc(16 * var(--u)); }
.cuad__tabs .on { color: #16221b; }
.cuad__tabs .on::after { content: ""; position: absolute; left: 0; right: 0; bottom: calc(-1.5 * var(--u)); height: calc(3 * var(--u)); background: #3aaa35; }
.cuad__bar { display: flex; align-items: center; gap: calc(7 * var(--u)); height: calc(48 * var(--u)); padding: 0 calc(14 * var(--u)); border-bottom: calc(1.5 * var(--u)) solid #d8e0d9; font-size: calc(12.5 * var(--u)); font-weight: 700; }
.cuad__bar i { display: grid; place-items: center; width: calc(26 * var(--u)); height: calc(26 * var(--u)); border: calc(1.5 * var(--u)) solid #aab6ad; border-radius: calc(7 * var(--u)); font-style: normal; color: #41524a; }
.cuad__bar .f { padding: 0 calc(12 * var(--u)); height: calc(26 * var(--u)); display: flex; align-items: center; border: calc(1.5 * var(--u)) solid #c9d4cb; border-radius: calc(7 * var(--u)); }
.cuad__bar .pdf { margin-left: auto; height: calc(26 * var(--u)); padding: 0 calc(11 * var(--u)); display: flex; align-items: center; border-radius: calc(7 * var(--u)); background: #b3261e; color: #fff; font-weight: 800; }
.cuad__head, .cuad__row { display: grid; grid-template-columns: calc(112 * var(--u)) repeat(7, 1fr); align-items: center; padding: 0 calc(12 * var(--u)); }
.cuad__head { height: calc(34 * var(--u)); background: #edf1ec; border-bottom: calc(1.5 * var(--u)) solid #d8e0d9; font-size: calc(11.5 * var(--u)); font-weight: 800; color: #56665b; text-align: center; }
.cuad__head span:first-child { text-align: left; padding-left: calc(4 * var(--u)); }
.cuad__row { height: calc(60 * var(--u)); border-bottom: calc(1.5 * var(--u)) solid #e3e9e4; }
.cuad__name { display: flex; align-items: center; gap: calc(7 * var(--u)); font-size: calc(12.5 * var(--u)); font-weight: 800; padding-left: calc(4 * var(--u)); white-space: nowrap; }
.cuad__name b { display: grid; place-items: center; width: calc(22 * var(--u)); height: calc(22 * var(--u)); border-radius: 50%; background: #007a35; color: #fff; font-size: calc(11 * var(--u)); }
.cuad__c { height: calc(44 * var(--u)); margin: 0 calc(2.5 * var(--u)); border-radius: calc(8 * var(--u)); display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: calc(11.5 * var(--u)); font-weight: 800; line-height: 1.2; }
.cuad__c small { font-size: calc(10.5 * var(--u)); font-weight: 600; opacity: .85; }
.cuad .m { background: #dbeafe; color: #0e2a5e; }
.cuad .t { background: #ede4fd; color: #3a1478; }
.cuad .v { background: #d3f0de; color: #0a5a2c; font-size: calc(9.5 * var(--u)); }
.cuad .b { background: #fde0e0; color: #8f1d1d; }
.cuad__leg { display: flex; flex-wrap: wrap; gap: calc(6 * var(--u)) calc(14 * var(--u)); padding: calc(11 * var(--u)) calc(14 * var(--u)) calc(12 * var(--u)); font-size: calc(11.5 * var(--u)); font-weight: 700; color: #41524a; }
.cuad__leg span { display: flex; align-items: center; gap: calc(6 * var(--u)); }
.cuad__leg span::before { content: ""; width: calc(11 * var(--u)); height: calc(11 * var(--u)); border-radius: calc(3 * var(--u)); background: currentColor; opacity: .0; }
.cuad__leg .m::before, .cuad__leg .t::before, .cuad__leg .v::before, .cuad__leg .b::before { opacity: 1; }
.cuad__leg .m { background: none; color: #0e2a5e; } .cuad__leg .m::before { background: #93c5fd; }
.cuad__leg .t { background: none; color: #3a1478; } .cuad__leg .t::before { background: #c4b5fd; }
.cuad__leg .v { background: none; color: #0a5a2c; font-size: calc(11.5 * var(--u)); } .cuad__leg .v::before { background: #86d6a4; }
.cuad__leg .b { background: none; color: #8f1d1d; } .cuad__leg .b::before { background: #f5a3a3; }
@container (max-width: 440px) {
  .cuad__win { --u: calc(100cqw / 380); }
  .cuad__head, .cuad__row { grid-template-columns: calc(92 * var(--u)) repeat(5, 1fr); }
  .cuad .we { display: none; }
  .cuad__bar .f { padding: 0 calc(8 * var(--u)); }
  .cuad__name { font-size: calc(12 * var(--u)); }
}

/* Segunda pantalla (captura real de la app) que alterna con la dibujada. Solo CSS: sin scripts y
   sin bloquear la carga (la imagen va en lazy y con prioridad baja; hasta que llega se ve la primera). */
/* La barra de inicio dibujada se oculta mientras se ve la captura (pisaria sus pestañas). */
.phone__bar { z-index: 5; animation: phone-oculta 14s ease-in-out 4s infinite; }
/* Por encima de la barra de estado (4) y las pestañas (3) dibujadas; debajo de la isla (5) y la barra de inicio. */
.phone__alt { position: absolute; inset: 0; z-index: 4; opacity: 0; animation: phone-alterna 14s ease-in-out 4s infinite; }
.phone__alt img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; display: block; max-width: none; }
@keyframes phone-alterna { 0%, 43% { opacity: 0; } 50%, 93% { opacity: 1; } 100% { opacity: 0; } }
@keyframes phone-oculta { 0%, 43% { opacity: 1; } 50%, 93% { opacity: 0; } 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .phone__alt, .phone__bar { animation: none; } }