/* Fotos Express · página de planes · base común de las maquetas */
@font-face { font-family: "Outfit"; src: url("fuentes/Outfit-Variable.ttf") format("truetype"); font-weight: 100 900; font-display: swap; }

:root {
  --papel: #f5f3ee;
  --placa: #ffffff;
  --placa-2: #ebe8e1;
  --placa-3: #e0ddd5;
  --tinta: #1b1b1d;
  --suave: #57575d;
  --acento: #7bb7d4;
  --acento-hover: #93c5de;
  --acento-claro: #dcedf5;
  --acento-tinta: #0f2430;
  --acento-hondo: #245d7a;
  --app-bg: #0d0d0e;
  --app-placa: #1f1f21;
  --app-texto: #ececee;
  --app-suave: #a4a4aa;
  --r: 10px;
  --r-chica: 8px;
  --barra: 52px;
  --hit: 44px;
  --ancho: 1120px;
  --gutter: 16px;
  color-scheme: light;
}
@media (max-width: 819px) { :root { --barra: 48px; } }
@media (min-width: 720px) { :root { --gutter: 32px; } }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--barra) + 12px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--papel); color: var(--tinta); font: 400 17px/1.5 "Outfit", system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
button, input, select { font: inherit; color: inherit; }
a { color: inherit; }
.envoltura { max-width: var(--ancho); margin-inline: auto; padding-inline: var(--gutter); }
[hidden] { display: none !important; }
.oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- letra ---------- */
.ante { font-size: clamp(17px, 1.8vw, 22px); font-weight: 600; color: var(--suave); margin: 0 0 8px; letter-spacing: -.005em; }
.titular { font-size: clamp(42px, 7.4vw, 92px); line-height: 1.02; font-weight: 680; letter-spacing: -.025em; margin: 0; text-wrap: balance; }
.seccion { font-size: clamp(32px, 5.2vw, 64px); line-height: 1.04; font-weight: 660; letter-spacing: -.02em; margin: 0; text-wrap: balance; }
.subseccion { font-size: clamp(24px, 3vw, 34px); line-height: 1.1; font-weight: 640; letter-spacing: -.012em; margin: 0; }
.entrada { font-size: clamp(18px, 1.7vw, 22px); line-height: 1.4; color: var(--suave); margin: 14px 0 0; max-width: 36em; text-wrap: pretty; }
.centro { text-align: center; }
.centro .entrada { margin-inline: auto; }
.chica { font-size: 13px; color: var(--suave); }

