/* La portada (solo la de inicio): la isla de verdad que contesta, para quién es, el día con las pantallas reales de
   Corvis, lo que se queda en el Mac y el cierre. Lo que comparten las páginas interiores sigue en inicio.css. */

/* ------------------------------------------------------------ la primera pantalla: el titular y, debajo, la tapa del Mac
   con la isla de verdad a su tamaño (1:1 a partir de 1140 px), que asoma por abajo de la pantalla */
.cara {
  --t: var(--c-hueso); --t2: var(--c-neutro-300); --t3: var(--c-neutro-400);
  --enlace: var(--m-marca-300); --texto: var(--c-hueso); --texto-2: var(--c-neutro-300); --texto-3: var(--c-neutro-400);
  --linea: var(--c-neutro-800); --linea-fuerte: var(--c-neutro-700);
  position: relative; isolation: isolate; overflow: hidden; background: var(--c-noche); color: var(--t);
  padding: clamp(40px, 6.5vh, 80px) 0 0;
}
.cara::before {         /* la luz violeta del icono, baja, detrás de la tapa */
  content: ''; position: absolute; z-index: -1; left: 10%; right: 10%; top: 38%; bottom: -10%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--c-marca) 30%, transparent), transparent 75%); opacity: .6; pointer-events: none;
}
.cara-dentro { display: grid; justify-items: center; text-align: center; }
.cara h1 { font-size: clamp(40px, 4vw, 56px); line-height: 1.02; letter-spacing: -.036em; color: var(--t); }
.cara h1 span { color: var(--t3); }
.cara-entrada { margin: 16px auto 0; color: var(--t2); }
.cara-acciones { margin-top: 24px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; align-items: center; }
.cara-req { margin-top: 4px; color: var(--t3); }
.boton-dur { font-weight: 500; font-variant-numeric: tabular-nums; margin-left: 2px; padding-left: 10px; border-left: 1px solid color-mix(in srgb, currentColor 35%, transparent); }

.cara-isla { margin: clamp(28px, 4vh, 44px) 0 0; width: min(100%, 1144px); }
.mac-tapa { position: relative; padding: 12px 12px 0; border-radius: 28px 28px 0 0; background: #050506;
  border: 2px solid transparent; border-bottom: 0; background-clip: padding-box;
  box-shadow: 0 -20px 80px -20px color-mix(in srgb, var(--c-marca) 35%, transparent); }
.mac-tapa::before { content: ''; position: absolute; inset: -2px -2px 0; border-radius: 30px 30px 0 0; padding: 2px 2px 0; pointer-events: none;
  background: linear-gradient(180deg, #8e8e93, #3a3a3c 40%, #2a2a2c);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.isla-video { position: relative; border-radius: 16px 16px 0 0; overflow: hidden; aspect-ratio: 2240 / 1040; background: #17121f; }
.isla-video img, .isla-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.isla-reproductor { opacity: 0; transition: opacity .25s; }
.isla-video.reproduciendo .isla-reproductor { opacity: 1; }
.cara-mandos { display: grid; gap: 14px; justify-items: center; padding: 26px 0 clamp(48px, 7vh, 80px); }
.cara-rotulo { font-size: 15px; color: var(--t3); }
.cara-rotulo strong { color: var(--t); font-weight: 600; margin-right: 4px; }
.altavoz { width: 13px; height: 11px; flex: none; background: currentColor; opacity: .7; clip-path: polygon(0 32%, 30% 32%, 62% 0, 62% 100%, 30% 68%, 0 68%); margin-right: 8px; display: inline-block; vertical-align: -1px; }
.cara .preguntas { justify-content: center; }
.cara .pregunta { font-size: 15px; min-height: 44px; padding: 0 16px; }
.cara .pregunta[aria-pressed="true"] { background: var(--c-hueso); color: var(--c-noche); border-color: var(--c-hueso); }
.voz { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 6px; border: 0; background: transparent; color: var(--t2); font: 500 15px/1 var(--letra); cursor: pointer; }
.voz-interruptor { width: 34px; height: 20px; border-radius: 999px; background: rgb(255 255 255 / .18); position: relative; transition: background .2s; }
.voz-interruptor::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--c-hueso); transition: transform .2s var(--muelle); }
.voz[aria-checked="true"] .voz-interruptor { background: var(--m-marca-2); }
.voz[aria-checked="true"] .voz-interruptor::after { transform: translateX(14px); }

