/* ═══════════════════════════════════════════════════════════════════════════
   ANALITY · /planes/ y /planes/mi-plan/ con FOTOS (PROPUESTA, 8-oct-2026)
   ---------------------------------------------------------------------------
   Pedido de Alan: rehacer /planes/ al estilo de sonos.com/es-mx/home, «con
   imágenes, no tanto colores», y Mi plan con el MISMO diseño, como la puerta de
   entrada. Las imágenes son FOTOS DE PERSONAS.

   ⭐ ESTA HOJA SÓLO VISTE. Va DESPUÉS del <style> de cada página y no toca su
   contenido: los renglones de las fichas, los data-* del cotizador y de las
   fichas, y los bloques que arma mi-plan.js se quedan como están.

   ⭐ LAS FOTOS se sirven desde este sitio (la política de la página sólo deja
   imágenes propias: img-src 'self'), en assets/fotos/, en webp y en varios anchos
   (srcset), con su alt y su punto de enfoque (object-position) para el teléfono.
   Son de Pexels y Unsplash, de uso comercial sin atribución: ver
   PROPUESTA-PLANES-SONOS.md. ⛔ Nada de citas ni nombres junto a una foto: las
   licencias prohíben dar a entender que esas personas respaldan el producto.

   EL LENGUAJE: blanco y un crema casi blanco, tinta navy, la foto como lo más
   grande de cada bloque, botones en píldora y el naranja de la marca sólo en
   detalles (el punto del logo, lo escogido).
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    --sf-papel: #ffffff;
    --sf-crema: #f3f4f6;
    --sf-tinta: #14233f;
    --sf-gris: #5c6478;
    --sf-linea: rgba(20,35,63,.12);
    --sf-radio: 18px;
}

/* ── La foto ─────────────────────────────────────────────────────────────── */
.foto { position:relative; margin:0; overflow:hidden; border-radius:var(--sf-radio); background:#e5e7eb; }
.foto > img { display:block; width:100%; height:100%; object-fit:cover; }
/* Las fotos con TEXTO ENCIMA (hero, franja y portada de Mi plan) llevan un velo del lado del texto: el blanco nunca cae
   sobre una zona clara de la foto (medido: sin velo, el título del hero caía sobre una playera blanca). */
.sf-hero .foto::after, .mp-portada .foto::after {
    content:""; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(90deg, rgba(8,14,28,.66) 0%, rgba(8,14,28,.32) 45%, rgba(8,14,28,0) 72%);
}
.mp-portada .foto::after {
    background:linear-gradient(90deg, rgba(8,14,28,.72) 0%, rgba(8,14,28,.32) 50%, rgba(8,14,28,0) 75%),
               linear-gradient(to top, rgba(8,14,28,.55), rgba(8,14,28,0) 55%);
}

/* ── Botones en píldora ───────────────────────────────────────────────────── */
.sf-btn {
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    min-height:50px; padding:0 26px; border-radius:999px;
    font-weight:800; font-size:1rem; text-decoration:none; white-space:nowrap;
    background:var(--sf-tinta); color:#fff; border:1.5px solid var(--sf-tinta);
    transition:transform .2s ease, background .2s ease;
}
.sf-btn:hover { transform:translateY(-1px); }
.sf-btn.sf-linea { background:transparent; color:var(--sf-tinta); }
.sf-sobre .sf-btn { background:#fff; color:var(--sf-tinta); border-color:#fff; }
.sf-sobre .sf-btn.sf-linea { background:transparent; color:#fff; border-color:rgba(255,255,255,.75); }

/* ── El hero: la foto a lo ancho y el título encima ───────────────────────── */
.sf-hero { position:relative; padding:0 !important; background:#0d1626; color:#fff; overflow:hidden; }
.sf-hero::after { display:none !important; }
.sf-hero .foto { position:absolute; inset:0; border-radius:0; }
.sf-hero-txt {
    position:relative; z-index:2; min-height:min(86vh, 760px);
    display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-start;
    padding:120px 0 64px; text-align:left;
}
.sf-hero-txt::before {
    content:""; position:absolute; left:-50vw; right:-50vw; bottom:0; height:75%; z-index:-1;
    background:linear-gradient(to top, rgba(8,14,28,.82), rgba(8,14,28,0));
}
.sf-hero h1 { font-size:clamp(2.4rem, 5.6vw, 4.6rem) !important; line-height:1.04; letter-spacing:-.02em; max-width:15ch; margin:0 0 18px !important; color:#fff !important; }
.sf-hero p { color:rgba(255,255,255,.86) !important; font-size:clamp(1.02rem, 1.5vw, 1.2rem); max-width:52ch; margin:0 0 28px !important; text-align:left; }
.sf-hero .phero-pie { margin:22px 0 0 !important; font-size:.84rem; color:rgba(255,255,255,.68) !important; }
.sf-hero .phero-pie a { color:rgba(255,255,255,.86) !important; }
.sf-ctas { display:flex; flex-wrap:wrap; gap:12px; }

/* ── Las tarjetas de los planes (las de Sonos, una por producto) ──────────── */
.sf-planes { padding:88px 0 72px; background:var(--sf-papel); }
.sf-cab { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:32px; }
.sf-cab h2 { font-size:clamp(1.9rem, 3.4vw, 2.8rem); line-height:1.08; letter-spacing:-.015em; color:var(--sf-tinta); margin:0; }
.sf-cab p { color:var(--sf-gris); max-width:42ch; margin:0; }
.sf-ceja { display:block; font-size:.74rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--sf-gris); margin-bottom:10px; }
.sf-tarjetas { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:20px; }
.sf-tarjeta { display:flex; flex-direction:column; text-decoration:none; color:var(--sf-tinta); }
.sf-tarjeta .foto { aspect-ratio:4 / 5; transition:transform .5s cubic-bezier(.22,1,.36,1); }
.sf-tarjeta:hover .foto { transform:scale(1.015); }
.sf-tarjeta .sf-ceja { margin:18px 0 6px; }
.sf-tarjeta h3 { font-size:1.28rem; line-height:1.2; margin:0 0 10px; }
.sf-tarjeta .sf-mas { margin-top:auto; font-weight:800; font-size:.95rem; border-bottom:1.5px solid currentColor; align-self:flex-start; padding-bottom:2px; }

/* ── La franja: el lema sobre navy y un mosaico de gente de a pie (9-oct) ───── */
.sf-mosaico { padding:88px 0 96px; background:var(--sf-tinta); color:#fff; }
.sf-mosaico-txt h2 { color:#fff; font-size:clamp(1.8rem, 3.4vw, 2.8rem); line-height:1.1; max-width:20ch; margin:0 0 12px; }
.sf-mosaico-txt p { color:rgba(255,255,255,.85); max-width:48ch; margin:0 0 36px; }
.sf-mosaico-grid { display:grid; grid-template-columns:1.25fr 1fr 1fr; grid-template-rows:260px 260px; gap:16px; }
.sf-mosaico-grid .foto { height:100%; }
.sf-mosaico-grid .m-a { grid-row:1 / 3; }

/* ── El cotizador y las fichas, sin bandas de color ───────────────────────── */
.banda-crema { background:var(--sf-crema) !important; }
.cot-op.on { border-bottom-color:var(--sf-tinta) !important; }
.cot-op.on small { color:var(--sf-tinta) !important; }
.cot-res { background:#fff !important; border-radius:22px !important; box-shadow:0 18px 50px rgba(20,35,63,.10) !important; border:1px solid var(--sf-linea) !important; }
.cot-res-precio, .cot-res-plan b { color:var(--sf-tinta) !important; }
.cot-res .btn, .pcol-cta, .pbv-ctas .btn { border-radius:999px !important; background:var(--sf-tinta) !important; color:#fff !important; border-color:var(--sf-tinta) !important; }

.banda-free, .banda-prem, .banda-inf, .banda-comp { background:var(--sf-papel) !important; }
/* (9-oct) Aquí se pisaba, regla por regla, el crema de .banda-oscura en la ficha de Free, y se escaparon el strong y el
   logotipo: salían blancos sobre blanco. Se quitó la causa: la ficha de Free ya no lleva esa clase. */
.ficha .banda-txt h2 em, .ficha .pcol-name, .ficha .banda-precio, .ficha .banda-eyebrow { color:var(--sf-tinta) !important; }
.ficha .pcol-list li::before, .ficha .plista li::before { border-color:var(--sf-tinta) !important; }
.ficha .banda-fig .foto { width:100%; aspect-ratio:4 / 5; }
/* (9-oct) Sin JavaScript la ficha se ve en la página, con su foto, y la foto salía como una TIRA de 240 px dentro de un
   recuadro gris: el <style> de /planes/ trae `.banda-fig img { max-width:240px }` de cuando ahí iban ilustraciones, y
   `.foto > img` no pisa ese tope. Con JavaScript no se nota: la ventana de la ficha esconde la foto. Lo mide
   planes-fichas-contraste, sin JavaScript. */
.ficha .banda-fig .foto > img { max-width:none; }
.ficha-modal-fondo { background:rgba(8,14,28,.6) !important; }
.ficha-modal-caja { border-radius:24px !important; }

/* ── El color: lo que se va son las BANDAS de color. El naranja de las palabras destacadas (section h2.tg em, en
   marca.css) se queda: es el sistema de la marca en todo el sitio y es el único acento. Lo demás, en tinta. ── */
.cot-paso-n { color:var(--sf-gris) !important; }
.sf-btn .wordmark, .cot-res .btn .wordmark, .pcol-cta .wordmark { color:#fff !important; }
body.hdr-oscuro .corner-cta { background:#fff !important; color:var(--sf-tinta) !important; }

/* ═══ MI PLAN · la puerta de entrada ═════════════════════════════════════════ */
/* Cada envoltura se ve sólo con su paso: mi-plan.js sigue alternando `hidden` en los dos pasos, como hoy. */
.mp-entrada:has(> #paso-cuenta[hidden]) { display:none; }
.mp-puerta:has(#paso-plan[hidden]) { display:none; }
.mp-main > .letra-chica { width:min(560px, calc(100% - 48px)); margin-left:auto; margin-right:auto; }
.mp-entrada { display:grid; grid-template-columns:minmax(0, 1.1fr) minmax(0, .9fr); gap:40px; align-items:stretch; width:min(1180px, calc(100% - 48px)); margin:110px auto 72px; }
.mp-entrada > .foto { min-height:560px; }
.mp-entrada > .tarjeta { margin:0 !important; max-width:none !important; align-self:center; }

.mp-portada { position:relative; width:100%; margin:96px 0 0; height:min(50vh, 460px); }
.mp-portada .foto { position:absolute; inset:0; }
.mp-portada-txt { position:absolute; left:clamp(20px, 4vw, 48px); bottom:calc(56px + clamp(20px, 3vw, 36px)); z-index:2; color:#fff; width:min(620px, 80%); }
.mp-portada-txt .sf-ceja { color:rgba(255,255,255,.75); }
.mp-portada-txt h2 { font-size:clamp(1.8rem, 3.6vw, 2.8rem); line-height:1.08; margin:0; color:#fff; }

.mp-puerta { width:min(1180px, calc(100% - 48px)); margin:0 auto 88px; }
.mp-puerta #paso-plan { max-width:none !important; margin:-56px 0 0 !important; position:relative; z-index:3; border-radius:24px !important; box-shadow:0 22px 60px rgba(20,35,63,.12) !important; }
.mp-puerta .mp-bloque { border-radius:16px; }
.mp-abrir { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; margin:28px 0 0; padding:24px 26px; border-radius:18px; background:var(--sf-crema); }
.mp-abrir p { margin:0; color:var(--sf-tinta); font-weight:700; }
.mp-incluye { margin:56px 0 0; }
.mp-incluye-lista { display:none; }
#paso-plan[data-producto="free"] ~ .mp-incluye .mp-incluye-lista[data-de="free"],
#paso-plan[data-producto="premium"] ~ .mp-incluye .mp-incluye-lista[data-de="premium"],
#paso-plan[data-producto="infinite"] ~ .mp-incluye .mp-incluye-lista[data-de="infinite"] { display:block; }
.mp-incluye h2, .mp-primero h2 { font-size:clamp(1.6rem, 2.8vw, 2.2rem); color:var(--sf-tinta); margin:0 0 18px; }
.mp-incluye ul { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px 28px; }
.mp-incluye li { padding-left:26px; position:relative; color:var(--sf-tinta); }
.mp-incluye li::before { content:""; position:absolute; left:2px; top:.45em; width:12px; height:6px; border-left:2.5px solid var(--sf-tinta); border-bottom:2.5px solid var(--sf-tinta); transform:rotate(-45deg); }
.mp-primero { margin:64px 0 0; }
.mp-pasos { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:20px; }
.mp-pasos .foto { aspect-ratio:4 / 3; }
.mp-pasos h3 { font-size:1.15rem; margin:16px 0 6px; color:var(--sf-tinta); }
.mp-pasos p { margin:0; color:var(--sf-gris); }
.mp-pasos .n { font-size:.74rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--sf-gris); }

/* ── Teléfono ─────────────────────────────────────────────────────────────── */
@media (max-width:900px) {
    .sf-tarjetas { grid-template-columns:repeat(4, 78%); overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:10px; margin-right:-24px; padding-right:24px; }
    .sf-tarjeta { scroll-snap-align:start; }
    .mp-entrada { grid-template-columns:1fr; margin-top:88px; }
    .mp-entrada > .foto { min-height:0; aspect-ratio:4 / 3; }
    .mp-pasos { grid-template-columns:1fr; }
    .mp-pasos .foto { aspect-ratio:16 / 9; }
    .mp-incluye ul { grid-template-columns:1fr; }
}
@media (max-width:640px) {
    /* En el teléfono el texto del hero ocupa casi toda la foto: el velo va de abajo hacia arriba. */
    .sf-hero .foto::after { background:linear-gradient(to top, rgba(8,14,28,.86) 0%, rgba(8,14,28,.4) 60%, rgba(8,14,28,.18) 100%); }
    .sf-hero-txt { min-height:84vh; padding:96px 0 40px; }
    .sf-cab { flex-direction:column; align-items:flex-start; }
    .sf-planes { padding:64px 0 52px; }
    .sf-btn { width:100%; }
    .sf-ctas { width:100%; }
    .mp-portada { margin-top:84px; height:320px; }
    .mp-portada-txt { bottom:calc(36px + 20px); }
    .mp-puerta #paso-plan { margin-top:-36px !important; }
    .mp-abrir .sf-btn { width:100%; }
}

/* La franja en el teléfono: una tira que se desliza, como las tarjetas de los planes. */
@media (max-width:900px) {
    .sf-mosaico-grid { grid-template-columns:repeat(5, 72%); grid-template-rows:none; overflow-x:auto; scroll-snap-type:x mandatory; margin-right:-24px; padding-right:24px; padding-bottom:10px; }
    .sf-mosaico-grid .m-a { grid-row:auto; }
    .sf-mosaico-grid .foto { height:auto; aspect-ratio:4 / 5; scroll-snap-align:start; }
}