/* ════════════════════════════════════════════════════════════════════════════
   LA PORTADA (5-oct-2026) — tableros «Portada · inicio» y «Portada · Cómo empezar» del prototipo, y sus teléfonos.
   Los dos van en UNA página, uno debajo del otro (decisión del cliente, 6-oct-2026): el molde es `nueva-index.html`,
   que en producción se sirve como `index.html`.
   Las medidas son las de los tableros: 1280 de ancho en ordenador y 390 en teléfono; el corte está en 900 px.
   Sin mayúsculas forzadas. La letra del titular es Raleway 800 (como el tablero).
   ════════════════════════════════════════════════════════════════════════════ */
:root {
  --pt-tinta: #0F1012; --pt-texto: #2A2B30; --pt-gris: #5A5C66; --pt-coral: #F26B5E;
  --pt-degradado: linear-gradient(90deg, #F26B5E, #D94F40);
  --pt-sis: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', system-ui, 'Segoe UI', Roboto, sans-serif;
  --pt-ral: Raleway, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.pt, .pt * { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.pt { margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; font-family: var(--pt-sis); background: #FFFFFF; color: var(--pt-tinta); }
.pt a { color: inherit; }
.pt img { max-width: none; }
.pt a:focus-visible, .pt button:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 3px; box-shadow: 0 0 0 5px var(--pt-tinta); }
.pt-solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* La franja «Nuevo» */
.pt-anuncio { min-height: 54px; padding: 0 24px; background: var(--pt-degradado); color: #FFFFFF; display: flex; align-items: center; justify-content: center; gap: 12px; text-decoration: none; font-size: 15.5px; flex-shrink: 0; }
.pt .pt-anuncio { color: #FFFFFF; }
.pt-anuncio-chip { background: #FFFFFF; color: var(--pt-tinta); border-radius: 999px; padding: 3px 11px; font-size: 12.5px; font-weight: 700; line-height: 1.4; flex-shrink: 0; }
.pt-anuncio strong { font-weight: 700; }
.pt-anuncio svg { flex-shrink: 0; }

/* La barra */
.pt-menu { position: relative; height: 78px; flex-shrink: 0; background: var(--pt-tinta); display: flex; align-items: center; justify-content: center; gap: 34px; }
.pt-menu-logo { display: flex; margin-right: 14px; }
.pt-menu-logo img { height: 25px; width: auto; display: block; }
.pt .pt-menu-enlace { color: #FFFFFF; text-decoration: none; font-size: 15.5px; font-weight: 500; padding-bottom: 5px; }
.pt .pt-menu-enlace[aria-current="page"] { font-weight: 700; box-shadow: 0 2px 0 var(--pt-coral); }
.pt .pt-boton-menu { background: var(--pt-degradado); color: #FFFFFF; border-radius: 999px; padding: 13px 26px; font-size: 15.5px; font-weight: 700; text-decoration: none; white-space: nowrap; }
/* «Iniciar sesión» (decisión del cliente, 5-oct-2026; el tablero no lo dibuja): a la derecha de la barra, fuera del
   grupo centrado, para no mover nada de lo que el tablero sí dibuja. En el teléfono va dentro del menú. */
.pt .pt-menu-entrar { position: absolute; right: 40px; top: 50%; transform: translateY(-50%); color: #FFFFFF; text-decoration: none; font-size: 15.5px; font-weight: 500; }
.pt .pt-menu-entrar:hover { text-decoration: underline; text-underline-offset: 5px; }
.pt-menu-abre { display: none; }
.pt-menu-lista { display: none; }

/* El titular */
.pt-titular { font-family: var(--pt-ral); background: #F0EEED; overflow: hidden; flex-shrink: 0; }
.pt-titular-caja { position: relative; height: 548px; max-width: 1280px; margin: 0 auto; }
/* LA FOTO, MÁS GRANDE (decisión del cliente, 6-oct-2026: «aumenta el tamaño de la imagen de Nubia, que la distancia entre
   la foto y el margen de la barra superior negra se reduzca por lo menos a la mitad», sin perder la cifra de la primera
   pantalla). El tablero «Index» la dibuja a 338,7 × 510,1 con 38,4 de aire encima, y el archivo trae además un 11,08 %
   de su alto transparente sobre la cabeza: entre la barra y la cabeza quedaban 95 de 548 (el 17,3 % del titular).
   Ahora mide el 104,38 % del alto del titular (572 de 548) y se apoya en su borde de abajo. Lo que sobresale por arriba
   es parte de ese hueco transparente, y el titular lo recorta: la cabeza queda a 39 de la barra (el 7,2 %), menos de la
   mitad que antes. El titular no cambia de alto, así que la cifra sigue donde estaba.
   · Va en porcentaje: en una pantalla baja se encoge con el titular, sin más reglas.
   · Se sujeta por su borde DERECHO, donde lo tenía en el tablero (66,5 + 338,7 = 405,2): al crecer sigue junto al texto
     y el sitio lo gana hacia la izquierda. */
.pt-titular-foto { position: absolute; right: calc(100% - 405.2px); bottom: 0; height: 104.38%; width: auto; display: block; }
.pt-titular-texto { position: absolute; top: 0; bottom: 0; left: 411px; right: 64px; display: flex; flex-direction: column; justify-content: center; text-align: center; }
.pt-titular h1 { margin: 0 0 22px; font-family: var(--pt-ral); font-size: 60px; font-weight: 800; line-height: 1.08; letter-spacing: -.02em; color: var(--pt-tinta); }
.pt-titular h1 span { color: var(--pt-coral); }
.pt-titular p { margin: 0 auto 34px; max-width: 560px; font-size: 19px; line-height: 1.5; color: var(--pt-texto); }
.pt .pt-boton { display: flex; align-items: center; justify-content: center; gap: 10px; width: 400px; max-width: 100%; margin: 0 auto; height: 64px; background: var(--pt-degradado); color: #FFFFFF; border-radius: 999px; font-size: 19px; font-weight: 800; text-decoration: none; }

/* La cifra */
.pt-metricas { flex-grow: 1; min-height: 200px; background: #FFFFFF; display: flex; align-items: center; justify-content: center; gap: 150px; }
.pt-metrica { display: flex; align-items: stretch; gap: 22px; }
.pt-metrica > span { width: 3px; border-radius: 2px; background: var(--pt-coral); flex-shrink: 0; }
.pt-metrica > div { min-height: 92px; display: flex; flex-direction: column; justify-content: center; }
.pt-metrica b { display: block; font-family: var(--pt-sis); font-size: 54px; font-weight: 800; line-height: 1; letter-spacing: -.02em; color: var(--pt-tinta); }
.pt-metrica i { display: block; margin-top: 10px; font-style: normal; font-size: 13.5px; font-weight: 600; letter-spacing: .04em; color: var(--pt-gris); }

/* «Cómo empezar» */
.pt-seccion { flex-grow: 1; background: #FFFFFF; padding: 72px 0 76px; }
/* El enlace «Cómo empezar» baja hasta aquí y le deja el foco, para quien sigue con el teclado: sin marco alrededor. */
.pt-seccion:focus { outline: none; }
.pt-ancho { width: 1120px; max-width: calc(100% - 48px); margin: 0 auto; }
.pt-antetitulo { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 16px; font-size: 14.5px; font-weight: 700; color: var(--pt-tinta); }
.pt-antetitulo::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--pt-coral); }
.pt-seccion h2 { margin: 0; font-family: var(--pt-sis); font-size: 46px; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; color: var(--pt-tinta); text-align: center; }
.pt-pasos { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin: 40px 0 40px; }
.pt-pasos li { background: #F5F6F8; border-radius: 18px; padding: 26px 24px 28px; }
.pt-pasos b { display: block; font-family: var(--pt-sis); font-size: 40px; font-weight: 800; line-height: 1; letter-spacing: -.02em; color: var(--pt-coral); }
.pt-pasos h3 { margin: 16px 0 8px; font-family: var(--pt-sis); font-size: 20px; font-weight: 800; letter-spacing: -.01em; }
.pt-pasos p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--pt-texto); }
.pt-seccion-pie { text-align: center; }
.pt .pt-boton--corto { display: inline-flex; width: auto; height: 58px; padding: 0 34px; font-size: 17.5px; white-space: nowrap; }

/* El pie */
.pt-pie { background: var(--pt-tinta); padding: 56px 0 28px; flex-shrink: 0; }
.pt-pie-arriba { display: flex; justify-content: space-between; gap: 48px; }
.pt-pie-marca { max-width: 330px; }
.pt-pie-marca img { height: 24px; width: auto; display: block; margin-bottom: 16px; }
.pt-pie-marca p { margin: 0; font-size: 14.5px; line-height: 1.55; color: rgba(255,255,255,.74); }
.pt-pie-grupos { display: contents; }
.pt-pie h4 { margin: 0 0 12px; font-size: 13px; font-weight: 700; color: #FFFFFF; }
.pt-pie-col { display: flex; flex-direction: column; gap: 9px; }
.pt .pt-pie-col a { font-size: 14px; color: rgba(255,255,255,.74); text-decoration: none; }
.pt .pt-pie-col a:hover { color: #FFFFFF; }
.pt-pie-abajo { margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.14); font-size: 12.5px; color: rgba(255,255,255,.55); }

/* Entre el teléfono y el tablero de 1280: el titular se encoge antes de partirse. */
@media (max-width: 1180px) and (min-width: 901px) {
  .pt-titular h1 { font-size: clamp(42px, 4.7vw, 60px); }
  .pt-titular-texto { left: 400px; right: 32px; }
  /* Aquí el texto empieza en 400: la foto llega hasta 392 y, a su tamaño mayor (380 de ancho), no toca el borde de la ventana. */
  .pt-titular-foto { right: calc(100% - 392px); }
  .pt-pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* LA PRIMERA PANTALLA CABE ENTERA (decisión del cliente, 6-oct-2026: «que la métrica se vea completa dentro de la
   pantalla»). El tablero mide 880 de alto: franja 54 + barra 78 + titular 548 + cifra 200. Un portátil deja entre 620 y
   790 de alto, y con las medidas del tablero la cifra quedaba cortada bajo el borde. En una pantalla más baja que el
   tablero el titular y la cifra se reparten el alto que hay —en la proporción del tablero— y la foto y las letras se
   encogen con ellos. Con 880 o más de alto no cambia nada: valen las medidas del tablero.
   (132px = franja + barra. La foto no necesita regla aquí: mide un porcentaje del titular y se encoge con él.) */
@media (min-width: 901px) and (max-height: 879px) {
  .pt-metricas { min-height: clamp(128px, 22.73vh, 200px); }
  .pt-titular-caja { height: clamp(336px, calc(100vh - 132px - clamp(128px, 22.73vh, 200px)), 548px); }
  .pt-titular h1 { margin-bottom: clamp(12px, 2.5vh, 22px); font-size: clamp(38px, min(6.82vh, 4.7vw), 60px); }
  .pt-titular p { margin-bottom: clamp(18px, 3.86vh, 34px); font-size: clamp(16px, 2.16vh, 19px); }
  .pt .pt-titular .pt-boton { height: clamp(52px, 7.27vh, 64px); }
  .pt-metrica b { font-size: clamp(42px, 6.14vh, 54px); }
}

/* ── Teléfono (tableros «Movil-Index» y «Movil-Index-Como-empezar») ── */
@media (max-width: 900px) {
  .pt-anuncio { display: block; min-height: 0; padding: 10px 18px; font-size: 13px; line-height: 1.6; text-align: center; }
  .pt-anuncio-chip { display: inline-block; margin-right: 7px; font-size: 11.5px; }
  .pt-anuncio svg { width: 15px; height: 15px; vertical-align: -3px; margin-left: 4px; }
  .pt-menu { height: 62px; padding: 0 16px; justify-content: flex-start; gap: 12px; }
  .pt-menu-logo { margin-right: auto; }
  .pt-menu-logo img { height: 19px; }
  .pt-menu > .pt-menu-enlace, .pt-menu > .pt-menu-entrar { display: none; }
  .pt .pt-boton-menu { padding: 9px 15px; font-size: 13px; }
  .pt-menu-abre { display: grid; place-items: center; width: 36px; height: 36px; margin: 0; padding: 0; border: 0; background: none; color: #FFFFFF; cursor: pointer; }
  .pt-menu-lista { position: absolute; top: 100%; left: 0; right: 0; z-index: 20; background: var(--pt-tinta); border-top: 1px solid rgba(255,255,255,.14); padding: 8px 16px 14px; }
  .pt-menu-lista.es-abierta { display: block; }
  .pt .pt-menu-lista a { display: block; padding: 12px 0; color: #FFFFFF; text-decoration: none; font-size: 15.5px; font-weight: 500; }
  .pt .pt-menu-lista a[aria-current="page"] { font-weight: 700; }
  .pt-titular { padding: 36px 0 0; text-align: center; }
  .pt-titular-caja { height: auto; max-width: none; }
  .pt-titular-texto { position: static; display: block; padding: 0 20px; }
  .pt-titular h1 { margin: 0 0 16px; font-size: 33px; }
  .pt-titular p { margin: 0 auto 24px; max-width: none; font-size: 16px; }
  .pt .pt-boton { width: 100%; height: 56px; font-size: 17px; }
  /* La foto va debajo del botón, centrada, y se corta por abajo como en el tablero. */
  .pt-titular-foto-caja { position: relative; height: 380px; margin-top: 26px; overflow: hidden; }
  .pt-titular-foto { left: 50%; right: auto; top: 26.6px; bottom: auto; width: 234.7px; height: 353.4px; margin-left: -117.35px; }
  .pt-metricas { min-height: 0; padding: 30px 20px 32px; gap: 34px; }
  .pt-metrica { gap: 12px; }
  .pt-metrica > div { min-height: 62px; }
  .pt-metrica b { font-size: 34px; }
  .pt-metrica i { margin-top: 7px; font-size: 12px; }
  .pt-seccion { padding: 34px 20px 38px; }
  .pt-ancho { width: auto; max-width: none; }
  .pt-antetitulo { justify-content: flex-start; margin-bottom: 12px; font-size: 13px; }
  .pt-seccion h2 { font-size: 30px; text-align: left; }
  .pt-seccion h2 br { display: none; }
  .pt-pasos { display: flex; flex-direction: column; gap: 12px; margin: 24px 0 26px; }
  .pt-pasos li { padding: 20px 20px 22px; }
  .pt-pasos b { font-size: 30px; }
  .pt-pasos h3 { margin: 10px 0 8px; font-size: 18px; }
  .pt-pasos p { font-size: 14.5px; }
  .pt .pt-boton--corto { display: flex; width: 100%; height: 54px; font-size: 16.5px; }
  .pt-pie { padding: 34px 20px 26px; }
  .pt-pie-arriba { flex-direction: column; gap: 28px; }
  .pt-pie-marca { max-width: none; }
  .pt-pie-marca img { height: 21px; }
  .pt-pie-grupos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 20px; }
  .pt-pie-abajo { margin-top: 28px; padding-top: 20px; }
}
@media (min-width: 901px) { .pt-titular-foto-caja { display: contents; } }