@media (max-width: 640px) {
  .cara { padding-top: 26px; }
  .cara-dentro { justify-items: stretch; text-align: left; }
  .cara h1 { font-size: clamp(36px, 10.4vw, 44px); }
  .cara-entrada { margin: 14px 0 0; font-size: 17px; }
  .cara-acciones { margin-top: 22px; flex-direction: column; align-items: stretch; gap: 2px; }
  .cara-acciones .boton-isla, .cara-acciones .boton-linea { justify-content: center; }
  .cara-segundo { border: 0; min-height: 44px; justify-content: center; color: var(--t2); font-size: 16px; text-decoration: underline; text-underline-offset: .25em; text-decoration-color: rgb(255 255 255 / .3); }
  .cara-req { text-align: center; margin-top: 4px; font-size: 13px; }
  .cara-isla { margin-top: 26px; }
  .mac-tapa { padding: 7px 7px 0; border-radius: 22px 22px 0 0; }
  .isla-video { aspect-ratio: 780 / 1000; border-radius: 15px 15px 0 0; }
  .cara-mandos { justify-items: stretch; text-align: left; }
  .cara .preguntas { flex-direction: column; align-items: stretch; }
}

/* ------------------------------------------------------------ para quién: una frase, no tres columnas */
.para-quien { padding: clamp(72px, 9vw, 128px) 0 clamp(24px, 4vw, 48px); }
.quien-dentro { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 5vw, 80px); align-items: start; }
.quien-texto p:first-child { font-size: clamp(19px, 1.7vw, 23px); line-height: 1.5; color: var(--texto-2); letter-spacing: -.008em; }
.quien-texto strong { color: var(--texto); font-weight: 600; }
.hecho-en { margin-top: 22px; color: var(--texto-3); font-size: 15px; display: flex; align-items: center; gap: 10px; }
.hecho-en::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--ojo); flex: none; }
@media (max-width: 860px) { .quien-dentro { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ un día: las pantallas de verdad */
.dia { padding-top: clamp(48px, 7vw, 96px); }
.dia .escena-pantalla { padding: 0; border: 0; background: none; border-radius: 0; overflow: visible; position: relative; }
.reloj { font-stretch: normal; letter-spacing: -.045em; }
.reloj-dia { font-size: 17px; color: var(--texto-2); }
.escena-texto .t-3 { max-width: 18ch; }


/* ------------------------------------------------------------ lo tuyo se queda en tu Mac */
.privado-dentro { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.cara-privado-pad { padding-block: clamp(96px, 11vw, 160px); }
.privado-lista { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 14px; color: var(--c-neutro-300); max-width: 44ch; }
.privado-lista li { padding-left: 22px; position: relative; }
.privado-lista li::before { content: ''; position: absolute; left: 0; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: var(--m-marca-300); }
.privado-lista strong { color: var(--c-hueso); font-weight: 600; }
.mac-privado .mas { margin-top: 28px; }
@media (max-width: 960px) { .privado-dentro { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ cierre */
.cierre-accion { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.cierre .boton-linea { --linea-fuerte: var(--c-neutro-700); color: var(--c-hueso); }
.cierre-req { margin-top: 18px; color: var(--c-neutro-400); }

/* ------------------------------------------------------------ el iPhone: dos capturas reales de la app, planas */
.movil-cara { background: var(--c-noche); color: var(--c-hueso); padding: clamp(40px, 6vw, 96px) 0 clamp(64px, 8vw, 120px); --texto: var(--c-hueso); --texto-2: var(--c-neutro-300); --texto-3: var(--c-neutro-400); --enlace: var(--m-marca-300); }
.movil-cara-dentro { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.movil-cara .entrada { margin-top: 18px; max-width: 40ch; }
.movil-cara-fotos { display: flex; justify-content: center; gap: clamp(14px, 2vw, 28px); }
.foto-iphone { width: clamp(150px, 19vw, 270px); height: auto; border-radius: clamp(26px, 3vw, 38px); box-shadow: 0 0 0 1px rgb(255 255 255 / .12), 0 40px 70px -30px rgb(0 0 0 / .8); }
.foto-iphone-b { margin-top: clamp(28px, 4vw, 56px); }
@media (max-width: 760px) { .movil-cara-dentro { grid-template-columns: 1fr; } .foto-iphone { width: min(44vw, 200px); } }

/* lo oscuro del final va seguido: privacidad, iPhone y cierre */
.mac-privado { padding-bottom: clamp(40px, 6vw, 96px); }
.cierre { border-top: 1px solid rgb(255 255 255 / .06); }
/* el recorte de una captura que sigue: se funde abajo en vez de cortar letras */
.funde-abajo img, img.funde-abajo { -webkit-mask-image: linear-gradient(#000 82%, transparent); mask-image: linear-gradient(#000 82%, transparent); }

.movil-cara-mas { grid-column: 1 / -1; justify-self: end; margin-top: 8px; }
@media (max-width: 760px) { .movil-cara-mas { justify-self: center; } }
.cierre-icono img { margin-bottom: 36px; }
/* la línea del día de «Hoy» sigue a la derecha en el móvil: se funde en el borde en vez de cortar */
@media (max-width: 640px) { .funde-derecha img { -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); } }

.movil-cara-dentro { align-items: start; }
.mac-privado { padding-bottom: clamp(24px, 4vw, 56px); }

.cara-cuota { margin-top: 12px; color: var(--t3); }
.cara-etiqueta { display: none; }
@media (max-width: 640px) {
  .cara-cuota { text-align: center; margin-top: 6px; }
  .cara-etiqueta { display: block; font: 500 13px/1 var(--letra); color: var(--t3); text-align: center; margin-bottom: 10px; letter-spacing: .01em; }
}

/* el MacBook del hero: la tapa (960 px como mucho) y su base; las preguntas, debajo del aparato */
.cara-isla { width: min(100%, 980px); }
.mac-base { position: relative; height: 14px; margin: 0 -6%; border-radius: 0 0 18px 18px;
  background: linear-gradient(180deg, #d5d5d9 0%, #a6a6ab 45%, #6f6f74 100%); box-shadow: 0 18px 30px -12px rgb(0 0 0 / .7); }
.mac-base::before { content: ''; position: absolute; left: 50%; top: 0; width: 15%; height: 6px; transform: translateX(-50%); border-radius: 0 0 8px 8px; background: #8a8a8f; }
.mac-tapa { border-radius: 24px 24px 0 0; padding-bottom: 14px; }
.isla-video { border-radius: 14px 14px 4px 4px; }
.cara-mandos { padding-top: 22px; }
@media (max-width: 640px) { .mac-base { height: 10px; margin: 0 -4%; } .mac-tapa { padding-bottom: 8px; } }
/* el iPhone de la portada, con su marco */
.iphone-marco { display: inline-block; position: relative; padding: 9px; border-radius: 52px; background: #0b0b0c;
  box-shadow: 0 0 0 1.5px #6a6a70, 0 0 0 3px #1c1c1e, 0 0 80px -10px rgb(126 72 244 / .4), 0 40px 70px -30px rgb(0 0 0 / .85); }
.iphone-marco::after { content: ''; position: absolute; left: 50%; top: 20px; width: 31%; height: 26px; transform: translateX(-50%); border-radius: 999px; background: #000; }
.iphone-marco .foto-iphone { display: block; width: clamp(220px, 22vw, 300px); border-radius: 43px; box-shadow: none; margin: 0; }
.movil-cara-fotos { align-items: center; }
@media (max-width: 760px) { .iphone-marco .foto-iphone { width: min(64vw, 260px); } }

.cara-quien { margin-top: 10px; color: var(--t); font-size: 16px; font-weight: 500; }
.cara-isla { width: min(100%, 880px); }
@media (max-width: 640px) { .cara-quien { margin-top: 10px; } .cara-acciones .cara-enviar { justify-content: center; } }

/* una sola acción (la ámbar); «Próximamente para Mac» va en la línea de estado */
.cara-estado { margin-top: 14px; color: var(--t3); font-size: 14px; }
.cara-estado a { color: var(--t2); }
.enlace-boton { border: 0; background: none; padding: 0 0 0 6px; color: var(--enlace); font: inherit; text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
@media (max-width: 640px) { .cara-estado { text-align: center; } .enlace-boton { display: block; margin: 10px auto 0; padding: 0; } }
/* el iPhone: el texto se queda fijo mientras pasa el teléfono; el teléfono, más corto y fundido abajo */
.movil-cara-texto { position: sticky; top: 25vh; align-self: start; }
.iphone-marco { max-height: 640px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 80%, transparent); mask-image: linear-gradient(#000 80%, transparent); }
.movil-cara { padding-bottom: clamp(32px, 5vw, 72px); }
@media (max-width: 760px) { .movil-cara-texto { position: static; } }