/* ---------- botones: toque de 44 (o 36 con ratón) y la caja dibujada por dentro ---------- */
.btn {
  --caja: 32px; --btn-bg: var(--placa-2); --btn-hover: var(--placa-3); --btn-tinta: var(--tinta);
  position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: var(--hit); min-width: 44px; padding: 0 14px; border: 0; background: transparent; color: var(--btn-tinta);
  font-size: 14px; font-weight: 600; line-height: 1; text-decoration: none; cursor: pointer; white-space: nowrap;
}
.btn::before {
  content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 50%; height: max(var(--caja), calc(100% - 12px));
  translate: 0 -50%; border-radius: var(--r-chica); background: var(--btn-bg); transition: background .15s;
}
.btn:hover::before { background: var(--btn-hover); }
.btn:focus-visible { outline: none; }
.btn:focus-visible::before { outline: 2px solid var(--acento-hondo); outline-offset: 2px; }
.btn.primario { --btn-bg: var(--acento); --btn-hover: var(--acento-hover); --btn-tinta: var(--acento-tinta); }
.btn.tinta { --btn-bg: var(--tinta); --btn-hover: #333336; --btn-tinta: #fff; }
.btn.claro { --btn-bg: var(--placa); --btn-hover: var(--placa-2); }
.btn.grande { --caja: 40px; font-size: 16px; padding: 0 20px; min-height: max(var(--hit), 44px); }
.btn.ancho { width: 100%; }
.btn[aria-disabled="true"] { opacity: .55; cursor: default; }

/* ---------- barra fija con el nombre y un solo botón ---------- */
.barra-local { position: sticky; top: 0; z-index: 20; background: rgba(245, 243, 238, .94); }
.barra-local .envoltura { height: var(--barra); display: flex; align-items: center; gap: 4px; }
.marca { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; text-decoration: none; margin-right: auto; }
.marca img { width: 34px; height: auto; }
.marca span { font-size: 17px; font-weight: 650; letter-spacing: -.01em; }
.barra-local nav { display: none; gap: 2px; margin-right: 8px; }
.barra-local nav a { --caja: 30px; --btn-bg: transparent; --btn-hover: var(--placa-2); font-weight: 500; font-size: 14px; color: var(--suave); }
@media (min-width: 820px) { .barra-local nav { display: flex; } }

/* ---------- placas ---------- */
.placa { background: var(--placa); border-radius: var(--r); }
.placa-2 { background: var(--placa-2); border-radius: var(--r); }
.ficha { display: inline-flex; align-items: center; white-space: nowrap; min-height: 26px; padding: 0 9px; border-radius: 7px; font-size: 12px; font-weight: 600; background: var(--acento-claro); color: var(--acento-tinta); }
.ficha.gris { background: var(--placa-2); color: var(--tinta); }

/* ---------- aparecer al bajar ---------- */
html.js .aparece { opacity: 0; translate: 0 28px; transition: opacity .8s cubic-bezier(.2, .7, .2, 1), translate .8s cubic-bezier(.2, .7, .2, 1); }
html.js .aparece.visto { opacity: 1; translate: 0 0; }
@media (prefers-reduced-motion: reduce) { html.js .aparece { opacity: 1; translate: 0 0; transition: none; } }

/* ---------- planes ---------- */
.pestanas { display: inline-flex; position: relative; isolation: isolate; padding: 0 4px; }
.pestanas::before { content: ""; position: absolute; z-index: -1; inset: calc((var(--hit) - 34px) / 2) 0; border-radius: 9px; background: var(--placa-2); }
.pestanas button { position: relative; isolation: isolate; min-height: var(--hit); padding: 0 14px; border: 0; background: transparent; font-size: 14px; font-weight: 600; color: var(--suave); cursor: pointer; }
.pestanas button::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 50%; height: 28px; translate: 0 -50%; border-radius: 7px; background: transparent; transition: background .15s; }
.pestanas button[aria-selected="true"] { color: var(--tinta); }
.pestanas button[aria-selected="true"]::before { background: var(--placa); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }

.planes { display: grid; gap: 12px; grid-template-columns: 1fr; margin-top: 20px; }
@media (min-width: 820px) { .planes { grid-template-columns: repeat(3, 1fr); } }
.plan { background: var(--placa); border-radius: var(--r); padding: 18px 18px 14px; display: flex; flex-direction: column; gap: 6px; }
.plan.encendido { background: var(--acento-claro); }
.plan.encendido .ficha.gris { background: var(--placa); }
.plan-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 26px; }
.plan h3 { font-size: 22px; font-weight: 650; margin: 0; letter-spacing: -.01em; }
.plan .precio { display: flex; align-items: baseline; gap: 6px; margin: 6px 0 0; }
.plan .precio b { font-size: 44px; font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.plan .precio span { font-size: 15px; color: var(--suave); }
.plan .antes { font-size: 14px; color: var(--suave); min-height: 20px; }
.plan .antes s { margin-right: 6px; }
.plan ul { list-style: none; padding: 0; margin: 8px 0 6px; display: grid; gap: 4px; }
.plan li { font-size: 15px; display: flex; gap: 8px; align-items: baseline; }
.plan li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--acento); translate: 0 -2px; }
.plan .despues { font-size: 13px; color: var(--suave); margin: 4px 0 0; }
.plan .btn { margin-top: auto; }

.prueba { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; padding: 12px 18px; margin-top: 12px; }
.prueba b { font-size: 17px; }
.prueba span { color: var(--suave); font-size: 15px; flex: 1 1 220px; }

/* tira de tres planes para el celular */
@media (max-width: 819px) { .planes.con-tira .plan:not(.sel) { display: none; } .planes.con-tira { margin-top: 10px; } }
@media (min-width: 820px) { .tira-planes { display: none !important; } }
.tira-planes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tira-planes button { position: relative; isolation: isolate; border: 0; background: transparent; padding: 10px 6px; min-height: 44px; text-align: center; cursor: pointer; display: grid; gap: 2px; }
.tira-planes button::before { content: ""; position: absolute; z-index: -1; inset: 0; border-radius: var(--r-chica); background: var(--placa); }
.tira-planes button[aria-pressed="true"]::before { background: var(--acento-claro); }
.tira-planes b { font-size: 15px; font-weight: 650; }
.tira-planes strong { font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
.tira-planes small { font-size: 12px; color: var(--suave); }

/* ---------- incluido ---------- */
.incluye { display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 820px) { .incluye { grid-template-columns: repeat(5, 1fr); } }
.incluye div { background: var(--placa); border-radius: var(--r); padding: 14px 12px 12px; display: grid; gap: 8px; align-content: start; }
.incluye svg { width: 28px; height: 28px; stroke: var(--acento-hondo); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.incluye b { font-size: 15px; font-weight: 600; line-height: 1.2; }
.incluye span { font-size: 13px; color: var(--suave); line-height: 1.3; }

/* ---------- tabla para comparar ---------- */
.comparar { margin-top: 20px; }
.comparar table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.comparar thead th { position: sticky; top: var(--barra); z-index: 5; background: var(--papel); padding: 8px 4px; vertical-align: bottom; }
.comparar thead th:first-child { width: 31%; }
.comparar thead .nombre { display: block; font-size: 15px; font-weight: 650; text-align: center; }
.comparar thead .btn { --caja: 30px; font-size: 13px; padding: 0 8px; width: 100%; min-width: 0; }
.comparar tbody th { text-align: left; font-weight: 500; font-size: 14px; padding: 8px 8px 8px 0; line-height: 1.35; color: var(--suave); }
.comparar td { text-align: center; font-size: 15px; font-weight: 600; padding: 8px 4px; line-height: 1.35; }
.comparar tbody tr:nth-child(odd) th, .comparar tbody tr:nth-child(odd) td { background: var(--placa); }
.comparar tbody tr:nth-child(odd) th { border-radius: 8px 0 0 8px; padding-left: 10px; }
.comparar tbody tr:nth-child(odd) td:last-child { border-radius: 0 8px 8px 0; }
.comparar tbody tr:not(:nth-child(odd)) th { padding-left: 10px; }
.comparar .grupo th { background: transparent !important; color: var(--tinta); font-weight: 650; font-size: 15px; padding-top: 22px; }
.comparar td small { display: block; font-size: 12px; font-weight: 400; color: var(--suave); }
@media (max-width: 519px) { .comparar thead th:first-child { width: 38%; } .comparar tbody th { font-size: 13px; padding-block: 7px; } .comparar td { font-size: 13px; padding-block: 7px; } .comparar thead .nombre { font-size: 14px; } }

/* ---------- recargas y alta ---------- */
.tres { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 820px) { .tres { grid-template-columns: repeat(3, 1fr); } }
.tres > div { background: var(--placa); border-radius: var(--r); padding: 18px; }
.tres h3 { font-size: 20px; margin: 0 0 4px; font-weight: 650; }
.tres p { margin: 4px 0; color: var(--suave); font-size: 15px; }
.tres .cifra, .cifra { font-size: 40px; margin: 2px 0 6px; font-weight: 700; letter-spacing: -.03em; line-height: 1.05; color: var(--tinta); }
.recargas { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 15px; }
.recargas td { padding: 6px 0; }
.recargas td:last-child { text-align: right; font-weight: 650; }
.recargas s { color: var(--suave); font-weight: 400; margin-right: 6px; font-size: 13px; }

/* ---------- preguntas ---------- */
.preguntas { max-width: 820px; margin: 20px auto 0; display: grid; gap: 8px; }
.preguntas details { background: var(--placa); border-radius: var(--r); }
.preguntas summary { list-style: none; cursor: pointer; min-height: 44px; padding: 10px 48px 10px 16px; font-size: 17px; line-height: 1.3; font-weight: 600; position: relative; display: flex; align-items: center; }
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after { content: ""; position: absolute; right: 18px; top: 50%; width: 10px; height: 10px; border-right: 2px solid var(--suave); border-bottom: 2px solid var(--suave); translate: 0 -70%; rotate: 45deg; transition: rotate .2s; }
.preguntas details[open] summary::after { rotate: 225deg; translate: 0 -30%; }
.preguntas details p { margin: 0; padding: 0 16px 14px; color: var(--suave); font-size: 16px; }

/* ---------- pie ---------- */
.pie { padding: 40px 0 56px; }
.pie ol { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.pie li, .pie p { font-size: 12px; color: var(--suave); line-height: 1.45; }
.pie .firma { display: flex; align-items: center; gap: 8px; margin-top: 18px; font-size: 13px; color: var(--suave); }
.pie .firma img { width: 26px; }

/* ---------- iPhone dibujado con la app adentro ---------- */
.telefono { --tel-w: 300px; width: var(--tel-w); max-width: 100%; aspect-ratio: 9 / 19.3; border-radius: calc(var(--tel-w) * .15); background: #121214; padding: calc(var(--tel-w) * .035); box-shadow: 0 30px 60px -30px rgba(40, 30, 20, .45), 0 0 0 1px #2a2a2c inset; flex: none; }
.pantalla { position: relative; height: 100%; border-radius: calc(var(--tel-w) * .118); overflow: hidden; background: var(--app-bg); color: var(--app-texto); font-size: 13px; display: flex; flex-direction: column; }
.pantalla::before { content: ""; position: absolute; z-index: 3; top: 9px; left: 50%; translate: -50% 0; width: 30%; height: 22px; border-radius: 12px; background: #000; }
.app-arriba { padding: 40px 12px 8px; display: flex; align-items: center; gap: 8px; }
.app-arriba b { font-size: 15px; font-weight: 650; }
.app-arriba small { font-size: 12px; color: var(--app-suave); margin-left: auto; }
.app-foto { position: relative; flex: 1; min-height: 0; overflow: hidden; background: #000; }
.app-foto img { width: 100%; height: 100%; object-fit: cover; }
.app-abajo { padding: 10px 12px 18px; display: grid; gap: 8px; background: var(--app-bg); }
.app-desliza { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; font-size: 12px; color: var(--app-suave); }
.app-desliza i { position: relative; height: 3px; border-radius: 2px; background: #3a3a3d; }
.app-desliza i::after { content: ""; position: absolute; top: 50%; left: var(--v, 50%); width: 14px; height: 14px; border-radius: 50%; background: #fff; translate: -50% -50%; transition: left .9s cubic-bezier(.2, .7, .2, 1); }
.app-boton { display: flex; align-items: center; justify-content: center; min-height: 34px; border-radius: 8px; background: var(--acento); color: var(--acento-tinta); font-weight: 650; font-size: 13px; }
.app-fila { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; background: var(--app-placa); font-size: 13px; }
.app-fila img { width: 36px; height: 36px; border-radius: 6px; object-fit: cover; }
.app-fila small { display: block; font-size: 12px; color: var(--app-suave); }
.app-mosaico { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; padding: 0 3px; }
.app-mosaico img { aspect-ratio: 1; object-fit: cover; width: 100%; }
.app-marca { position: absolute; inset: auto 8px 8px auto; width: 26px; height: 26px; border-radius: 50%; background: var(--acento); box-shadow: 0 0 0 2px #fff; }

/* mensaje de texto, en claro como la app de mensajes */
.sms { background: #fff; color: #111; flex: 1; padding: 44px 12px 12px; display: flex; flex-direction: column; gap: 8px; }
.sms .de { font-size: 12px; color: #6b6b70; text-align: center; }
.sms .burbuja { align-self: flex-start; max-width: 86%; background: #e9e9eb; border-radius: 16px; padding: 8px 12px; font-size: 13px; line-height: 1.35; }
.sms .burbuja b { color: var(--acento-hondo); }
.sms .codigo { font-size: 20px; font-weight: 700; letter-spacing: .12em; }

@media (prefers-reduced-motion: reduce) { .app-desliza i::after { transition: none; } }

@media (prefers-reduced-motion: reduce) { .preguntas summary::after { transition: none; } }