/* Marcos de teléfono en CSS puro (sin imágenes de marca). Todo bajo el prefijo .tel-
   Uso: <figure class="tel tel-iphone"><div class="tel-body"><div class="tel-screen"><img ...></div></div></figure>
   Las medidas van en cqw (1% del ancho del teléfono), así el marco escala entero y nunca se corta. */

.tel-stage {
  position: relative;
  display: grid;
  place-items: center;
  padding: clamp(20px, 5vw, 56px) 16px;
  border-radius: 20px;
  background:
    radial-gradient(1.4px 1.4px at 12% 18%, #fff 60%, transparent 62%),
    radial-gradient(1px 1px at 31% 72%, #fff9 60%, transparent 62%),
    radial-gradient(1.6px 1.6px at 54% 12%, #fff 60%, transparent 62%),
    radial-gradient(1px 1px at 73% 58%, #fffb 60%, transparent 62%),
    radial-gradient(1.3px 1.3px at 88% 24%, #fff 60%, transparent 62%),
    radial-gradient(1px 1px at 22% 44%, #fff8 60%, transparent 62%),
    radial-gradient(1.2px 1.2px at 93% 82%, #fffc 60%, transparent 62%),
    radial-gradient(1px 1px at 8% 90%, #fff9 60%, transparent 62%),
    radial-gradient(120% 90% at 50% 0%, #19243a 0%, #0d1119 60%, #05070b 100%);
  overflow: hidden;
}

.tel-phones { width: 100%; display: grid; place-items: center; }

/* un teléfono a la vez (pestañas); sin JS se ve el que trae la clase .on */
.tel { display: none; }
.tel.on { display: block; }

.tel {
  --tel-max: 360px;
  width: min(100%, var(--tel-max));
  margin: 0;
  padding-inline: 1.6%;           /* aire para los botones laterales, que sobresalen del cuerpo */
  container-type: inline-size;
}

.tel-body {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  background: #090b0f;
  padding: var(--tel-pt) var(--tel-px) var(--tel-pb);
  border-radius: var(--tel-r);
  box-shadow:
    inset 0 0 0 .35cqw #2a2e37,           /* canto metálico */
    inset 0 0 0 .6cqw #0c0e13,
    0 4cqw 9cqw -2cqw rgba(0, 0, 0, .75), /* sombra suave */
    0 .8cqw 2.4cqw rgba(0, 0, 0, .5);
}

.tel-screen {
  position: relative;
  overflow: hidden;
  border-radius: var(--tel-rs);
  background: #0F1218;
  line-height: 0;
}
.tel-screen img { display: block; width: 100%; height: auto; }

/* botones laterales: tiras con huecos, izquierda y derecha */
.tel-body::before,
.tel-body::after {
  content: "";
  position: absolute;
  width: .9cqw;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.tel-body::before { left: -.6cqw; border-radius: .5cqw 0 0 .5cqw; }
.tel-body::after  { right: -.6cqw; border-radius: 0 .5cqw .5cqw 0; }

/* isla / perforación / gota: viven sobre la pantalla */
.tel-cam { position: absolute; z-index: 2; background: #000; pointer-events: none; }

/* ---------- iPhone 15: esquinas muy redondas, Dynamic Island ---------- */
.tel-iphone {
  --tel-max: 380px;
}
.tel-iphone .tel-body {
  --tel-pt: 2.7cqw; --tel-px: 2.7cqw; --tel-pb: 2.7cqw;
  --tel-r: 15.4cqw; --tel-rs: 12.7cqw;
}
.tel-iphone .tel-cam {
  top: calc(2.7cqw + 2.5cqw); left: 50%; transform: translateX(-50%);
  width: 29cqw; height: 8.4cqw; border-radius: 4.2cqw;
}
.tel-iphone .tel-body::before { /* acción + volumen */
  top: 17%; height: 21%;
  background-image: linear-gradient(#3a3f4a 0 0), linear-gradient(#3a3f4a 0 0), linear-gradient(#3a3f4a 0 0);
  background-position: 0 0, 0 40%, 0 100%;
  background-size: 100% 14%, 100% 26%, 100% 26%;
}
.tel-iphone .tel-body::after { top: 27%; height: 12%; background: #3a3f4a; }

/* ---------- Galaxy S24 Ultra: esquinas casi rectas, cámara perforada ---------- */
.tel-s24 {
  --tel-max: 372px;
}
.tel-s24 .tel-body {
  --tel-pt: 1.5cqw; --tel-px: 1.5cqw; --tel-pb: 1.5cqw;
  --tel-r: 5.6cqw; --tel-rs: 4.1cqw;
  box-shadow:
    inset 0 0 0 .5cqw #5a5f69,            /* marco de titanio */
    inset 0 0 0 .8cqw #15181e,
    0 4cqw 9cqw -2cqw rgba(0, 0, 0, .75),
    0 .8cqw 2.4cqw rgba(0, 0, 0, .5);
}
.tel-s24 .tel-cam {
  top: calc(1.5cqw + 2.2cqw); left: 50%; transform: translateX(-50%);
  width: 3.4cqw; height: 3.4cqw; border-radius: 50%;
  box-shadow: 0 0 0 .35cqw #14171c;
}
.tel-s24 .tel-body::before { display: none; }
.tel-s24 .tel-body::after { /* volumen + encendido */
  top: 20%; height: 22%;
  background-image: linear-gradient(#5a5f69 0 0), linear-gradient(#5a5f69 0 0);
  background-position: 0 0, 0 100%;
  background-size: 100% 52%, 100% 28%;
}

/* ---------- Galaxy A06: esquinas redondeadas, gota, bisel inferior más grueso ---------- */
.tel-a06 {
  --tel-max: 350px;
}
.tel-a06 .tel-body {
  --tel-pt: 4cqw; --tel-px: 3.4cqw; --tel-pb: 6.6cqw;
  --tel-r: 9.6cqw; --tel-rs: 4cqw;
  background: #0b0d11;
  box-shadow:
    inset 0 0 0 .4cqw #343841,
    inset 0 0 0 .7cqw #101318,
    0 4cqw 9cqw -2cqw rgba(0, 0, 0, .75),
    0 .8cqw 2.4cqw rgba(0, 0, 0, .5);
}
.tel-a06 .tel-cam { /* gota: más ancha arriba, redonda abajo */
  top: 4cqw; left: 50%; transform: translateX(-50%);
  width: 8.2cqw; height: 4.6cqw; border-radius: 0 0 4.2cqw 4.2cqw;
}
.tel-a06 .tel-cam::after { /* lente */
  content: ""; position: absolute; left: 50%; top: 1.1cqw; width: 1.6cqw; height: 1.6cqw;
  transform: translateX(-50%); border-radius: 50%; background: #12151b;
}
.tel-a06 .tel-body::before { display: none; }
.tel-a06 .tel-body::after { /* volumen + encendido */
  top: 22%; height: 20%;
  background-image: linear-gradient(#343841 0 0), linear-gradient(#343841 0 0);
  background-position: 0 0, 0 100%;
  background-size: 100% 50%, 100% 28%;
}

/* ---------- fragmento de la sección #app ---------- */
.tel-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }