/* ============================================================
   lean · mobile — sistema visual
   Etiqueta de suplemento: tinta negra, papel gris, verde de bote.
   Esquinas rectas, reglas duras, Anton inclinada para los titulares.
   ============================================================ */

:root {
  --paper: #EDEFF0;
  --paper-2: #F6F9FB;
  --card: #FFFFFF;
  --ink: #0E0E0C;
  /* Los dos grises se oscurecieron a propósito. #93A0AA sobre el papel daba
     3,0:1 de contraste —por debajo del 4,5:1 que pide la WCAG para texto
     normal— y en el móvil, con sol, la letra pequeña gris no se leía. Ahora
     dan 8,3:1 y 4,9:1 sobre el papel. Lo que hay que leer para decidir una
     compra no puede estar en gris claro. */
  --ink-2: #3B4750;
  --ink-3: #5C6975;
  --rule: #D3D8DC;
  --rule-2: #A9B4BC;
  --green: #7DC623;
  --green-dark: #4E8511;
  --amber: #B77A00;
  --red: #C0301C;

  --font-display: 'Anton', 'Arial Narrow', Impact, sans-serif;
  --font-body: 'Space Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  --maxw: 1240px;
  --skew: -8deg;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img, svg { display: block; max-width: 100%; }
:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ── tipografía ─────────────────────────────────────────────── */
.display {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: lowercase;
  letter-spacing: -.01em;
  line-height: .92;
  transform: skewX(var(--skew));
  transform-origin: left bottom;
}
h1.display { font-size: clamp(3rem, 9vw, 6.5rem); }
h2.display { font-size: clamp(2rem, 5vw, 3.4rem); }
h3.display { font-size: clamp(1.4rem, 3vw, 2rem); }

.eyebrow {
  font-family: var(--font-body);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-3);
}
/* La versión grande es para el hero: ahí el antetítulo no es una etiqueta de
   sección, es la primera frase que se lee, y al tamaño normal desaparecía
   contra el negro. */
.eyebrow.lg { font-size: 1rem; letter-spacing: .28em; color: #9AA3A9; }
@media (max-width: 560px) { .eyebrow.lg { font-size: .82rem; letter-spacing: .2em; } }

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.dim { color: var(--ink-2); }
.dim3 { color: var(--ink-3); }

/* ── estructura ─────────────────────────────────────────────── */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; }
.between { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.wrapf { flex-wrap: wrap; }
.grow { flex: 1; }
.g4{gap:4px}.g6{gap:6px}.g8{gap:8px}.g10{gap:10px}.g12{gap:12px}.g16{gap:16px}.g20{gap:20px}.g24{gap:24px}.g32{gap:32px}.g40{gap:40px}

section { padding: 64px 0; }
/* El número de sección lleva el color del bote del que habla esa sección.
   --acento lo pone la propia <section>. Ojo: el fallback va en el var() y
   NO como `--acento: gris` aquí — declarar la variable en el propio elemento
   pisaría el valor heredado de la sección y todos saldrían grises. */
.sec-num {
  font-family: var(--font-display);
  font-size: .95rem;
  transform: skewX(var(--skew));
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.4em; padding: 5px 11px;
  background: var(--acento, var(--ink-3));
  border-radius: 10px;
  box-shadow: 0 2px 0 rgba(14,14,12,.20);
  /* Tinta casi negra teñida con una pizca del propio acento: se lee bien
     sobre el verde, el naranja y el dorado, y no parece pegada. */
  color: color-mix(in srgb, var(--acento, #999) 14%, #0E0E0C);
}

/* ── botones ────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-weight: 700; font-size: .95rem; letter-spacing: -.01em;
  padding: 15px 26px; border: 2px solid var(--ink); background: var(--ink); color: var(--paper);
  border-radius: 12px;
  transition: background .14s, color .14s, border-color .14s;
  text-align: center;
}
.btn:hover { background: var(--green); border-color: var(--green); color: var(--ink); }
.btn:disabled { opacity: .35; cursor: not-allowed; background: var(--ink); border-color: var(--ink); }
.btn.ghost { background: transparent; color: var(--ink); }
.btn.ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn.light { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn.light:hover { background: var(--green); border-color: var(--green); }
.btn.danger { background: transparent; color: var(--red); border-color: var(--red); }
.btn.danger:hover { background: var(--red); color: #fff; }
.btn.sm { padding: 9px 16px; font-size: .84rem; border-width: 1.5px; border-radius: 9px; }
.btn.lg { padding: 18px 32px; font-size: 1.05rem; border-radius: 14px; }
.btn.block { width: 100%; }
.btn.pay { background: var(--green); border-color: var(--green); color: var(--ink); text-transform: lowercase; font-size: 1.05rem; padding: 19px 28px; }
.btn.pay:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* ── superficies ────────────────────────────────────────────── */
.card { background: var(--card); border: 2px solid var(--ink); border-radius: 16px; }
.card.soft { border-width: 1px; border-color: var(--rule); border-radius: 14px; }
.dark { background: var(--ink); color: var(--paper); }
.pad { padding: 26px; }
.pad-s { padding: 18px; }
.pad-l { padding: 34px; }

.tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: .66rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 5px 10px; border: 1px solid var(--rule-2); color: var(--ink-2);
  border-radius: 999px;
  white-space: nowrap;
  max-width: 100%;
}
/* En una pantalla estrecha, una etiqueta larga —«canal profesional · fibra
   simétrica»— se salía por la derecha y arrastraba la página entera. Las
   cortas no llegan a partirse, así que aquí no se pierde nada. */
@media (max-width: 560px) { .tag { white-space: normal; } }
.stack > .tag, .stack > a.tag { align-self: flex-start; }
/* Etiqueta con el color de un bote. El color entra por --acento desde el
   HTML, que a su vez sale del catálogo: cambia el naranja del bote de 150 y
   cambia esta etiqueta sola. */
.tag.lleno {
  background: var(--acento, var(--ink));
  border-color: var(--acento, var(--ink));
  color: color-mix(in srgb, var(--acento, #999) 14%, #0E0E0C);
}
.tag.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.tag.green { background: var(--green); border-color: var(--green); color: var(--ink); }
/* La chapa del bote recomendado. Es la única etiqueta de la página que tiene
   que ganarle la mirada al propio bote, así que sube de tamaño, se pone en
   negro sobre verde y se levanta un poco del estante. */
.tag.chapa {
  font-size: .78rem; font-weight: 700; letter-spacing: .12em;
  padding: 8px 16px; border-width: 2px; border-color: var(--ink);
  box-shadow: 0 3px 0 var(--ink);
  transform: rotate(-1.5deg);
}
@media (prefers-reduced-motion: reduce) { .tag.chapa { transform: none; } }
.tag.warn { background: #F7EBD6; border-color: var(--amber); color: var(--amber); }
.tag.stop { background: #F9E3E0; border-color: var(--red); color: var(--red); }

.note { border-left: 4px solid var(--ink); background: var(--paper-2); padding: 14px 18px; font-size: .92rem; color: var(--ink-2); }
.note.green { border-left-color: var(--green); }
.note.warn { border-left-color: var(--amber); background: #F7EBD6; }
.note.stop { border-left-color: var(--red); background: #F9E3E0; }
.note b { color: var(--ink); }

/* ── etiqueta nutricional ───────────────────────────────────── */
.label-panel { background: var(--card); border: 3px solid var(--ink); padding: 22px 24px;
  border-radius: 16px;
}
.label-panel h4 {
  font-family: var(--font-display); font-size: 1.35rem; text-transform: uppercase;
  letter-spacing: .01em; transform: skewX(var(--skew)); transform-origin: left bottom;
  padding-bottom: 8px;
}
.label-rule { height: 9px; background: var(--ink); margin-bottom: 4px; }
.label-rule.thin { height: 3px; }
.label-row { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--ink); font-size: .95rem; align-items: baseline; }
.label-row:last-of-type { border-bottom: 0; }
.label-row.strong { font-weight: 700; }
.label-row.indent { padding-left: 20px; font-size: .89rem; }
.label-row .v { font-weight: 700; text-align: right; white-space: nowrap; }
@media (max-width: 620px) {
  /* Un correo o una dirección largos no caben al lado de su etiqueta:
     con `nowrap` se salían de la tarjeta. Aquí la fila se parte en dos
     líneas y el valor se alinea a la izquierda, debajo. */
  .label-row { flex-wrap: wrap; gap: 2px; }
  .label-row .v { white-space: normal; text-align: left; overflow-wrap: anywhere; }
}
.label-foot { font-size: .72rem; color: var(--ink-2); line-height: 1.45; padding-top: 10px; }

/* ── formularios ────────────────────────────────────────────── */
label.f { display: flex; flex-direction: column; gap: 7px; }
label.f > span {
  font-size: .66rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-2);
}
input, select, textarea {
  font-family: var(--font-body); font-size: .98rem; color: var(--ink);
  background: var(--card); border: 2px solid var(--ink); border-radius: 11px;
  padding: 13px 14px; width: 100%;
}
input:focus, select:focus, textarea:focus { outline: none; box-shadow: inset 0 0 0 2px var(--green); }
input::placeholder { color: var(--ink-3); }
input[aria-invalid='true'], select[aria-invalid='true'] { border-color: var(--red); }
.err { color: var(--red); font-size: .8rem; font-weight: 600; }
.fgrid { display: grid; gap: 16px; }
@media (min-width: 640px) { .fgrid.two { grid-template-columns: 1fr 1fr; } }

.check {
  display: flex; gap: 12px; align-items: flex-start; cursor: pointer;
  padding: 15px 17px; border: 2px solid var(--rule); background: var(--card);
}
.check:hover { border-color: var(--rule-2); }
.check.on { border-color: var(--ink); }
.check input { width: auto; margin: 3px 0 0; flex: none; accent-color: var(--green); border: 0; padding: 0; }
.check .t { font-size: .93rem; line-height: 1.45; }

/* ── tablas ─────────────────────────────────────────────────── */
table { border-collapse: collapse; width: 100%; font-size: .92rem; }
th {
  font-size: .64rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-2); text-align: left; padding: 11px 12px; border-bottom: 2px solid var(--ink); white-space: nowrap;
}
td { padding: 12px; border-bottom: 1px solid var(--rule); vertical-align: top; font-variant-numeric: tabular-nums; }
tbody tr:last-child td { border-bottom: 0; }
.tablewrap { overflow-x: auto; border: 2px solid var(--ink); background: var(--card); }

/* ── medidor ────────────────────────────────────────────────── */
.meter { height: 14px; background: var(--rule); border: 2px solid var(--ink); }
.meter i { display: block; height: 100%; background: var(--green); }
.meter i.hot { background: var(--red); }

/* ── código de barras ───────────────────────────────────────── */
.barcode { display: flex; align-items: flex-end; gap: 1px; height: 34px; min-width: 0; overflow: hidden; }
.barcode i { display: block; background: var(--ink); width: 1px; height: 100%; }

/* ── utilidades ─────────────────────────────────────────────── */
.hr { height: 1px; background: var(--rule); border: 0; }
.hr.thick { height: 3px; background: var(--ink); }
.spin {
  width: 15px; height: 15px; border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%; animation: sp .7s linear infinite; display: inline-block;
}
@keyframes sp { to { transform: rotate(360deg); } }
.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ============================================================
   El bote
   ────────────────────────────────────────────────────────────
   Es un cilindro dibujado con CSS, y un cilindro se lee por la
   LUZ, no por el contorno: una banda clara descentrada hacia la
   izquierda —de donde viene la luz— y los dos bordes cayendo a
   oscuro. Los radios son elípticos (26px / 40px) porque el
   hombro de un bote real es más alto que ancho; con un radio
   redondo queda cara de caja.
   ============================================================ */
.bote {
  --tub: #F3712F;
  --tub-ink: #0E0E0C;
  width: 100%; max-width: 292px;
  font-family: var(--font-body);
}

/* La sombra va aquí y no en .body: drop-shadow sigue la silueta
   recortada —tapón incluido— en vez de dibujar un rectángulo. */
.bote .jar {
  filter: drop-shadow(0 14px 18px rgba(14,14,12,.28)) drop-shadow(0 2px 3px rgba(14,14,12,.20));
}

/* ── el tapón ───────────────────────────────────────────────── */
.bote .cap {
  position: relative;
  height: 38px; width: 76%; margin: 0 auto;
  background:
    linear-gradient(90deg,
      rgba(0,0,0,.55) 0%, rgba(0,0,0,.28) 6%,
      rgba(255,255,255,.16) 17%, rgba(255,255,255,.06) 30%,
      rgba(0,0,0,.06) 55%, rgba(0,0,0,.30) 82%, rgba(0,0,0,.60) 100%),
    repeating-linear-gradient(90deg, #17171a 0 2px, #3a3a3e 2px 4px);
  border-radius: 9px 9px 3px 3px / 12px 12px 3px 3px;
  box-shadow:
    inset 0 -7px 9px -7px rgba(0,0,0,.9),
    inset 0 1px 0 rgba(255,255,255,.16);
}
/* El canto superior del tapón: lo que hace que se vea DE PIE. */
.bote .cap i {
  position: absolute; inset: 2px 3px auto; height: 7px;
  background: linear-gradient(180deg, #4a4a4f, #232327);
  border-radius: 6px / 4px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28);
}

.bote .neck {
  height: 13px; width: 84%; margin: -2px auto 0;
  background: linear-gradient(90deg,
    rgba(0,0,0,.55) 0%, rgba(0,0,0,.25) 7%,
    rgba(255,255,255,.14) 19%, rgba(255,255,255,.03) 34%,
    rgba(0,0,0,.10) 60%, rgba(0,0,0,.34) 84%, rgba(0,0,0,.62) 100%),
    linear-gradient(180deg, #2e2e33, #131316);
  border-radius: 4px 4px 6px 6px / 5px 5px 9px 9px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.20), 0 2px 3px -1px rgba(0,0,0,.5);
}

/* ── el cuerpo ──────────────────────────────────────────────── */
.bote .body {
  position: relative;
  background-color: var(--tub);
  background-image: linear-gradient(90deg,
    rgba(0,0,0,.55) 0%,
    rgba(0,0,0,.30) 3%,
    rgba(0,0,0,.04) 9%,
    rgba(255,255,255,.38) 19%,
    rgba(255,255,255,.44) 23%,
    rgba(255,255,255,.10) 32%,
    rgba(0,0,0,0)      44%,
    rgba(0,0,0,.06)    56%,
    rgba(0,0,0,.16)    70%,
    rgba(0,0,0,.32)    84%,
    rgba(0,0,0,.48)    94%,
    rgba(0,0,0,.62)   100%);
  border-radius: 30px 30px 20px 20px / 52px 52px 30px 30px;
  padding: 16% 0 18%;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.22),
    inset 0 10px 16px -10px rgba(255,255,255,.30),
    inset 0 -14px 18px -12px rgba(0,0,0,.45);
  overflow: hidden;
}

/* El brillo del hombro. Sin él, el plástico parece cartulina. */
.bote .sheen {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(90% 40% at 30% -4%, rgba(255,255,255,.42), rgba(255,255,255,0) 68%),
    radial-gradient(120% 30% at 50% 104%, rgba(0,0,0,.38), rgba(0,0,0,0) 70%);
}

/* ── la etiqueta ────────────────────────────────────────────── */
/* Se estrecha un poco respecto al cuerpo para que el color del
   bote asome por los lados: es lo que la hace parecer PEGADA a
   un cilindro y no pintada encima de un rectángulo. */
.bote .label {
  position: relative; z-index: 1;
  margin: 0 6.5%;
  background: linear-gradient(90deg, #B9BEC2 0%, #EDEFF1 9%, #FDFDFD 34%, #F6F7F8 52%, #E4E7E9 74%, #B4BABE 100%);
  color: var(--ink);
  padding: 16px 16px 12px;
  border-radius: 3px / 7px;
  box-shadow:
    0 1px 0 rgba(0,0,0,.22), 0 -1px 0 rgba(0,0,0,.22),
    0 6px 10px -8px rgba(0,0,0,.5);
}
.bote .label .brandline { display: flex; align-items: baseline; gap: 5px; }
/* El nombre del pack, arriba a la derecha de la etiqueta.
   Va con recuadro y no suelto porque en un bote de suplementos ese hueco es
   siempre un sello —sabor, lote, formato—, y sin caja se lee como parte del
   logotipo. `margin-left:auto` lo empuja al borde sin tocar la marca. */
.bote .label .mote {
  margin-left: auto; align-self: flex-start;
  font-family: var(--font-mono); font-weight: 700;
  letter-spacing: .08em; line-height: 1.1;
  border: 1.5px solid var(--ink); border-radius: 3px;
  padding: 3px 5px; color: var(--ink);
  max-width: 42%; text-align: center; word-break: break-word;
  font-size: .58rem;
}
.bote .label .wm { font-family: var(--font-display); transform: skewX(var(--skew)); font-size: 1.5rem; line-height: .9; }
.bote .label .wm-sub { font-size: .5rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: #5A6268; }
.bote .label .gb { display: flex; align-items: baseline; gap: 3px; margin-top: 10px; }
.bote .label .gb b { font-family: var(--font-display); font-size: 3.1rem; line-height: .8; transform: skewX(var(--skew)); display: inline-block; }
.bote .label .gb span { font-family: var(--font-display); font-size: 1.15rem; transform: skewX(var(--skew)); display: inline-block; }
.bote .label .acc {
  font-family: var(--font-display); font-size: 1.05rem; line-height: 1;
  color: var(--tub); transform: skewX(var(--skew)); display: block; width: fit-content; margin-top: 3px;
  filter: saturate(1.15) brightness(.9);
}
.bote .label .price { font-family: var(--font-display); font-size: 1.6rem; transform: skewX(var(--skew)); display: block; width: fit-content; margin-top: 10px; }
.bote .label .price small { font-family: var(--font-body); font-size: .62rem; font-weight: 700; letter-spacing: .04em; }
.bote .label .specs { margin-top: 10px; border-top: 1.5px solid var(--ink); padding-top: 7px; }
.bote .label .specrow {
  display: flex; justify-content: space-between; gap: 8px;
  font-size: .52rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 2px 0;
}
.bote .label .lote {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; margin-top: 9px;
}
.bote .label .lote .barcode { flex: 1 1 auto; }
.bote .label .lote span { flex: 0 0 auto; }
.bote .label .lote span {
  font-family: var(--font-mono); font-size: .58rem; font-weight: 700;
  color: var(--tub); filter: saturate(1.2) brightness(.85);
  white-space: nowrap;  /* «lote L-2609» partido en dos líneas canta muchísimo */
}

/* ── la sombra en la balda ──────────────────────────────────── */
/* Apoya el bote en algo. Va por debajo y desbordando por los
   lados, como una sombra de contacto de verdad. */
.bote .cast {
  height: 22px; width: 92%; margin: -7px auto 0;
  background: radial-gradient(50% 50% at 50% 50%, rgba(14,14,12,.34) 0%, rgba(14,14,12,.16) 45%, rgba(14,14,12,0) 72%);
}

/* ── el bote pequeño ────────────────────────────────────────── */
/* ── el bote pequeño ────────────────────────────────────────── */
/* Todo en `cqw` —porcentaje del ancho del propio bote— y no en píxeles.
   Con píxeles fijos, estrechar el bote no lo hacía más bajo: la etiqueta
   mantenía su altura y tres botes de anchos distintos salían casi iguales de
   alto, que es justo lo que mataba la idea del estante por tamaños. */
.bote.sm { max-width: 168px; container: bote / inline-size; }
.bote.sm .jar { filter: drop-shadow(0 9px 12px rgba(14,14,12,.26)) drop-shadow(0 1px 2px rgba(14,14,12,.18)); }
.bote.sm .cap { height: 12.5cqw; border-radius: 3.5cqw 3.5cqw 1.2cqw 1.2cqw / 4.8cqw 4.8cqw 1.2cqw 1.2cqw; }
.bote.sm .cap i { height: 2.6cqw; inset: 1.4cqw 1.8cqw auto; border-radius: 3cqw / 2cqw; }
.bote.sm .neck { height: 4.6cqw; }
.bote.sm .body { border-radius: 10cqw 10cqw 6.5cqw 6.5cqw / 17.5cqw 17.5cqw 10cqw 10cqw; }
.bote.sm .label              { padding: 6cqw 6cqw 5cqw; border-radius: 1.8cqw / 4cqw; }
.bote.sm .label .wm          { font-size: 9.5cqw; }
.bote.sm .label .wm-sub      { font-size: 3.6cqw; letter-spacing: .14em; }
.bote.sm .label .mote        { font-size: 3.2cqw; padding: 1.6cqw 2cqw; border-width: .5cqw; border-radius: 1cqw; }
.bote.sm .label .gb          { margin-top: 4cqw; gap: 1.4cqw; }
.bote.sm .label .gb b        { font-size: 16.2cqw; }
.bote.sm .label .gb span     { font-size: 6.7cqw; }
.bote.sm .label .acc         { font-size: 5.9cqw; margin-top: 1cqw; }
.bote.sm .label .specs       { display: none; }
.bote.sm .label .price       { font-size: 8.6cqw; margin-top: 3cqw; }
.bote.sm .label .price small { font-size: 3.4cqw; }
.bote.sm .label .lote        { flex-direction: column; align-items: flex-start; gap: 1cqw; margin-top: 3.4cqw; }
.bote.sm .label .lote span   { font-size: 3.4cqw; }
.bote.sm .barcode            { height: 9cqw; }
.bote.sm .cast               { height: 8cqw; margin-top: -2cqw; }

/* Consulta de contenedor: cuando el bote baja de 145 px, la letra pequeña
   de la etiqueta ya no es letra, es una mancha. Se cae sola, igual que en un
   envase real el bote pequeño lleva menos impreso. El código de barras se
   queda: a ese tamaño funciona como textura, no como dato. */
@container bote (max-width: 145px) {
  .label .lote span   { display: none; }
  .label .price small { display: none; }
  .label .lote        { margin-top: 2.5cqw; }
}

/* ── rejilla de botes ───────────────────────────────────────── */
.shelf { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); align-items: end; }
.shelf-item { display: flex; flex-direction: column; align-items: center; gap: 18px; }

@media (max-width: 860px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) !important; }
}

/* ============================================================
   Documentos legales
   ============================================================ */
.legal-doc { max-width: 74ch; }
.legal-doc h2 {
  font-family: var(--font-display); font-size: 1.5rem; text-transform: lowercase;
  transform: skewX(var(--skew)); transform-origin: left bottom;
  margin: 44px 0 6px; padding-bottom: 8px; border-bottom: 3px solid var(--ink);
}
.legal-doc h2:first-of-type { margin-top: 0; }
.legal-doc p { margin: 0 0 14px; font-size: .95rem; line-height: 1.65; color: var(--ink-2); }
.legal-doc p.li { padding-left: 18px; margin-bottom: 8px; }
.legal-doc .bloque {
  font-size: .66rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-3); margin-top: 56px; padding-bottom: 10px; border-bottom: 1px solid var(--rule);
}
.legal-doc .bloque:first-child { margin-top: 0; }
.legal-toc { position: sticky; top: 92px; align-self: start; }
.legal-toc a {
  display: block; padding: 5px 0; font-size: .85rem; color: var(--ink-2);
  border-left: 2px solid var(--rule); padding-left: 12px;
}
.legal-toc a:hover { color: var(--ink); border-left-color: var(--ink); }
.legal-layout { display: grid; gap: 40px; }
@media (min-width: 1040px) { .legal-layout { grid-template-columns: 230px minmax(0, 1fr); gap: 0 48px; } }
@media (max-width: 1039px) { .legal-toc { display: none; } }
.doc-card {
  display: flex; flex-direction: column; gap: 12px; padding: 24px;
  background: var(--card); border: 2px solid var(--ink); transition: background .14s;
}
.doc-card:hover { background: var(--paper-2); }
.doc-card .n { font-family: var(--font-display); font-size: 2.4rem; transform: skewX(var(--skew)); display: block; width: fit-content; line-height: .9; }
.legal-doc td:first-child { white-space: nowrap; }

/* ============================================================
   Formularios
   ────────────────────────────────────────────────────────────
   Sin bordes finitos ni gris claro: el mismo trazo de 2px que
   las tarjetas. Un campo tiene que parecer un sitio donde se
   escribe, no una decoración.
   ============================================================ */
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo label {
  font-size: .72rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-2);
}
.campo input, .campo select, .campo textarea {
  font: inherit; font-size: 1rem; color: var(--ink);
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 11px;
  padding: 11px 12px;
  width: 100%;
  transition: box-shadow .12s ease, border-color .12s ease;
}
.campo select { appearance: none; padding-right: 34px;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%),
                    linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
}
.campo input::placeholder { color: #9AA3A9; }
.campo input:focus-visible, .campo select:focus-visible, .campo textarea:focus-visible {
  outline: 0; box-shadow: 0 0 0 3px var(--green);
}
.campo small { font-size: .78rem; color: var(--ink-3); }
.campo small.err, .err { color: var(--red); font-weight: 700; }
.campo.mal input, .campo.mal select { border-color: var(--red); }

/* Dos columnas que se apilan solas en el móvil. */
.dos { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
.dos.estrecho { grid-template-columns: 140px 1fr; }
@media (max-width: 620px) {
  .dos, .dos.estrecho { grid-template-columns: 1fr; }
}

/* El consentimiento. Ni premarcado ni escondido: se lee y se marca. */
.acepto {
  display: flex; gap: 11px; align-items: flex-start;
  font-size: .9rem; line-height: 1.45; color: var(--ink-2);
  border: 2px solid var(--rule); border-radius: 12px; padding: 13px 14px; cursor: pointer;
}
.acepto.mal { border-color: var(--red); }
.acepto input { width: 19px; height: 19px; margin-top: 2px; flex: none; accent-color: var(--ink); cursor: pointer; }

/* Bloqueada mientras no se haya abierto el contrato. No se esconde: se ve
   apagada, para que se entienda que hay algo que hacer antes y no que la
   página está rota. */
.acepto.bloqueada { opacity: .5; cursor: not-allowed; border-style: dashed; }
.acepto.bloqueada input { cursor: not-allowed; }
.candado {
  margin: 0; font-size: .86rem; line-height: 1.45; color: var(--ink-2);
  border-left: 5px solid var(--amber); background: var(--paper-2);
  padding: 11px 14px; border-radius: 0 12px 12px 0;
}

/* Trampa de robots: fuera de pantalla, no display:none — algunos robots
   saltan lo que está oculto y así caen igual. Va con aria-hidden y
   tabindex="-1" para que un lector de pantalla no lo anuncie nunca. */
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ── Avisos ─────────────────────────────────────────────────── */
.aviso { border-left: 5px solid var(--ink); background: var(--paper-2); padding: 14px 16px; font-size: .95rem; border-radius: 0 12px 12px 0; }
.aviso.ok { border-left-color: var(--green); background: #F1F8E6; }
.aviso.mal { border-left-color: var(--red); background: #F9E3E0; }
.aviso ul { margin: 6px 0 0; padding-left: 20px; }

/* ── Rejilla de planes profesionales ────────────────────────── */
.rejilla-pro { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); }


/* ============================================================
   «0 g de grasa» y el estante por tamaños
   ────────────────────────────────────────────────────────────
   Los dos viven en la columna de texto de «lo que lleva
   dentro», que antes se quedaba vacía al lado de la etiqueta.
   ============================================================ */
.cero-grasa {
  display: flex; align-items: center; gap: 18px;
  margin-top: 6px; padding: 18px 22px;
  background: var(--card);
  border: 2px solid var(--acento, var(--ink));
  border-radius: 18px;
  box-shadow: 0 3px 0 color-mix(in srgb, var(--acento, #000) 30%, transparent);
}
.cero-grasa .cifra {
  display: flex; align-items: baseline; gap: 2px;
  color: var(--acento, var(--ink));
  transform: skewX(var(--skew));
  flex: none;
}
.cero-grasa .cifra b { font-family: var(--font-display); font-size: 3.6rem; line-height: .78; }
.cero-grasa .cifra span { font-family: var(--font-display); font-size: 1.5rem; }
.cero-grasa .que { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cero-grasa .que b {
  font-family: var(--font-display); font-size: 1.45rem; line-height: 1;
  transform: skewX(var(--skew)); transform-origin: left; display: block; width: fit-content;
}
.cero-grasa .que span { font-size: .82rem; color: var(--ink-2); line-height: 1.35; }

@media (max-width: 420px) {
  .cero-grasa { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* ── El estante ─────────────────────────────────────────────── */
.estante-tallas {
  display: flex; align-items: flex-end; justify-content: flex-start;
  gap: clamp(14px, 3vw, 26px);
  margin-top: 14px; padding: 24px 16px 10px;
  background: linear-gradient(180deg, rgba(14,14,12,0) 60%, rgba(14,14,12,.045) 100%);
  border-bottom: 3px solid var(--rule-2);
  border-radius: 16px 16px 0 0;
}
.estante-tallas .talla {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-decoration: none; color: inherit;
  transition: transform .16s ease;
  /* Los tres botes llevan un ancho fijo en píxeles porque el estante existe
     para comparar tamaños. En una pantalla estrecha esa suma no cabe, y con
     `justify-content:center` el primer bote se salía por la izquierda y ya no
     había forma de verlo. Dejándolos encoger, la comparación se mantiene
     —siguen siendo proporcionales entre sí— y el estante cabe. */
  flex: 0 1 auto; min-width: 0;
}
.estante-tallas .talla:hover { transform: translateY(-5px); }
.estante-tallas .talla:focus-visible { outline: 3px solid var(--green); outline-offset: 6px; border-radius: 14px; }

@media (max-width: 520px) {
  .estante-tallas { justify-content: flex-start; gap: 10px; padding: 20px 8px 14px; }
}

/* ============================================================
   Cabecera y menú
   ────────────────────────────────────────────────────────────
   El menú del móvil funciona con una casilla oculta y el
   selector hermano `~`. Sin JavaScript: si el script no carga
   o falla, el menú sigue abriendo. El script sólo añade lo que
   el CSS no puede — aria-expanded, cerrar con Escape y cerrar
   al pulsar un enlace.
   ============================================================ */
.cabecera {
  position: sticky; top: 0; z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.cabecera-fila { padding-top: 12px; padding-bottom: 12px; }
.cabecera .marca { flex: none; }

/* La casilla no se ve, pero SÍ está en el orden de foco del teclado a
   través de su etiqueta. No se usa display:none porque eso la sacaría. */
.menu-check { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }

.menu-nav {
  display: flex; align-items: center; gap: 26px;
  font-size: .78rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
}
.menu-nav a { color: var(--ink-2); }
.menu-nav a:hover { color: var(--ink); }
.menu-nav a.btn { color: var(--paper); letter-spacing: -.01em; text-transform: lowercase; }
.menu-nav a.btn:hover { color: var(--ink); }
/* El de «mi cuenta» va sin relleno, así que su texto es tinta y no papel.
   Sin esta línea salía en blanco sobre blanco: un botón vacío en el menú. */
.menu-nav a.btn.ghost { color: var(--ink); }
.menu-nav a.btn.ghost:hover { color: var(--paper); }

.hamburguesa { display: none; }
.menu-fondo { display: none; }

/* ── En el móvil ────────────────────────────────────────────── */
@media (max-width: 940px) {
  .hamburguesa {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 9px 14px; cursor: pointer;
    border: 2px solid var(--ink); border-radius: 11px;
    background: var(--card);
    -webkit-tap-highlight-color: transparent;
  }
  .hamburguesa em {
    font-style: normal; font-size: .74rem; font-weight: 700;
    letter-spacing: .13em; text-transform: uppercase;
  }
  /* Las tres rayas, con las de arriba y abajo hechas con ::before y ::after. */
  .hamburguesa > span,
  .hamburguesa > span::before,
  .hamburguesa > span::after {
    display: block; width: 20px; height: 2.5px; background: var(--ink);
    border-radius: 2px; transition: transform .18s ease, opacity .18s ease;
  }
  .hamburguesa > span { position: relative; }
  .hamburguesa > span::before { content: ''; position: absolute; top: -6.5px; }
  .hamburguesa > span::after  { content: ''; position: absolute; top:  6.5px; }

  /* Abierto: las rayas se cruzan en una equis. */
  .menu-check:checked ~ .cabecera-fila .hamburguesa > span { background: transparent; }
  .menu-check:checked ~ .cabecera-fila .hamburguesa > span::before { transform: translateY(6.5px) rotate(45deg); }
  .menu-check:checked ~ .cabecera-fila .hamburguesa > span::after  { transform: translateY(-6.5px) rotate(-45deg); }

  .cabecera-fila { flex-wrap: nowrap; }

  .menu-nav {
    position: fixed; top: 61px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--card);
    border-bottom: 2px solid var(--ink);
    padding: 8px 20px 20px;
    font-size: .95rem; letter-spacing: .04em; text-transform: none;
    /* Cerrado: plegado hacia arriba. Se anima en vez de desaparecer de golpe. */
    max-height: 0; overflow: hidden;
    opacity: 0; visibility: hidden;
    transition: max-height .24s ease, opacity .18s ease, visibility .24s;
    box-shadow: 0 18px 30px -18px rgba(14,14,12,.55);
  }
  .menu-check:checked ~ .cabecera-fila .menu-nav {
    max-height: min(78vh, 520px); overflow-y: auto;
    opacity: 1; visibility: visible;
  }
  .menu-nav a {
    padding: 15px 4px;
    border-bottom: 1px solid var(--rule);
    color: var(--ink);
  }
  .menu-nav a:last-of-type { border-bottom: 0; }
  /* El botón de alta, separado y a todo lo ancho: es la acción de la casa. */
  /* En el móvil «mi cuenta» va pegado al de alta y con el mismo ancho: son
     las dos únicas acciones del menú, y una encima de otra se leen como un
     par —eres cliente o quieres serlo— en vez de como dos enlaces sueltos. */
  .menu-nav a.btn.ghost { margin-top: 14px; margin-bottom: -6px; }
  .menu-nav a.btn {
    margin-top: 14px; padding: 15px 20px; width: 100%;
    text-transform: lowercase; letter-spacing: -.01em; font-size: 1rem;
  }

  /* Una capa oscura detrás que también cierra al tocarla. */
  .menu-check:checked ~ .menu-fondo {
    display: block; position: fixed; inset: 61px 0 0;
    background: rgba(14,14,12,.42); z-index: -1;
    -webkit-tap-highlight-color: transparent;
  }
}

@media (max-width: 380px) {
  /* En pantallas muy estrechas la palabra «Menú» se come el espacio
     del logotipo: se queda sólo el icono, que ya se entiende. */
  .hamburguesa em { display: none; }
  .hamburguesa { padding: 10px 12px; }
}

/* ============================================================
   Documentos legales
   ────────────────────────────────────────────────────────────
   Texto largo que alguien va a leer de verdad —o buscar dentro
   de él— cuando tenga un problema. Medida corta, índice
   pegajoso al lado y tablas que se desplazan solas.
   ============================================================ */
.rejilla-docs{display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(268px,1fr))}
.doc-tarjeta{
  display:flex; flex-direction:column; gap:11px; min-height:210px;
  background:var(--card); border:2px solid var(--ink); border-radius:16px;
  padding:22px 24px; text-decoration:none; color:inherit;
  box-shadow:0 3px 0 var(--rule-2);
  transition:transform .16s ease, box-shadow .16s ease;
}
.doc-tarjeta:hover{transform:translateY(-3px); box-shadow:0 6px 0 var(--acento,var(--rule-2))}
.doc-tarjeta .num{
  font-family:var(--font-display); font-size:.95rem; transform:skewX(var(--skew));
  display:inline-flex; align-items:center; justify-content:center;
  min-width:2.4em; padding:5px 11px; border-radius:10px; align-self:flex-start;
  background:var(--acento,var(--ink-3));
  color:color-mix(in srgb,var(--acento,#888) 14%,#0E0E0C);
}

.legal-layout{display:grid; gap:0 44px; grid-template-columns:minmax(0,1fr)}
@media (min-width:1000px){
  .legal-layout{grid-template-columns:222px minmax(0,1fr)}
}
.legal-toc{
  display:none; flex-direction:column; gap:2px;
  position:sticky; top:82px; align-self:start; max-height:calc(100vh - 120px);
  overflow-y:auto; padding-right:8px;
}
@media (min-width:1000px){ .legal-toc{display:flex} }
.legal-toc a{
  font-size:.82rem; line-height:1.35; color:var(--ink-2);
  padding:6px 10px; border-left:2px solid var(--rule); border-radius:0 7px 7px 0;
}
.legal-toc a:hover{color:var(--ink); border-left-color:var(--ink); background:var(--paper-2)}
.legal-toc .toc-bloque{
  font-size:.62rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3); margin:16px 0 4px; padding-left:10px;
}
.legal-toc .toc-bloque:first-child{margin-top:0}

.legal-doc{max-width:74ch}
.legal-doc article{scroll-margin-top:96px; margin-bottom:34px}
.legal-doc h2{
  font-family:var(--font-display); font-size:1.55rem; text-transform:lowercase;
  transform:skewX(var(--skew)); transform-origin:left bottom;
  margin:0 0 12px; padding-bottom:8px; border-bottom:3px solid var(--ink);
}
.legal-doc h3{font-size:1.02rem; font-weight:700; margin:0 0 8px}
.legal-doc p{margin:0 0 12px; color:var(--ink-2); line-height:1.62}
.legal-doc p:last-child{margin-bottom:0}
.legal-doc .nota{margin:14px 0}
.legal-doc .legal-bloque{
  font-size:1.9rem; margin:52px 0 22px; border-bottom:0; padding-bottom:0;
  color:var(--ink);
}
.legal-doc .legal-bloque:first-child{margin-top:0}

.rejilla-zonas{display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); margin-bottom:8px}

/* ══ Alta ═══════════════════════════════════════════════════════════════
   Elegir tarifa o tipo de tarjeta es elegir, no rellenar: por eso son
   tarjetas grandes con el radio dentro y no un <select>. El radio de verdad
   sigue ahí —oculto pero enfocable— para que el teclado y el lector de
   pantalla funcionen igual que en un formulario normal. */
.elige { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.elige.dos-col { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

.opcion {
  position: relative; display: block; cursor: pointer;
  border: 2px solid var(--rule); border-radius: 14px;
  background: var(--card); padding: 14px 16px;
  transition: border-color .12s, box-shadow .12s, transform .12s;
}
.opcion:hover { border-color: var(--rule-2); }
/* Sólo escondido a la vista: sigue recibiendo el foco del tabulador. */
.opcion input { position: absolute; opacity: 0; width: 0; height: 0; }
.opcion:has(input:checked) {
  border-color: var(--tub, var(--ink));
  box-shadow: inset 0 0 0 1px var(--tub, var(--ink));
}
.opcion:has(input:focus-visible) { outline: 3px solid var(--green); outline-offset: 2px; }
/* Navegadores sin :has() —quedan pocos— se quedan sin el marcado del
   elegido, pero el formulario sigue funcionando entero. */

/* El bote dentro de la opción del alta.
   La altura es fija y el contenido se alinea abajo para que los tres botes
   se apoyen en la misma línea: si cada uno se centrase en su tarjeta, el de
   200 GB y el de 60 GB parecerían del mismo tamaño y se perdería lo único
   que esta pantalla tiene que dejar claro de un vistazo. */
.opcion-bote { height: 156px; display: flex; align-items: flex-end; justify-content: center; margin-bottom: 10px; }
.opcion-bote .bote { pointer-events: none; }
.opcion-bote .cast { display: none; }

.opcion-cuerpo { display: flex; flex-direction: column; gap: 3px; }
.opcion-cuerpo b { font-size: 1.02rem; }
.opcion-cuerpo b.display { font-size: 1.9rem; line-height: 1; }
.opcion-cuerpo .dim3 { font-size: .8rem; line-height: 1.4; }
.opcion-precio { margin-top: 6px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Los suplementos son casillas, no botones de radio: se pueden marcar varios
   o ninguno. Sin una marca visible, una casilla dentro de una tarjeta grande
   no se lee como algo que esté marcado —el borde de color no basta— y la
   gente no sabe qué está comprando. */
.suplementos .opcion { padding-right: 46px; }
.suplementos .opcion .marca {
  position: absolute; top: 14px; right: 14px; width: 21px; height: 21px;
  border: 2px solid var(--rule-2); border-radius: 6px; background: var(--card);
}
.suplementos .opcion:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.suplementos .opcion:has(input:checked) .marca { background: var(--ink); border-color: var(--ink); }
.suplementos .opcion:has(input:checked) .marca::after {
  content: ''; position: absolute; left: 5px; top: 1px; width: 6px; height: 11px;
  border: solid var(--paper); border-width: 0 2.5px 2.5px 0; transform: rotate(42deg);
}
.suplementos .opcion-precio { color: var(--ink); }
.opcion-precio small { font-weight: 400; color: var(--ink-3); }

/* Calle + número: el número nunca necesita media caja. */
.dos.numero { grid-template-columns: 1fr 118px; }
@media (max-width: 620px) { .dos.numero { grid-template-columns: 1fr; } }

/* Los campos de portabilidad se pliegan SÓLO si hay JS. Sin JS se ven
   siempre, que es la única forma de que el formulario siga siendo
   rellenable. */
.porta-campos.plegable { display: none; }
.porta-campos.plegable.abierto { display: block; }

/* ── Resumen del contrato ──────────────────────────────────────────────
   Formato de prospecto: se lee de arriba abajo y cada punto es una línea.
   Nada de párrafos largos donde esconder una condición. */
.lista-resumen { margin: 0; padding-left: 18px; color: var(--ink-2); }
.lista-resumen li { margin: 5px 0; line-height: 1.55; }

.pasos { margin: 0; padding-left: 0; list-style: none; counter-reset: paso; }
.pasos li {
  counter-increment: paso; position: relative;
  padding: 0 0 16px 42px; color: var(--ink-2); line-height: 1.55;
  border-left: 2px solid var(--rule); margin-left: 13px;
}
.pasos li:last-child { border-left-color: transparent; padding-bottom: 0; }
.pasos li::before {
  content: counter(paso); position: absolute; left: -14px; top: 0;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--ink); color: var(--paper);
  font-family: var(--font-mono); font-size: .78rem; font-weight: 700;
  display: grid; place-items: center;
}
.pasos li b { color: var(--ink); }

/* Los titulares van en minúscula por marca, pero una unidad no es un
   titular: «150 gb» está mal escrito. Esta clase devuelve las mayúsculas
   allí donde el texto lleva una unidad o unas siglas. */
.display.caso, .caso { text-transform: none; }

/* ============================================================
   El sobre — la fibra
   ────────────────────────────────────────────────────────────
   Mismo idioma que el bote y a propósito distinto: el bote es
   la línea móvil, que se compra suelta; el sobre es la fibra
   del club, que se pide por unidades. En el estante de un
   gimnasio conviven igual, y quien conoce uno entiende el otro
   sin que nadie se lo explique.

   Lo que hace que se lea como un sobre y no como una tarjeta
   con las esquinas redondeadas son tres cosas, por orden de
   importancia:

     · el DENTADO de arriba y de abajo, que es por donde se
       rasga. Va con `mask` en vez de con pseudoelementos, así
       recorta de verdad y deja ver el fondo por los huecos;
     · el brillo METÁLICO, en bandas verticales muy juntas —el
       laminado de aluminio no difumina como el plástico del
       bote: rebota en franjas;
     · la SOLDADURA lateral, dos bandas mates en los bordes
       que es donde el sobre está pegado.
   ============================================================ */
.sobre {
  --tub: #6AA91E;
  --tub-ink: #0E0E0C;
  width: 100%; max-width: 250px;
  font-family: var(--font-body);
}

.sobre .foil {
  position: relative;
  filter: drop-shadow(0 12px 16px rgba(14,14,12,.26)) drop-shadow(0 2px 3px rgba(14,14,12,.18));
  /* El dentado, por donde se rasga.
     Va con una máscara SVG y no con `conic-gradient`: los conos repetidos
     dependen de cómo redondee cada motor el vértice, y en la prueba salían
     bordes rectos —el sobre parecía una tarjeta—. Un triángulo dibujado es
     un triángulo en todas partes.
     Tres capas que se suman: dientes arriba, dientes abajo y el cuerpo. */
  --diente-arriba: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='8'><path d='M0 8 L7 0 L14 8 Z' fill='black'/></svg>");
  --diente-abajo:  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='8'><path d='M0 0 L7 8 L14 0 Z' fill='black'/></svg>");
  -webkit-mask-image: var(--diente-arriba), var(--diente-abajo), linear-gradient(#000 0 0);
  -webkit-mask-size: 14px 8px, 14px 8px, 100% calc(100% - 16px);
  -webkit-mask-position: 0 0, 0 100%, 0 8px;
  -webkit-mask-repeat: repeat-x, repeat-x, no-repeat;
  mask-image: var(--diente-arriba), var(--diente-abajo), linear-gradient(#000 0 0);
  mask-size: 14px 8px, 14px 8px, 100% calc(100% - 16px);
  mask-position: 0 0, 0 100%, 0 8px;
  mask-repeat: repeat-x, repeat-x, no-repeat;
}

.sobre .foil-cara {
  padding-top: 8px; padding-bottom: 8px;   /* el alto de los dientes */
  background-color: var(--tub);
  /* Franjas verticales estrechas: el aluminio rebota, no difumina. */
  background-image:
    linear-gradient(90deg,
      rgba(0,0,0,.42) 0%, rgba(0,0,0,.16) 4%,
      rgba(255,255,255,.34) 11%, rgba(255,255,255,.06) 17%,
      rgba(255,255,255,.30) 23%, rgba(0,0,0,.02) 30%,
      rgba(255,255,255,.16) 38%, rgba(0,0,0,0) 50%,
      rgba(0,0,0,.10) 62%, rgba(255,255,255,.12) 70%,
      rgba(0,0,0,.20) 80%, rgba(0,0,0,.34) 90%, rgba(0,0,0,.52) 100%);
  padding-left: 0; padding-right: 0;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.20);
}

/* La soldadura de los lados: mate, sin brillo, un poco más oscura. */
.sobre .foil-cara::before,
.sobre .foil-cara::after {
  content: ''; position: absolute; top: 7px; bottom: 7px; width: 11px;
  background: repeating-linear-gradient(90deg,
    rgba(0,0,0,.30) 0 1.5px, rgba(255,255,255,.10) 1.5px 3px);
}
.sobre .foil-cara::before { left: 0; }
.sobre .foil-cara::after  { right: 0; }

/* ── la etiqueta impresa ────────────────────────────────────── */
.sobre .impreso {
  position: relative; z-index: 1;
  margin: 20px; padding: 15px 15px 13px;
  background: linear-gradient(180deg, #FFFFFF, #F2F4F5);
  border-radius: 3px;
  color: var(--ink);
  box-shadow: 0 1px 0 rgba(0,0,0,.16);
}
.sobre .impreso .brandline { display: flex; align-items: baseline; gap: 5px; }
.sobre .impreso .wm { font-family: var(--font-display); transform: skewX(var(--skew)); font-size: 1.3rem; line-height: .9; }
.sobre .impreso .wm-sub { font-size: .46rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: #5A6268; }
.sobre .impreso .mote {
  margin-left: auto; align-self: flex-start;
  font-family: var(--font-mono); font-weight: 700; font-size: .52rem;
  letter-spacing: .08em; line-height: 1.1;
  border: 1.5px solid var(--ink); border-radius: 3px;
  padding: 2px 4px; max-width: 46%; text-align: center; word-break: break-word;
}
.sobre .impreso .bajada { display: flex; align-items: baseline; gap: 3px; margin-top: 9px; }
.sobre .impreso .bajada b { font-family: var(--font-display); font-size: 2.5rem; line-height: .8; transform: skewX(var(--skew)); display: inline-block; }
.sobre .impreso .bajada span { font-family: var(--font-display); font-size: 1rem; transform: skewX(var(--skew)); display: inline-block; }
.sobre .impreso .acc {
  font-family: var(--font-display); font-style: italic; font-size: .84rem;
  color: var(--tub-ink); margin-top: 2px;
}
.sobre .impreso .price { font-family: var(--font-display); font-size: 1.35rem; transform: skewX(var(--skew)); display: block; width: fit-content; margin-top: 9px; }
.sobre .impreso .price small { font-family: var(--font-body); font-size: .56rem; font-weight: 700; letter-spacing: .04em; }
.sobre .impreso .specs { margin-top: 9px; border-top: 1.5px solid var(--ink); padding-top: 6px; }
.sobre .impreso .specrow {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: .54rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: 1.5px 0;
}
.sobre .impreso .lote { display: flex; align-items: flex-end; gap: 8px; margin-top: 9px; }
.sobre .impreso .lote .barcode { flex: 1 1 auto; }
.sobre .impreso .lote span {
  flex: 0 0 auto; font-family: var(--font-mono); font-size: .52rem;
  color: var(--tub-ink); white-space: nowrap;
}

.sobre .cast {
  height: 14px; margin-top: -4px;
  background: radial-gradient(ellipse at 50% 0, rgba(14,14,12,.20), rgba(14,14,12,0) 70%);
}

@media (max-width: 520px) {
  .sobre .impreso .specs { display: none; }
}

/* ============================================================
   Mi cuenta
   ────────────────────────────────────────────────────────────
   Una sola página larga en vez de un panel con menú: el cliente
   entra tres veces al año y siempre a una cosa concreta. Con
   todo a la vista la encuentra sin aprender a navegar.
   ============================================================ */

/* La barra de gigas. Sin número dentro a propósito: la cifra ya está encima
   en grande, y repetirla dentro de una barra de 8 px la hace ilegible. */
.barra-uso {
  height: 10px; border-radius: 999px; overflow: hidden;
  background: var(--paper-2); border: 1.5px solid var(--ink);
}
.barra-uso i {
  display: block; height: 100%;
  background: var(--acento, var(--green));
  transition: width .3s ease;
}
@media (prefers-reduced-motion: reduce) { .barra-uso i { transition: none; } }

.ficha .label-row:last-child { border-bottom: 0; }

/* Un suplemento y su botón. `align-items:center` y no baseline: el botón es
   más alto que el texto y con baseline queda colgando. */
.fila-sup {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  padding: 11px 0; border-bottom: 1px solid var(--rule);
}
.fila-sup:last-child { border-bottom: 0; }
.fila-sup b { font-size: .98rem; }

.btn.peq { font-size: .82rem; padding: 7px 15px; }

/* El selector de bote, con el mismo aire que los campos del alta. */
select.sel {
  font: inherit; font-size: .92rem; padding: 10px 14px;
  border: 2px solid var(--rule); border-radius: 12px;
  background: var(--card); color: var(--ink);
  max-width: 100%;
}
select.sel:focus { outline: none; box-shadow: inset 0 0 0 2px var(--green); }

/* Las facturas. Cuatro columnas que se apoyan a la derecha; en móvil el
   importe manda y la fecha se encoge, nunca al revés. */
.tabla-fact { display: flex; flex-direction: column; }
.fila-fact {
  display: grid; grid-template-columns: auto 1fr auto auto;
  gap: 8px 16px; align-items: baseline;
  padding: 11px 0; border-bottom: 1px solid var(--rule);
  font-variant-numeric: tabular-nums;
}
.fila-fact:last-child { border-bottom: 0; }
.fila-fact .mono { font-family: var(--font-mono); font-size: .86rem; }
.fila-fact a { font-weight: 700; font-size: .88rem; }
@media (max-width: 480px) {
  .fila-fact { grid-template-columns: 1fr auto; }
  .fila-fact .dim3 { grid-column: 1 / -1; font-size: .8rem; }
}

/* El desglose de lo que se paga. Números alineados y la fila que importa
   —lo que se cobra cada mes de aquí en adelante— en negrita y con una línea
   arriba, como una cuenta de toda la vida. */
.cuentas { border-top: 1px solid var(--rule); padding-top: 4px; }
.cuentas .label-row { border-bottom: 0; padding: 5px 0; font-size: .92rem; }
.cuentas .label-row.strong { border-top: 1px solid var(--rule); margin-top: 2px; padding-top: 8px; }
.cuentas .label-row .v { font-variant-numeric: tabular-nums; }

/* ── La tarjeta del pago ────────────────────────────────────── */
/* El formulario de Stripe no baja de unos 320 px de ancho. En un móvil de
   390 px, entre el margen de `.wrap` (24+24) y el de la tarjeta (26+26) le
   quedaban 290, y el formulario se salía por la derecha: el correo y el aviso
   de tarjeta caducada aparecían cortados.

   Aquí la tarjeta del pago —y sólo esa— se come el margen de la página y se
   queda casi a sangre. En un móvil de 360 px le quedan 336, que ya entran. */
.card.pago { padding: 18px; }
#checkout { min-width: 0; overflow-x: auto; }
@media (max-width: 560px) {
  /* A sangre: la tarjeta se sale del margen de la página y ocupa el ancho
     entero de la pantalla. `calc(50% - 50vw)` es el truco de siempre para
     escaparse de un contenedor centrado sin saber cuánto padding tiene. */
  .card.pago {
    margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
    border-left: 0; border-right: 0; border-radius: 0;
    padding: 14px 10px;
  }
}
@media (max-width: 380px) { .card.pago { padding: 12px 6px; } }

/* ── Los desplegables del área de cliente ───────────────────── */
/* El área es lo que más se abre desde el móvil, y de una tirada medía más de
   tres pantallazos y medio: los gigas arriba, y debajo el PUK, la eSIM, los
   suplementos, el bote y la baja, todo desplegado a la vez. Nadie lee eso: se
   desplaza buscando. Plegado se ve el índice entero de un vistazo y se abre
   sólo lo que se venía a hacer. */
.desplegable.llano { border: 0; padding: 0; }
.desplegable.llano > summary::before,
.desplegable.llano > summary::after { right: 2px; top: 12px; }
.card.pad > .desplegable { margin: 0; }
.card.pad > .desplegable + .desplegable { margin-top: 10px; }

/* ── El enlace al contrato, en el paso de pagar ─────────────── */
/* No es un botón más: es la puerta que abre la casilla de confirmar, así que
   tiene que verse como lo primero que hay que hacer. Al abrirlo se pone en
   verde con una marca: sin ese cambio, quien vuelve de la otra pestaña no
   sabe si le ha contado. */
.contrato {
  display: flex; flex-direction: column; gap: 2px;
  border: 2px solid var(--ink); border-radius: 12px;
  padding: 13px 46px 13px 15px; position: relative;
  text-decoration: none; color: var(--ink); background: var(--card);
  font-weight: 700;
}
.contrato .mini { font-weight: 400; font-size: .82rem; color: var(--ink-2); }
.contrato::after {
  content: '↗'; position: absolute; right: 16px; top: 50%;
  transform: translateY(-50%); font-size: 1.1rem; font-weight: 700;
}
.contrato:hover, .contrato:focus-visible { background: var(--paper-2); }
.contrato.leido { border-color: var(--green); }
.contrato.leido::after { content: '✓'; color: var(--green); }

/* ── Bloque plegable del alta ──────────────────────────────── */
/* `<details>` y no JavaScript: si el script no carga, sigue abriendo. */
.desplegable {
  border: 2px solid var(--rule); border-radius: 14px;
  background: var(--card); padding: 14px 16px;
}
.desplegable[open] { border-color: var(--rule-2); }
.desplegable > summary {
  cursor: pointer; list-style: none;
  display: flex; flex-direction: column; gap: 3px;
}
/* La flechita por defecto se quita por tres vías porque cada navegador la
   dibuja a su manera: `list-style` (arriba, en el propio summary), `::marker`
   y el pseudoelemento antiguo de WebKit. En su lugar se dibuja un «+» que al
   abrir se convierte en «−». */
.desplegable > summary::-webkit-details-marker { display: none; }
.desplegable > summary::marker { content: ''; font-size: 0; }
.desplegable { position: relative; }
.desplegable > summary::before,
.desplegable > summary::after {
  content: ''; position: absolute; right: 18px; top: 22px;
  width: 14px; height: 2.5px; border-radius: 2px;
  background: var(--ink); transition: transform .16s ease;
}
/* La segunda barra, de pie, es la que cierra el «+»; al abrir se tumba y
   quedan las dos juntas: un «−». */
.desplegable > summary::after { transform: rotate(90deg); }
.desplegable[open] > summary::after { transform: rotate(180deg); }
.desplegable > summary:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; border-radius: 8px; }
.desplegable > summary .eyebrow,
.desplegable > summary .dim3 { padding-right: 30px; }
.desplegable > summary .dim3 { font-size: .86rem; }
@media (prefers-reduced-motion: reduce) { .desplegable > summary::after { transition: none; } }

/* El contrato entero, abierto, mide doce mil píxeles en un móvil: si se
   pinta seguido, la casilla de confirmar se va tan abajo que hay que
   desplazar medio minuto para llegar. Va dentro de una caja con su propio
   desplazamiento, que es además cómo se ha enseñado siempre un contrato en
   pantalla. `overscroll-behavior` evita que al llegar al final la página
   entera pegue el tirón. */
.caja-contrato {
  max-height: 58vh; overflow-y: auto; overscroll-behavior: contain;
  border: 1px solid var(--rule); border-radius: 12px;
  padding: 16px 14px;
  /* En el móvil no se ve barra de desplazamiento, así que la caja avisa sola:
     las dos primeras capas son el papel, que tapa la sombra cuando estás
     arriba o abajo del todo (van con `local`, se mueven con el contenido);
     las dos siguientes son la sombra, que se queda quieta (`scroll`). Cuando
     queda contrato por leer, se ve el degradado. */
  background:
    linear-gradient(var(--paper-2) 30%, rgba(255,255,255,0)) top / 100% 26px no-repeat local,
    linear-gradient(rgba(255,255,255,0), var(--paper-2) 70%) bottom / 100% 26px no-repeat local,
    radial-gradient(farthest-side at 50% 0, rgba(14,14,12,.16), rgba(14,14,12,0)) top / 100% 11px no-repeat scroll,
    radial-gradient(farthest-side at 50% 100%, rgba(14,14,12,.16), rgba(14,14,12,0)) bottom / 100% 11px no-repeat scroll,
    var(--paper-2);
}
@media print { .caja-contrato { max-height: none; overflow: visible; border: 0; padding: 0; } }