/* ╔═══════════════════════════════════════════════════════════════════════╗ ║ TELÉFONO DEL PORTAFOLIO · iPhone 17, sin medidas fijas 17-ago-2026 ║ ║ ║ ║ el cliente, 2ª vuelta: "no elijas unos píxeles definidos, cámbialos a ║ ║ depende cómo lo estén viendo, porque hay gente que lo ve en 1920, ║ ║ otros a 2K, otros a 4, otros en teléfono, otros con pantalla a la ║ ║ mitad". Tenía razón: la versión anterior fijaba max-width:252px y ║ ║ luego la isla en 22px, la hora en 9–12px, la cámara en 7px, los ║ ║ botones en 26/44/88px y la barra de inicio en 4px. Un aparato así ║ ║ sólo está bien proporcionado en UN ancho de pantalla: en 4K queda un ║ ║ teléfono minúsculo con una isla gigante, y a media pantalla al revés. ║ ║ ║ ║ SOLUCIÓN: el teléfono es un CONTENEDOR (container-type:inline-size) y ║ ║ cada detalle se mide en `cqw` — porcentaje del ancho DEL PROPIO ║ ║ APARATO, no de la ventana. Así el aparato puede medir 180px o 600px ║ ║ y su isla, su hora, su cámara y sus botones mantienen exactamente la ║ ║ misma proporción. Cero px fijos en la geometría. ║ ║ ║ ║ Equivalencias usadas (medidas sobre el iPhone 17 real, 393pt): ║ ║ isla 31 % ancho × 8,6 cqw · cámara 2,8 cqw ║ ║ hora 4,8 cqw · barra inicio 1,6 cqw ║ ║ marco 3,4 % de padding · radio 13,5 % / 6,3 % ║ ║ ║ ║ Y el ORDEN DE LAS ACCIONES cambia, también por pedido del cliente: ║ ║ primero verla DENTRO de la página (el teléfono ya la trae cargada), ║ ║ y sólo después, como segunda opción, abrirla completa. ║ ╚═══════════════════════════════════════════════════════════════════════╝ */ /* ── EL APARATO ─────────────────────────────────────────────────────────── */ .t06-phone{ /* el ancho lo decide la rejilla, no una constante. `container-type` habilita las unidades cqw para todo lo de dentro. */ container-type:inline-size; /* ALTO EXPLÍCITO, no aspect-ratio. El aspect-ratio perdía la pelea: dentro de la rejilla de la ficha la celda le imponía su alto y el aparato salía achatado, y ni con !important cedía. Con ancho y alto declarados a partir de la MISMA expresión fluida, la proporción del iPhone 17 (×2,161) queda garantizada sin depender de quién gane la cascada. La expresión es fluida a propósito: crece con la ventana entre un mínimo y un máximo, en rem para que respete el tamaño de letra del sistema. El techo está puesto donde el aparato completo, su nombre y sus dos acciones caben juntos en pantalla — un iPhone a proporción real es alto, así que el que cede es el ancho. */ /* el cliente: "se ve pequeño, no se ve ancho". Tenía razón: 15vw dejaba el aparato en unos 210px y ahí no se lee nada de la página que lleva dentro. Sube a un ancho de verdad — como el portafolio anterior, que a este tamaño funcionaba bien. La ficha completa sigue cabiendo porque el nombre y la acción van en una sola línea debajo. */ --ancho:clamp(15rem, 27vw, 23.5rem); width:var(--ancho); /* 18-ago: 2,161 era la proporción del APARATO entero, pero el relleno de 3,4% se mide sobre el ANCHO, así que arriba y abajo sumaba el mismo grosor que a los lados y la PANTALLA salía en 1:2,258 — más estirada que un iPhone. Medido: 222×500 cuando debía ser 222×481. Esta cifra sale de despejarlo: pantalla = 0,932·ancho de ancho, y para que sea 393:852 el alto tiene que ser 2,0206·ancho; más los dos rellenos (0,068·ancho) da 2,0886. Ahora la ventana ES la de un iPhone 17. */ height:calc(var(--ancho) * 2.0886); aspect-ratio:auto; max-width:100%; /* el radio en dos ejes para que la curva sea circular y escale sola */ border-radius:13.5% / 6.3%; /* canto de titanio: claro en los bordes, apagado al centro */ background:linear-gradient(145deg, #5b5f68 0%,#2a2d34 14%,#1b1d22 38%,#1b1d22 62%,#2a2d34 86%,#5b5f68 100%); border:0; padding:3.4%; box-shadow: 0 3.4cqw 7cqw -1.8cqw rgba(0,0,0,.72), 0 .4cqw 1.4cqw rgba(0,0,0,.5), inset 0 0 0 .16cqw rgba(255,255,255,.16), inset 0 .1cqw 0 rgba(255,255,255,.28); transition:transform .35s cubic-bezier(.2,.9,.3,1.2),box-shadow .35s ease; } .t06-screen{ border-radius:11.4% / 5.4%; background:#000; /* un iPhone no muestra barra de scroll. La ventana sí scrollea de verdad (para que el iframe cruzado de origen no se robe la rueda del ratón, ver sections.js), pero su barra se esconde. */ scrollbar-width:none; -ms-overflow-style:none; } .t06-screen::-webkit-scrollbar{ width:0; height:0; } /* ── ISLA DINÁMICA ────────────────────────────────────────────────────── Flota, no cuelga del borde: eso es lo que separa un iPhone 14 Pro o más nuevo de un iPhone X. Todo en cqw para que no se deforme al escalar. */ .t06-notch{ top:2.6%;left:50%;transform:translateX(-50%); width:31%;height:8.6cqw;min-height:0; background:#000;border-radius:99em;z-index:5; box-shadow:inset 0 0 0 .1cqw rgba(255,255,255,.06); } .t06-notch::after{ content:"";position:absolute;top:50%;right:11%;transform:translateY(-50%); width:2.8cqw;height:2.8cqw;border-radius:50%; background:radial-gradient(circle at 32% 30%,#3d4a63 0%,#111722 58%,#05070b 100%); box-shadow:inset 0 0 .2cqw rgba(255,255,255,.5); } /* ── BARRA DE ESTADO Y BARRA DE INICIO ────────────────────────────────── Van en pseudos del marco para no añadir nodos. Sin ellas el mockup se lee como un recuadro; con ellas, como un aparato. */ .t06-phone::before{ content:"9:41"; position:absolute;top:2.9%;left:12%;z-index:6; font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",Inter,sans-serif; font-size:4.8cqw;font-weight:600;letter-spacing:.02em;line-height:1; color:#fff;text-shadow:0 .1cqw .2cqw rgba(0,0,0,.6);pointer-events:none; } .t06-phone::after{ content:""; position:absolute;bottom:1.5%;left:50%;transform:translateX(-50%); width:32%;height:1.6cqw;border-radius:99em;z-index:6; background:rgba(255,255,255,.85);pointer-events:none; } /* ── BOTONES LATERALES ────────────────────────────────────────────────── Los desplazamientos de box-shadow NO aceptan porcentajes, pero SÍ aceptan cqw (son longitudes). Con % la declaración entera se descartaba. */ .t06-phone{ --bt:rgba(255,255,255,.10); --bt-luz:rgba(255,255,255,.30); } .t06-screen::before{ content:"";position:absolute;z-index:-1;pointer-events:none; left:-3.5cqw;top:20%;width:1.2cqw;height:10.3cqw; border-radius:1.2cqw 0 0 1.2cqw; background:linear-gradient(90deg,var(--bt-luz),var(--bt)); box-shadow: 0 17.5cqw 0 0 rgba(255,255,255,.13), 0 35cqw 0 0 rgba(255,255,255,.13); } /* ── PROFUNDIDAD ENTRE LOS TRES ───────────────────────────────────────── Giro suave: con la esquina bien redonda un giro fuerte se lee falso. */ @media(min-width:1080px){ .t06-item:nth-child(1) .t06-phone{transform:rotate(-1.4deg) translateY(1.4cqw) scale(.965)} .t06-item:nth-child(2) .t06-phone{transform:translateY(-1cqw) scale(1.02)} .t06-item:nth-child(3) .t06-phone{transform:rotate(1.4deg) translateY(1.4cqw) scale(.965)} .t06-item:nth-child(2) .t06-phone{ box-shadow: 0 4.4cqw 8.8cqw -2cqw rgba(0,0,0,.8), 0 .4cqw 1.4cqw rgba(0,0,0,.5), inset 0 0 0 .16cqw rgba(255,255,255,.2), inset 0 .1cqw 0 rgba(255,255,255,.34), 0 0 6.2cqw -1.8cqw rgba(109,134,255,.5); } .t06-item:hover .t06-phone{transform:rotate(0) translateY(-1.2cqw) scale(1.04)} } /* ── ETIQUETA "EN VIVO" ─────────────────────────────────────────────────── */ .t06-live-badge{ top:5%;right:-1em; padding:.4em .8em;border-radius:99em; background:rgba(9,9,14,.86); border:1px solid rgba(109,134,255,.5); color:#dfe4ff;font-size:.62rem;font-weight:700;letter-spacing:.12em; box-shadow:0 .5em 1.4em rgba(0,0,0,.5); -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px); } /* ── LAS DOS ACCIONES, EN EL ORDEN QUE PIDIÓ el dueño ────────────────────── PRIMERO verla dentro de la página (es lo que el teléfono ya está haciendo: el botón centra el aparato y le da el foco para poder deslizarla ahí mismo). SEGUNDO, y como opción secundaria, abrirla completa en otra pestaña. Antes estaba al revés: el botón grande sobre el teléfono abría otra pestaña, o sea que la acción destacada te sacaba de la página. */ .t06-phone .t06-play, .t06-phone.is-live .t06-play{ display:inline-flex; bottom:5%; z-index:4; padding:.7em 1.2em; min-height:0; background:rgba(9,9,14,.82); color:#f4efe6; border:1px solid rgba(255,255,255,.28); border-radius:99em; box-shadow:0 .6em 1.6em rgba(0,0,0,.55); -webkit-backdrop-filter:blur(10px) saturate(1.2); backdrop-filter:blur(10px) saturate(1.2); /* la tipografía del botón también escala con el aparato */ font-size:clamp(.6rem,3.6cqw,.8rem); letter-spacing:.03em; text-decoration:none;cursor:pointer; transition:background-color .25s ease,transform .16s ease,border-color .25s ease; } .t06-phone .t06-play:hover{ background:var(--azul,#2440ff);border-color:var(--azul,#2440ff); transform:translateX(-50%) translateY(-2px); } .t06-phone .t06-play:active{transform:translateX(-50%) scale(.96)} /* cuando ya lo apretaste y el teléfono está centrado, el botón se aparta: estorbaría justo sobre la página que querías mirar */ .t06-phone.is-mirando .t06-play{ opacity:0;transform:translateX(-50%) translateY(1em);pointer-events:none; transition:opacity .3s ease,transform .3s ease; } /* la segunda opción: contorno, no relleno, y debajo */ .t06-link--boton{ justify-content:center; padding:0 1.2em; border:1px solid rgba(109,134,255,.4); border-radius:99em; background:transparent; color:#b9c4ff; font-size:.76rem; transition:background-color .25s ease,border-color .25s ease,color .25s ease; } .t06-link--boton:hover{ background:rgba(36,64,255,.18); border-color:rgba(109,134,255,.75); color:#fff;text-decoration:none; } /* nombre con jerarquía propia */ .t06-tag{font-size:.8rem;line-height:1.25;color:rgba(244,239,230,.66)} .t06-tag strong{ display:block; font-family:var(--f-display,Archivo),sans-serif;font-weight:800; font-size:1.02rem;letter-spacing:-.01em;color:#f4efe6;line-height:1.2; } /* ── LA FICHA: todo centrado bajo el teléfono ──────────────────────────── el cliente: "se ve descentrado, muy separado". El nombre a la izquierda y el botón a la derecha, con el teléfono centrado en medio, dejaba tres ejes distintos en la misma tarjeta y se leía torcido. Ahora una sola columna centrada: aparato, nombre debajo, acción al final. */ .t06-item{ display:flex;flex-direction:column;align-items:center; gap:var(--s2);text-align:center; } .t06-item > .t06-phone{align-self:center} .t06-item > .t06-tag{margin:0;text-align:center} /* el envoltorio del iframe escalado (lo crea sections.js): recorta el sobrante del iframe de 393px una vez reducido */ .t06-lienzo{background:transparent} .t06-lienzo iframe{display:block;border:0;background:#0c0c12} /* ── LA REJILLA MANDA EL TAMAÑO ───────────────────────────────────────── El aparato ya no tiene ancho propio, así que lo define esta rejilla. Y el contenedor de la página está fijo en 1140px (base.css:33), lo que en 2K o 4K deja los teléfonos chiquititos en medio de un mar vacío. Aquí la sección se sale de ese límite y crece con la ventana, con techo para que en 4K no queden tres aparatos absurdos. */ @media(min-width:768px){ #t06-portafolio .t06-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); /* sections.css:1475 le clava `max-width:1080px`. Con tres aparatos anchos eso deja las columnas justo del tamaño del teléfono y se desbordan por redondeo. Se suelta para que la rejilla use el ancho que le da el contenedor de la sección. */ width:100%; max-width:none; gap:clamp(1rem, 2.4vw, 2.5rem); margin-inline:auto; } } /* ── ESTA SECCIÓN SE SALE DEL CONTENEDOR ──────────────────────────────── El `.container` de la página está fijo en 1140px (base.css:33) y con su relleno deja 1076px útiles: exactamente el ancho de tres aparatos, o sea que se desbordaban por un pelo. Esta sección es la que más ancho necesita —los tres teléfonos son su contenido entero— así que se le levanta el techo. En 2K y 4K además deja de verse como tres cositas en medio de un vacío. */ @media(min-width:768px){ /* El ensanche es para los 3 teléfonos; el contenedor nunca baja de la retícula. */ #t06-portafolio > .container{ max-width:min(max(94vw, 1140px), 116rem) } /* La cabecera vuelve al mismo borde que las otras 17 secciones (medido: hasta −332px de desalineo a 1920). */ #t06-portafolio > .container > .sec-head{ margin-inline-start:max(0px, (100% - 1076px) / 2) } } /* La cabecera de esta sección se comprime para que la ficha completa (teléfono + nombre + acción) se lea sin tener que buscarla. */ #t06-portafolio .sec-head{margin-bottom:var(--s4)} #t06-portafolio .sec-head .h-display{font-size:clamp(1.5rem,3.2vw,2.35rem)} #t06-portafolio .sec-head .sub{max-width:60ch;font-size:.92rem} #t06-portafolio .t06-nota{margin-top:var(--s4)} /* ── TELÉFONO DE VERDAD ───────────────────────────────────────────────── Ahí los tres van en carrusel horizontal (.mslide de base.css) y conviene que se vean grandes: en pequeño es donde más se nota que es un mockup. */ @media(max-width:767.9px){ /* teléfono activo CENTRADO: padding = (track − slide)/2. Con snap center el snap-point de la slide i cae justo en i*step y las flechas/dots de re-slider.js siguen exactos. Solo t06: t05/f01b/f03 no se tocan. */ .t06-grid.mslide{ padding-inline:calc(50% - min(35vw,10rem)) } .t06-grid.mslide > *{ flex:0 0 min(70vw,20rem); scroll-snap-align:center } } @media(prefers-reduced-motion:reduce){ .t06-phone,.t06-item:hover .t06-phone{transition:none} .t06-phone.is-mirando .t06-play{transition:none} } /* ── EL DEDO NO SE QUEDA ATRAPADO ──────────────────────────────────────── Ahora que la página de dentro scrollea sola (iframe a 393×852, ver sections.js), en un teléfono el dedo que cae encima de una maqueta movería la demo en vez de la página de Tu Plantilla — y el visitante siente que el scroll se trabó. Con ratón no pasa (la rueda vuelve a la página al llegar al final), así que esto es sólo para pantallas táctiles: la maqueta se mira, y se vuelve manejable cuando tocas "Ver en vivo" (que es lo que le pone .is-mirando). */ @media (hover:none){ .t06-phone:not(.is-mirando) .t06-screen iframe{ pointer-events:none; } }