/* ===========================================================================
   El teléfono de la portada: iPhone 17, Lavanda.

   Es el marco de la v2 (`backend/store/static/store/css/telefono.css`) con dos
   cambios:

   1. Las proporciones ya no son las del iPhone 16 sino las del plano oficial
      del iPhone 17 (Apple, Dimensional Drawings, 2025-09-09), las mismas del
      marco de las piezas de redes (`contenido-multimedia/plantillas/2-telefono`,
      ver MEDIDAS.md). Todas las cotas van en PUNTOS multiplicadas por `--u`,
      que es lo que mide un punto a este tamaño:

         producto   431,3 × 903,2 pt       pantalla 402 × 874 pt
         vidrio     a 6,0 pt del borde      radio 76,6 / 70,6 / 62 pt
         isla       125,2 × 36,6 pt, a 14,1 pt del borde de la pantalla
         grosor     7,95 mm → 48,0 pt

   2. Las capturas nuevas (1206 × 2622, 402 × 874 pt @3x) traen la zona
      segura de arriba y de abajo, así que van a pantalla completa: la barra de
      estado y el indicador de inicio se dibujan ENCIMA, en su sitio exacto.
      En la v2 la captura se corría hacia abajo porque no traía ese hueco.

   Se conserva lo que la v2 validó: el cuerpo extruido en diez capas (se lee
   como objeto, no como lámina), el canto más oscuro que la cara, la sombra de
   contacto y el ángulo de reposo en tres cuartos. `telefono.js` lo gira igual
   que antes.
   =========================================================================== */

.kf-tel {
  --w: min(272px, 72vw);
  --u: calc(var(--w) / 431.3);            /* un punto del iPhone, en px */
  --grosor: calc(var(--u) * 48);
  --giro-y: -18deg;
  --giro-x: 0deg;
  --tinta-estado: #000;
  --fondo-pantalla: #FAF8F5;

  width: var(--w);
  height: calc(var(--u) * 903.2);
  position: relative;
  flex: none;
  perspective: calc(var(--w) * 2.6);
  perspective-origin: 50% 42%;
}

/* En el visor la app es negra: la barra y el indicador van en blanco. */
.kf-tel--tinta-clara { --tinta-estado: #fff; --fondo-pantalla: #000; }

.kf-tel__cuerpo {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transform: rotateY(var(--giro-y)) rotateX(var(--giro-x));
  will-change: transform;
}

/* La extrusión: la misma silueta en diez profundidades. Aluminio lavanda, el
   canto en sombra respecto de la cara (la luz viene de adelante). */
.kf-tel__capa {
  position: absolute; inset: 0;
  border-radius: calc(var(--u) * 76.6);
  background: linear-gradient(180deg,
    #B9A5CC 0%, #8C789F 9%, #C9B7DA 22%, #7A6792 38%,
    #B09CC4 52%, #83709A 66%, #C0AED4 80%, #88749C 92%, #A895BC 100%);
  transform: translateZ(calc(var(--grosor) * ((var(--k) / 9) - 0.5)));
}
.kf-tel__capa--filo { filter: brightness(1.25) saturate(0.85); }

/* La cara: aluminio a la vista (6 pt) alrededor del vidrio. */
.kf-tel__cara {
  position: absolute; inset: 0;
  transform: translateZ(calc(var(--grosor) * 0.5));
  border-radius: calc(var(--u) * 76.6);
  background: linear-gradient(135deg, #EEE5F6 0%, #DCCDEA 22%, #D2C1E2 50%, #C9B7DA 78%, #B9A5CC 100%);
  box-shadow:
    inset 0 0 0 calc(var(--u) * 0.6) rgba(90, 64, 120, .55),
    inset 0 0 0 calc(var(--u) * 1.6) rgba(255, 255, 255, .35);
}

/* Vidrio frontal con su máscara negra (el bisel). */
.kf-tel__vidrio {
  position: absolute;
  left: calc(var(--u) * 6.0); top: calc(var(--u) * 6.05);
  width: calc(var(--u) * 419.3); height: calc(var(--u) * 891.1);
  border-radius: calc(var(--u) * 70.6);
  background: #050507;
  box-shadow: 0 0 0 calc(var(--u) * .5) rgba(40, 28, 56, .9);
}

/* Pantalla activa 402 × 874. La captura la llena entera. */
.kf-tel__pantalla {
  position: absolute;
  left: calc(var(--u) * 14.65); top: calc(var(--u) * 14.6);
  width: calc(var(--u) * 402); height: calc(var(--u) * 874);
  border-radius: calc(var(--u) * 62);
  overflow: hidden;
  isolation: isolate;
  background: var(--fondo-pantalla);
}
.kf-tel__pantalla img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  display: block;
}

/* La captura sigue al tema de la página: el que eligió la persona
   ([data-tema] en <html>) o, en Automático, el del sistema. El <img> oculto
   lleva loading="lazy" y, en display: none, el navegador no lo descarga.
   En oscuro la app es oscura: barra de estado e indicador en blanco. */
.kf-tel__pantalla .kf-tel__img--oscuro { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .kf-tel__pantalla .kf-tel__img--claro { display: none; }
  :root:not([data-tema="claro"]) .kf-tel__pantalla .kf-tel__img--oscuro { display: block; }
  :root:not([data-tema="claro"]) .kf-tel:not(.kf-tel--tinta-clara) { --tinta-estado: #fff; --fondo-pantalla: #141019; }
}
:root[data-tema="oscuro"] .kf-tel__pantalla .kf-tel__img--claro { display: none; }
:root[data-tema="oscuro"] .kf-tel__pantalla .kf-tel__img--oscuro { display: block; }
:root[data-tema="oscuro"] .kf-tel:not(.kf-tel--tinta-clara) { --tinta-estado: #fff; --fondo-pantalla: #141019; }

.kf-tel__isla {
  position: absolute; z-index: 3;
  left: calc(var(--u) * 138.4); top: calc(var(--u) * 14.1);
  width: calc(var(--u) * 125.2); height: calc(var(--u) * 36.6);
  border-radius: calc(var(--u) * 18.3);
  background: #000;
}

/* Barra de estado de iOS 26: hora centrada en la oreja izquierda, iconos en
   la derecha, todo sobre el eje de la isla (y = 32,4 pt). */
.kf-tel__estado {
  position: absolute; z-index: 2; left: 0; top: 0;
  width: 100%; height: calc(var(--u) * 54);
  color: var(--tinta-estado);
  pointer-events: none;
}
.kf-tel__hora {
  position: absolute; left: 0; width: calc(var(--u) * 138.4);
  top: calc(var(--u) * 32.4); transform: translateY(-50%);
  text-align: center;
  font-family: -apple-system, "SF Pro Text", system-ui, sans-serif;
  font-size: calc(var(--u) * 17); font-weight: 600; line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.kf-tel__iconos {
  position: absolute; left: calc(var(--u) * 263.6); width: calc(var(--u) * 138.4);
  top: calc(var(--u) * 32.4); transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  gap: calc(var(--u) * 6);
}
.kf-tel__iconos svg { display: block; overflow: visible; }
.kf-tel__senal   { width: calc(var(--u) * 17);   height: calc(var(--u) * 11); }
.kf-tel__wifi    { width: calc(var(--u) * 15.4); height: calc(var(--u) * 11); }
.kf-tel__bateria { width: calc(var(--u) * 27.4); height: calc(var(--u) * 13); }

.kf-tel__inicio {
  position: absolute; z-index: 2;
  left: calc(var(--u) * 134); bottom: calc(var(--u) * 8);
  width: calc(var(--u) * 134); height: calc(var(--u) * 5);
  border-radius: calc(var(--u) * 2.5);
  background: var(--tinta-estado);
}

/* Botones, en el plano medio del cuerpo. Cotas del plano, desde arriba. */
.kf-tel__boton {
  position: absolute;
  width: calc(var(--u) * 3.2);
  background: linear-gradient(90deg, #BCA8CF 0%, #DCCDEA 45%, #CBB9DC 100%);
  transform: translateZ(0);
}
.kf-tel__boton--izq { left: calc(var(--u) * -2.7); border-radius: calc(var(--u) * 1.6) 0 0 calc(var(--u) * 1.6); }
.kf-tel__boton--der { right: calc(var(--u) * -2.7); border-radius: 0 calc(var(--u) * 1.6) calc(var(--u) * 1.6) 0; }
.kf-tel__boton--accion  { top: calc(var(--u) * 184.9); height: calc(var(--u) * 41.7); }
.kf-tel__boton--vol-mas { top: calc(var(--u) * 257.3); height: calc(var(--u) * 67.7); }
.kf-tel__boton--vol-men { top: calc(var(--u) * 343.1); height: calc(var(--u) * 67.6); }
.kf-tel__boton--lateral { top: calc(var(--u) * 280.5); height: calc(var(--u) * 106.9); }

/* Sombra proyectada, fuera del 3D. */
.kf-tel__sombra {
  position: absolute; z-index: -1;
  left: 6%; right: 6%;
  bottom: calc(var(--w) * -0.06);
  height: calc(var(--w) * 0.13);
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--sombra-tel, rgba(24, 16, 64, .30)), rgba(24, 16, 64, 0));
}

/* ── Disposiciones (iguales a la v2) ──────────────────────────────────────── */

.kf-tel-par { position: relative; display: flex; justify-content: center; }
.kf-tel-par .kf-tel { --w: min(250px, 62vw); }

@media (min-width: 900px) {
  .kf-tel-par > .kf-tel:first-child {
    position: relative; z-index: 2;
    margin-right: calc(min(250px, 62vw) * -0.11);
  }
  .kf-tel-par > .kf-tel:last-child {
    position: relative; z-index: 1;
    margin-top: calc(min(250px, 62vw) * 0.09);
    --giro-y: 15deg;
    --w: calc(min(250px, 62vw) * 0.82);
  }
}

/* Bajo 900 px se enderezan siempre, pida o no el sistema menos movimiento:
   un teléfono inclinado con el scroll marea en una pantalla chica (ux §8). */
@media (max-width: 899.98px) {
  .kf-tel { --giro-y: 0deg !important; --giro-x: 0deg !important; }
  .kf-tel-par > .kf-tel:last-child { display: none; }
}