/* ═══════════════════════════════════════════════════════════════
   PHANTTER — sistema de diseño
   Papel cálido, tinta profunda, índigo. Curvatura generosa y aire.
   Lo contrario de una interfaz de trading: aquí nada pesa.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --paper:#F6F5F1;
  --paper-2:#FFFFFF;
  --paper-3:#EFEDE7;
  --ink:#15161A;
  --ink-2:#4B4E56;
  --mute:#585B65;
  --mute-2:#656872;
  --line:#E4E1D9;
  --line-2:#D2CEC3;
  --accent:#5B4BFF;
  --accent-2:#EEECFF;
  --accent-ink:#FFFFFF;
  --ok:#0F7A57;
  --ok-bg:#E6F4EE;
  --wait:#A9670F;
  --wait-bg:#FBF0DF;
  --bad:#B33328;
  --bad-bg:#FBEBE9;

  --fd:"Bricolage Grotesque","Instrument Sans",system-ui,sans-serif;
  --fs:"Instrument Sans",system-ui,-apple-system,sans-serif;

  --wrap:1240px;
  --gut:clamp(1.25rem,5vw,3.5rem);
  --bar:80px;
  /* Alto homologado de todo control de una linea. */
  --ctrl:3.5rem;

  --r:14px;
  --r-lg:26px;
  --r-pill:999px;

  --ease:cubic-bezier(.22,1,.36,1);
  --t:.28s var(--ease);

  --shadow:0 1px 2px rgba(21,22,26,.04), 0 8px 28px rgba(21,22,26,.06);
  --shadow-lift:0 2px 6px rgba(21,22,26,.06), 0 18px 48px rgba(21,22,26,.10);
}

*,*::before,*::after{box-sizing:border-box}
html{font-size:100%;-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--bar) + 1.5rem)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

body.ph{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--fs);font-size:1.0625rem;line-height:1.65;
  overflow-x:hidden;

  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  font-kerning:normal;
  font-optical-sizing:auto;
  font-variant-ligatures:common-ligatures contextual;
  font-synthesis:none;
  -webkit-tap-highlight-color:transparent;
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;font-family:var(--fd);font-weight:700;line-height:1.08;letter-spacing:-.025em;text-wrap:balance}
p,li,dd,figcaption,label,small{text-wrap:pretty}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
address{font-style:normal}

:focus-visible{outline:2.5px solid var(--accent);outline-offset:3px;border-radius:4px}
::selection{background:var(--accent);color:var(--accent-ink)}
@supports (scrollbar-color: auto){html{scrollbar-color:var(--line-2) var(--paper);scrollbar-width:thin}}

.ph-skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--accent);color:var(--accent-ink);
  padding:.75rem 1.25rem;border-radius:var(--r);font-weight:600}
.ph-skip:focus{left:1rem;top:1rem}

.ph-wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut)}
.ph-i{fill:currentColor;flex:none}

/* ── Escala tipográfica ──────────────────────────────────────── */
.ph-d1{font-size:clamp(2.5rem,6.4vw,5rem);font-variation-settings:"wdth" 92;letter-spacing:-.035em;line-height:1.02}
.ph-d1 > span{display:block}
.ph-d2{font-size:clamp(1.875rem,3.8vw,3rem);letter-spacing:-.03em}
/* Cada oración en su renglón: el corte no puede caer a media frase. */
.ph-d2 > span{display:block}
.ph-d3{font-size:clamp(1.25rem,2vw,1.625rem);letter-spacing:-.02em}
.ph-lead{font-size:clamp(1.0625rem,1.4vw,1.25rem);color:var(--ink-2);line-height:1.6;max-width:54ch}
.ph-eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-size:.8125rem;font-weight:600;color:var(--accent);
  background:var(--accent-2);padding:.375rem .875rem;border-radius:var(--r-pill)}
.ph-num,.ph-tbl .n,.ph-stat__v,.ph-ticker__v,.ph-quote__r b,.ph-kv dd,.ph-otp input{
  font-family:var(--fs);font-variant-numeric:tabular-nums lining-nums;
  font-feature-settings:"tnum" 1,"lnum" 1}

/* ── Botones ─────────────────────────────────────────────────── */
.ph-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.875rem 1.5rem;font-size:.9375rem;font-weight:600;letter-spacing:-.005em;
  border:1px solid transparent;border-radius:var(--r-pill);cursor:pointer;white-space:nowrap;
  transition:background var(--t),color var(--t),border-color var(--t),transform var(--t),box-shadow var(--t);
}
.ph-btn:hover{transform:translateY(-1px)}
.ph-btn:active{transform:translateY(0)}
.ph-btn--solid{background:var(--accent);color:var(--accent-ink);box-shadow:0 1px 2px rgba(91,75,255,.2)}
.ph-btn--solid:hover{background:#4A38F5;box-shadow:0 6px 20px rgba(91,75,255,.28)}
.ph-btn--ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.ph-btn--ghost:hover{border-color:var(--ink);background:var(--paper-2)}
.ph-btn--quiet{background:var(--paper-2);color:var(--ink);border-color:var(--line)}
.ph-btn--quiet:hover{border-color:var(--line-2);box-shadow:var(--shadow)}
.ph-btn--wide{width:100%}
.ph-btn--lg{padding:1.125rem 2rem;font-size:1rem}
.ph-btn--danger{background:transparent;color:var(--bad);border-color:rgba(179,51,40,.3)}
.ph-btn--danger:hover{background:var(--bad-bg);border-color:var(--bad)}
.ph-btn[disabled],.ph-btn:disabled{
  background:var(--paper-3);color:var(--mute-2);border-color:var(--line);
  box-shadow:none;transform:none;cursor:not-allowed;pointer-events:auto}

/* ── Cabecera flotante ───────────────────────────────────────── */
.ph-head{position:fixed;inset:1rem 0 auto;z-index:90;pointer-events:none}
.ph-head__in{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut);
  display:flex;align-items:center;gap:1rem}
.ph-head__pill{flex:1;display:flex;align-items:center;gap:1.5rem;pointer-events:auto;
  background:rgba(255,255,255,.82);backdrop-filter:blur(18px) saturate(1.4);
  border:1px solid var(--line);border-radius:var(--r-pill);
  padding:.5rem .5rem .5rem 1.25rem;box-shadow:var(--shadow);
  transition:box-shadow var(--t),background var(--t)}
.ph-head.is-stuck .ph-head__pill{box-shadow:var(--shadow-lift);background:rgba(255,255,255,.94)}

.ph-logo{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--fd);font-weight:700;
  letter-spacing:-.03em;font-size:1.125rem}
.ph-mark{width:1.5rem;height:1.5rem;flex:none;color:var(--accent)}
.ph-foot .ph-mark circle{fill:var(--ink)}
.ph-word{font-variation-settings:"wdth" 90}

.ph-nav{display:none;gap:1.5rem;margin-inline:auto;font-size:.9375rem;font-weight:500;color:var(--ink-2)}
.ph-nav a{position:relative;padding:.375rem .125rem;border-radius:6px;transition:color var(--t)}
.ph-nav a::after{content:"";position:absolute;left:50%;bottom:0;width:0;height:2px;border-radius:2px;
  background:var(--accent);transform:translateX(-50%);transition:width var(--t)}
.ph-nav a:hover{color:var(--ink)}
.ph-nav a:hover::after{width:100%}

.ph-head__act{display:flex;align-items:center;gap:.5rem;margin-inline-start:auto}
.ph-lang--menu{display:inline-flex;margin-top:.5rem;align-self:start;justify-self:start;inline-size:fit-content}
.ph-lang{display:none;align-items:center;gap:.25rem;padding:.25rem;background:var(--paper-3);border-radius:var(--r-pill)}
.ph-lang a{display:inline-flex;align-items:center;gap:.375rem;padding:.3125rem .625rem;border-radius:var(--r-pill);
  font-size:.8125rem;font-weight:600;color:var(--mute);transition:background var(--t),color var(--t)}
.ph-lang a:hover{color:var(--ink)}
.ph-lang a.is-on{background:var(--paper-2);color:var(--ink);box-shadow:0 1px 2px rgba(21,22,26,.08)}
/* Sin filete, la franja blanca de la bandera de México se funde con la píldora
   blanca del encabezado y la bandera se lee como dos rectángulos sueltos. */
.ph-flag{width:1.125rem;height:.8125rem;border-radius:2px;flex:none;display:block;
  box-shadow:0 0 0 1px rgba(21,22,26,.20)}
/* El conmutador se ciñe a su contenido. Sin `fit-content` el contenedor flexible
   se estira a la columna del pie —219 px para 130 px de contenido, medido— y la
   píldora queda medio vacía; `align-self` no lo evita porque el padre es block. */
.ph-lang--foot{display:inline-flex;inline-size:fit-content;margin-top:1.25rem}

.ph-burger{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;align-items:center;
  width:2.75rem;height:2.75rem;flex:none;background:var(--paper-3);border:0;border-radius:var(--r-pill);cursor:pointer;
  transition:background var(--t)}
.ph-burger:hover{background:var(--line)}
.ph-burger span{display:block;width:17px;height:2px;border-radius:2px;background:var(--ink);transition:transform var(--t)}

.ph-close{display:inline-flex;align-items:center;justify-content:center;
  inline-size:2.75rem;block-size:2.75rem;flex:none;
  background:var(--paper-3);border:0;border-radius:var(--r-pill);color:var(--ink);cursor:pointer;
  transition:background var(--t)}
.ph-close:hover{background:var(--line)}

/* ── Menú a pantalla completa ────────────────────────────────── */
.ph-menu{position:fixed;inset:0;z-index:120;background:var(--paper);
  display:flex;flex-direction:column;overflow-y:auto;
  opacity:0;transition:opacity .3s var(--ease)}
.ph-menu[hidden]{display:none}
.ph-menu.is-on{opacity:1}
.ph-menu__bar{height:calc(var(--bar) + 1rem);display:flex;align-items:center;justify-content:space-between;
  padding-inline:var(--gut);flex:none}
.ph-menu__nav{flex:1;display:flex;flex-direction:column;justify-content:center;padding:2rem var(--gut);gap:.25rem}
.ph-menu__nav a{display:flex;align-items:center;gap:1rem;padding:.75rem 1rem;border-radius:var(--r-lg);
  font-family:var(--fd);font-size:clamp(1.75rem,7vw,3rem);font-weight:700;letter-spacing:-.03em;
  opacity:0;transform:translateY(10px);
  transition:opacity .4s var(--ease),transform .4s var(--ease),background var(--t);transition-delay:var(--d,0s)}
.ph-menu.is-on .ph-menu__nav a{opacity:1;transform:none}
.ph-menu__nav a:hover{background:var(--paper-2)}
.ph-menu__nav em{font-family:var(--fs);font-size:.75rem;font-style:normal;color:var(--accent);
  background:var(--accent-2);padding:.25rem .5rem;border-radius:var(--r-pill)}
.ph-menu__foot{padding:0 var(--gut) 3rem;display:grid;gap:.75rem;flex:none;max-width:26rem}
.ph-menu__meta{display:flex;flex-wrap:wrap;gap:.375rem 1.5rem;margin-top:1rem;font-size:.9375rem;color:var(--ink-2)}

/* ── Secciones ───────────────────────────────────────────────── */
.ph-sec{padding-block:clamp(4rem,9vw,7.5rem);position:relative}
.ph-sec--soft{background:var(--paper-2)}
.ph-head-block{display:grid;gap:1.25rem;justify-items:start;margin-bottom:clamp(2.5rem,5vw,3.5rem);max-width:60ch}
/* El tope de 60ch está pensado para la entradilla y estrangula al titular, que
   con un cuerpo tres veces mayor rompe a media frase. La entradilla lleva su
   propio tope en .ph-lead, así que aquí se suelta. */
.ph-head-block--ancho{max-width:none}

[data-reveal]{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
[data-reveal].is-in{opacity:1;transform:none}

/* ── Portada ─────────────────────────────────────────────────── */
.ph-hero{position:relative;padding-block:calc(var(--bar) + clamp(3rem,7vw,5.5rem)) clamp(3rem,6vw,5rem);overflow:hidden}
.ph-hero__bg{position:absolute;inset:0;z-index:0}
.ph-hero__bg canvas{width:100%;height:100%;display:block}
.ph-hero__veil{position:absolute;inset:0;z-index:1;
  background:linear-gradient(to bottom,rgba(246,245,241,.5) 0%,rgba(246,245,241,.1) 45%,var(--paper) 100%)}
.ph-hero__in{position:relative;z-index:2}
.ph-hero__cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}

.ph-ticker{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;margin-top:clamp(3rem,6vw,4.5rem)}
.ph-ticker__i{background:var(--paper-2);padding:1.25rem 1.5rem}
.ph-ticker__k{display:block;font-size:.8125rem;color:var(--mute);font-weight:500;margin-bottom:.375rem}
.ph-ticker__v{font-size:1.25rem;font-weight:500;color:var(--ink)}
.ph-ticker__v small{font-size:.8125rem;color:var(--mute);margin-inline-start:.375rem;font-family:var(--fs)}

/* ── Tarjetas ────────────────────────────────────────────────── */
.ph-grid{display:grid;gap:1.25rem;grid-template-columns:1fr}
.ph-card{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(1.5rem,3vw,2.25rem);display:grid;gap:.75rem;align-content:start;
  transition:box-shadow var(--t),transform var(--t),border-color var(--t)}
.ph-card:hover{box-shadow:var(--shadow-lift);transform:translateY(-3px);border-color:var(--line-2)}
.ph-card__ic{width:3rem;height:3rem;display:grid;place-items:center;border-radius:var(--r);
  background:var(--accent-2);color:var(--accent);margin-bottom:.75rem}
.ph-card h3{font-size:1.25rem}
.ph-card p{color:var(--ink-2);font-size:.9375rem}
.ph-card__tag{font-family:var(--fs);font-size:.8125rem;color:var(--accent)}

/* ── Proceso ─────────────────────────────────────────────────── */
.ph-steps{display:grid;gap:1.25rem}
.ph-step{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(1.5rem,3vw,2rem);display:grid;gap:.625rem;position:relative}
.ph-step__n{display:inline-grid;place-items:center;width:2rem;height:2rem;border-radius:var(--r-pill);
  background:var(--accent);color:var(--accent-ink);font-family:var(--fs);font-size:.8125rem;margin-bottom:.5rem}
.ph-step h3{font-size:1.125rem}
.ph-step p{color:var(--ink-2);font-size:.9375rem}

/* ── Criterios ───────────────────────────────────────────────── */
.ph-split{display:grid;gap:clamp(2.5rem,5vw,4rem);align-items:start}
.ph-list{display:grid;gap:1.25rem}
.ph-list li{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:start}
.ph-list svg{color:var(--accent);margin-top:.2rem}
.ph-list strong{display:block;font-size:1.0625rem;font-weight:600;letter-spacing:-.015em;margin-bottom:.25rem}
.ph-list span{color:var(--ink-2);font-size:.9375rem}

.ph-slab{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(1.75rem,3vw,2.25rem);box-shadow:var(--shadow)}
.ph-slab h3{font-size:1.25rem;margin-bottom:1.25rem}
.ph-kv{display:flex;justify-content:space-between;gap:1rem;padding:.875rem 0;border-bottom:1px solid var(--line);font-size:.9375rem}
.ph-kv:last-child{border-bottom:0}
.ph-kv dt{color:var(--ink-2)}
.ph-kv dd{margin:0;white-space:nowrap;font-weight:500}
.ph-kv dd.is-prose{white-space:normal;font-family:var(--fs);text-align:end}

/* ── Formularios ─────────────────────────────────────────────── */
.ph-field{display:grid;gap:.5rem;margin-bottom:1.25rem;align-content:start}
.ph-field > label{font-size:.9375rem;font-weight:600;color:var(--ink)}
.ph-field small{font-size:.875rem;color:var(--mute)}
.ph-in,.ph-sel,.ph-ta{
  width:100%;background:var(--paper-2);color:var(--ink);
  border:1px solid var(--line-2);border-radius:var(--r);padding:.9375rem 1.125rem;
  font:400 1rem/1.4 var(--fs);transition:border-color var(--t),box-shadow var(--t)}
.ph-in:hover,.ph-sel:hover,.ph-ta:hover{border-color:var(--mute-2)}
.ph-in:focus,.ph-sel:focus,.ph-ta:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-2)}
.ph-in::placeholder,.ph-ta::placeholder{color:var(--mute-2)}
.ph-ta{min-height:8rem;resize:vertical}
.ph-sel{appearance:none;padding-inline-end:2.75rem;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-2) 50%),linear-gradient(135deg,var(--ink-2) 50%,transparent 50%);
  background-position:calc(100% - 21px) 52%,calc(100% - 15px) 52%;background-size:6px 6px;background-repeat:no-repeat}
.ph-in--num{font-family:var(--fs);font-size:.9375rem}

.ph-amount{position:relative}
.ph-amount__cur{position:absolute;inset-inline-start:1.125rem;inset-block:0;display:flex;align-items:center;
  font:600 .875rem/1 var(--fs);color:var(--mute);pointer-events:none}
.ph-amount .ph-in{padding-inline-start:3.375rem}

.ph-file{position:relative;display:block;border:1.5px dashed var(--line-2);border-radius:var(--r);
  padding:1.25rem;cursor:pointer;background:var(--paper-2);transition:border-color var(--t),background var(--t)}
.ph-file:hover{border-color:var(--accent);background:var(--accent-2)}
.ph-file input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.ph-file__b{display:flex;align-items:center;gap:.75rem;color:var(--ink-2);font-size:.9375rem}
.ph-file__b svg{color:var(--accent)}
.ph-file.is-set{border-style:solid;border-color:var(--ok);background:var(--ok-bg)}
.ph-file.is-set .ph-file__b{color:var(--ink)}
.ph-file.is-set .ph-file__b svg{color:var(--ok)}

/* Con appearance:none el input hereda el relleno lateral de la página y deja
   de ser cuadrado: padding:0 y min-* son obligatorios, no decorativos. */
.ph-check input,.ph-radio input{
  appearance:none;-webkit-appearance:none;
  padding:0;margin:0;flex:none;box-sizing:border-box;
  background-repeat:no-repeat;background-position:center;cursor:pointer}
.ph-check{display:grid;grid-template-columns:auto 1fr;gap:.75rem;align-items:start;font-size:.9375rem;color:var(--ink-2);cursor:pointer}
.ph-check input{
  inline-size:1.25rem;block-size:1.25rem;min-inline-size:1.25rem;min-block-size:1.25rem;
  border:1.5px solid var(--line-2);border-radius:6px;background-color:var(--paper-2);margin-block-start:.125rem;
  transition:background-color var(--t),border-color var(--t)}
.ph-check input:hover{border-color:var(--mute)}
.ph-check input:checked{background-color:var(--accent);border-color:var(--accent);
  background-size:.875rem .875rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23FFFFFF' d='m9.6 16.2-4.2-4.2-1.4 1.4 5.6 5.6L20.6 8 19.2 6.6z'/%3E%3C/svg%3E")}
.ph-check a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}

.ph-radios{display:grid;gap:.75rem}
.ph-radio{display:flex;align-items:center;gap:.875rem;border:1px solid var(--line-2);border-radius:var(--r);
  padding:1rem 1.125rem;cursor:pointer;background:var(--paper-2);transition:border-color var(--t),box-shadow var(--t)}
.ph-radio input{
  inline-size:1.125rem;block-size:1.125rem;min-inline-size:1.125rem;min-block-size:1.125rem;
  border:1.5px solid var(--line-2);border-radius:50%;transition:border-color var(--t),background-image var(--t)}
.ph-radio:hover{border-color:var(--mute-2)}
.ph-radio input:checked{border-color:var(--accent);
  background-image:radial-gradient(circle at center,var(--accent) 0 42%,transparent 43%)}
.ph-radio:has(input:checked){border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-2)}
.ph-radio b{font-size:.9375rem;font-weight:600}
.ph-radio span{display:block;font-size:.875rem;color:var(--mute)}

.ph-hint{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;font-size:.875rem;color:var(--mute);line-height:1.45}
.ph-hint__n{font-family:var(--fs);flex:none;font-variant-numeric:tabular-nums}
[data-wallet-field].is-ok .ph-in{border-color:var(--ok)}
[data-wallet-field].is-ok .ph-hint__t{color:var(--ok)}
[data-wallet-field].is-warn .ph-in{border-color:var(--wait)}
[data-wallet-field].is-warn .ph-hint__t{color:var(--wait)}
[data-wallet-field].is-bad .ph-in{border-color:var(--bad)}
[data-wallet-field].is-bad .ph-hint__t,[data-wallet-field].is-bad .ph-hint__n{color:var(--bad)}
.ph-in--wallet{word-break:break-all}
small.is-bad{color:var(--bad)}

.ph-fieldset{border:0;padding:0;margin:0 0 2.25rem}
.ph-fieldset legend{padding:0;margin-bottom:1.25rem;font-family:var(--fd);font-size:1.125rem;font-weight:700;
  letter-spacing:-.02em;width:100%}

/* ── Avisos y etiquetas ──────────────────────────────────────── */
.ph-note{display:flex;align-items:flex-start;gap:.75rem;padding:1rem 1.125rem;margin-bottom:1.5rem;
  border-radius:var(--r);font-size:.9375rem;line-height:1.5;border:1px solid transparent}
.ph-note svg{flex:none;margin-top:.15rem}
.ph-note--ok{background:var(--ok-bg);border-color:rgba(15,122,87,.2);color:#0B5C42}
.ph-note--ok svg{color:var(--ok)}
.ph-note--wait{background:var(--wait-bg);border-color:rgba(169,103,15,.2);color:#7D4D0B}
.ph-note--wait svg{color:var(--wait)}
.ph-note--bad{background:var(--bad-bg);border-color:rgba(179,51,40,.2);color:#8C271E}
.ph-note--bad svg{color:var(--bad)}

.ph-chip{display:inline-flex;align-items:center;gap:.375rem;padding:.25rem .75rem;border-radius:var(--r-pill);
  font-size:.8125rem;font-weight:600;line-height:1.5}
.ph-chip::before{content:"";width:.4375rem;height:.4375rem;border-radius:50%;background:currentColor}
.ph-chip--ok{background:var(--ok-bg);color:var(--ok)}
.ph-chip--wait{background:var(--wait-bg);color:var(--wait)}
.ph-chip--bad{background:var(--bad-bg);color:var(--bad)}

/* ── Acceso ──────────────────────────────────────────────────── */
.ph-auth{min-height:100svh;display:grid;grid-template-columns:1fr}
.ph-auth__aside{display:none;position:relative;overflow:hidden;background:var(--ink)}
.ph-auth__aside canvas{position:absolute;inset:0;width:100%;height:100%}
.ph-auth__quote{position:relative;z-index:2;margin-top:auto;padding:clamp(2rem,4vw,3.5rem);display:grid;gap:1rem}
.ph-auth__quote p{font-family:var(--fd);font-size:clamp(1.375rem,2.2vw,2rem);font-weight:700;
  letter-spacing:-.03em;line-height:1.2;color:#fff;max-width:20ch}
.ph-auth__quote span{color:rgba(255,255,255,.6);font-size:.9375rem}
.ph-auth__main{display:flex;flex-direction:column;padding:calc(var(--bar) + 2rem) var(--gut) 3rem;min-height:100svh}
.ph-auth__box{width:100%;max-width:28rem;margin:auto}
.ph-auth__box h1{font-size:clamp(1.875rem,3.5vw,2.5rem);margin-bottom:.75rem}
.ph-auth__box > p{color:var(--ink-2);margin-bottom:2rem}
.ph-auth__alt{margin-top:1.75rem;padding-top:1.5rem;border-top:1px solid var(--line);font-size:.9375rem;color:var(--ink-2)}
.ph-auth__alt a{color:var(--accent);font-weight:600}
.ph-auth__box--wide{max-width:44rem}
.ph-cols{display:grid;gap:0 1.25rem}

/* ── Espacio del cliente ─────────────────────────────────────── */
.ph-app{padding:calc(var(--bar) + clamp(2rem,4vw,3rem)) 0 clamp(3rem,6vw,5rem);min-height:100svh}
.ph-app__head{display:grid;gap:.5rem;justify-items:start;margin-bottom:clamp(2rem,4vw,2.75rem)}
.ph-app__head h1{font-size:clamp(1.875rem,3.5vw,2.5rem)}
.ph-app__head p{color:var(--ink-2)}

.ph-stats{display:grid;gap:1rem;margin-bottom:1.75rem}
.ph-stat{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.375rem 1.5rem}
.ph-stat__k{font-size:.8125rem;color:var(--mute);display:block;margin-bottom:.5rem}
.ph-stat__v{font-size:1.75rem;font-weight:500;letter-spacing:-.03em}
.ph-stat__v small{font-size:.875rem;color:var(--mute);font-family:var(--fs);margin-inline-start:.375rem}

.ph-panes{display:grid;gap:1.5rem;align-items:start}
.ph-pane{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.ph-pane__h{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.375rem 1.5rem;border-bottom:1px solid var(--line)}
.ph-pane__h h2{font-size:1.125rem}
.ph-pane__b{padding:1.5rem}

.ph-quote{border:1px solid var(--line);border-radius:var(--r);background:var(--paper);padding:1.25rem;margin-bottom:1.5rem;display:grid;gap:.75rem}
.ph-quote__r{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;font-size:.9375rem}
.ph-quote__r span{color:var(--ink-2)}
.ph-quote__r b{font-weight:500}
.ph-quote__out{border-top:1px solid var(--line);padding-top:.875rem}
.ph-quote__r:first-child.ph-quote__out{border-top:0;padding-top:0}
.ph-quote__out b{font-size:1.5rem;color:var(--accent);font-weight:500}
.ph-quote__src{font-size:.8125rem;color:var(--mute);line-height:1.55}

.ph-tbl{width:100%;border-collapse:collapse;font-size:.9375rem}
.ph-tbl th{text-align:start;font-size:.8125rem;font-weight:600;color:var(--mute);
  padding:.875rem 1.25rem;border-bottom:1px solid var(--line);white-space:nowrap}
.ph-tbl td{padding:1rem 1.25rem;border-bottom:1px solid var(--line);vertical-align:middle}
.ph-tbl tr:last-child td{border-bottom:0}
.ph-tbl tbody tr{transition:background var(--t)}
.ph-tbl tbody tr:hover{background:var(--paper)}
.ph-tbl .n{white-space:nowrap}
.ph-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

.ph-empty{padding:3rem 1.5rem;text-align:center;color:var(--ink-2)}
.ph-empty svg{color:var(--mute-2);margin:0 auto 1rem}

/* ── Código de verificación ──────────────────────────────────── */
.ph-otp{display:flex;gap:.625rem;justify-content:center;margin:1.75rem 0}
.ph-otp input{width:3.25rem;height:4rem;padding:0;text-align:center;background:var(--paper-2);color:var(--ink);
  border:1.5px solid var(--line-2);border-radius:var(--r);font-size:1.5rem;transition:border-color var(--t),box-shadow var(--t)}
.ph-otp input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-2)}
.ph-otp input.is-set{border-color:var(--mute)}

.ph-testbar{display:flex;align-items:flex-start;gap:.875rem;padding:1.125rem;margin-bottom:1.5rem;
  border:1.5px solid var(--wait);border-radius:var(--r);background:var(--wait-bg)}
.ph-testbar svg{color:var(--wait);flex:none;margin-top:.15rem}
.ph-testbar b{display:block;color:#7D4D0B;font-size:.9375rem}
.ph-testbar span{display:block;color:var(--ink-2);font-size:.875rem;margin:.25rem 0 .75rem}
.ph-testbar code{display:inline-block;font:500 1.5rem/1 var(--fs);letter-spacing:.28em;
  background:var(--paper-2);border:1px solid var(--line-2);border-radius:8px;padding:.625rem .875rem}

/* ── Panel de solicitudes ────────────────────────────────────── */
.ph-tabs{display:flex;gap:.375rem;margin-bottom:1.5rem;overflow-x:auto;padding-bottom:.25rem}
.ph-tab{flex:0 0 auto;padding:.625rem 1.125rem;background:var(--paper-2);border:1px solid var(--line);
  border-radius:var(--r-pill);cursor:pointer;font-size:.875rem;font-weight:600;color:var(--ink-2);
  display:flex;align-items:center;gap:.5rem;transition:background var(--t),color var(--t),border-color var(--t)}
.ph-tab:hover{border-color:var(--line-2)}
.ph-tab.is-on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.ph-tab b{font-family:var(--fs);font-size:.75rem;padding:.0625rem .375rem;border-radius:var(--r-pill);background:var(--paper-3);color:var(--ink-2)}
.ph-tab.is-on b{background:rgba(255,255,255,.22);color:#fff}

.ph-toolbar{display:flex;flex-wrap:wrap;gap:.75rem;margin-bottom:1.5rem}
.ph-search{position:relative;flex:1 1 16rem}
.ph-search svg{position:absolute;left:1.125rem;top:50%;transform:translateY(-50%);color:var(--mute-2);pointer-events:none}
.ph-search input{padding-inline-start:3rem}

.ph-drawer{position:fixed;inset-block:0;inset-inline-end:0;width:min(44rem,100%);z-index:130;
  background:var(--paper);border-inline-start:1px solid var(--line);display:flex;flex-direction:column;
  transform:translateX(101%);transition:transform .38s var(--ease);overflow:hidden;box-shadow:var(--shadow-lift)}
.ph-drawer.is-on{transform:none}
.ph-drawer__h{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;
  padding:1.5rem;border-bottom:1px solid var(--line);flex:none;background:var(--paper-2)}
.ph-drawer__b{flex:1;overflow-y:auto;padding:1.5rem}
.ph-drawer__f{padding:1.25rem 1.5rem;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:.75rem;flex:none;background:var(--paper-2)}
.ph-scrim{position:fixed;inset:0;z-index:125;background:rgba(21,22,26,.35);backdrop-filter:blur(2px);
  opacity:0;pointer-events:none;transition:opacity var(--t)}
.ph-scrim.is-on{opacity:1;pointer-events:auto}

.ph-block{margin-bottom:2rem}
.ph-block > h3{font-family:var(--fd);font-size:1rem;font-weight:700;margin-bottom:.875rem}

.ph-decision{display:flex;align-items:flex-start;gap:.875rem;padding:1rem 1.125rem;margin-bottom:1.5rem;
  border-radius:var(--r);font-size:.9375rem;border:1px solid var(--line);background:var(--paper-2)}
.ph-decision svg{flex:none;margin-top:.1rem}
.ph-decision b{display:block;font-weight:600}
.ph-decision > span > span{display:block;color:var(--mute);font-size:.875rem;margin-top:.125rem}
.ph-decision--ok{background:var(--ok-bg);border-color:rgba(15,122,87,.2)}
.ph-decision--ok svg{color:var(--ok)}
.ph-decision--bad{background:var(--bad-bg);border-color:rgba(179,51,40,.2)}
.ph-decision--bad svg{color:var(--bad)}
.ph-decision--wait{background:var(--wait-bg);border-color:rgba(169,103,15,.2)}
.ph-decision--wait svg{color:var(--wait)}

.ph-docs{display:grid;gap:.75rem;grid-template-columns:1fr}
.ph-doc{display:flex;align-items:center;gap:.875rem;padding:1rem 1.125rem;border:1px solid var(--line);
  border-radius:var(--r);background:var(--paper-2);transition:border-color var(--t),box-shadow var(--t)}
.ph-doc:hover{border-color:var(--accent);box-shadow:var(--shadow)}
.ph-doc svg{color:var(--accent);flex:none}
.ph-doc b{display:block;font-size:.9375rem;font-weight:600}
.ph-doc span{font-size:.8125rem;color:var(--mute)}

.ph-qa{display:grid;gap:1rem}
.ph-qa > div{display:grid;gap:.1875rem}
.ph-qa dt{font-size:.875rem;color:var(--mute)}
.ph-qa dd{margin:0;font-size:.9375rem;font-weight:500}

.ph-log{display:grid;gap:.625rem;font-size:.875rem}
.ph-log > div{display:grid;grid-template-columns:auto 1fr;gap:1rem}
.ph-log time{font-family:var(--fs);color:var(--mute);white-space:nowrap;font-size:.8125rem}
.ph-log em{font-style:normal;font-weight:600}

.ph-spin{width:1.125rem;height:1.125rem;border:2px solid var(--line);border-top-color:var(--accent);
  border-radius:50%;animation:ph-rot .7s linear infinite;flex:none}
@keyframes ph-rot{to{transform:rotate(360deg)}}
.ph-loading{display:flex;align-items:center;justify-content:center;gap:.75rem;padding:3rem;color:var(--ink-2)}

.ph-dlg{width:min(30rem,calc(100vw - 2rem));padding:clamp(1.75rem,4vw,2.25rem);
  background:var(--paper-2);color:var(--ink);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:0 24px 80px rgba(21,22,26,.22)}
.ph-dlg::backdrop{background:rgba(21,22,26,.4);backdrop-filter:blur(3px)}
.ph-dlg[open]{animation:ph-pop .26s var(--ease)}
@keyframes ph-pop{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
.ph-dlg__d{display:grid;gap:0;margin-bottom:1.75rem}
.ph-dlg__d > div{display:flex;justify-content:space-between;gap:1rem;padding:.8125rem 0;border-bottom:1px solid var(--line)}
.ph-dlg__d dt{color:var(--ink-2);font-size:.9375rem}
.ph-dlg__d dd{margin:0;font-weight:600;font-size:.9375rem;text-align:end}
.ph-dlg__d dd.n{font-family:var(--fs);font-weight:400;font-size:.8125rem}
.ph-dlg__f{display:flex;gap:.75rem;flex-wrap:wrap}
.ph-dlg__f .ph-btn{flex:1 1 9rem}

/* ── Contacto ────────────────────────────────────────────────── */
.ph-contact{display:grid;gap:clamp(2.5rem,5vw,4rem)}
.ph-contact__aside{display:grid;gap:1.5rem;align-content:start}
.ph-contact__i{display:grid;grid-template-columns:auto 1fr;gap:1rem}
.ph-contact__i svg{color:var(--accent);margin-top:.2rem}
.ph-contact__i b{display:block;font-size:.8125rem;color:var(--mute);font-weight:500;margin-bottom:.125rem}
.ph-contact__i span,.ph-contact__i a{font-size:.9375rem}
.ph-contact__i a:hover{color:var(--accent)}
.ph-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ── Legales ─────────────────────────────────────────────────── */
.ph-legal{padding:calc(var(--bar) + clamp(3rem,6vw,5rem)) 0 clamp(4rem,8vw,6rem)}
.ph-legal__in{max-width:80rem}
.ph-legal h1{font-size:clamp(2rem,4.5vw,3rem);margin-bottom:1rem}
.ph-legal__meta{color:var(--mute);font-size:.9375rem;margin-bottom:3rem;padding-bottom:1.5rem;border-bottom:1px solid var(--line)}
.ph-legal__in h2{font-size:1.375rem;margin:2.75rem 0 .875rem}
.ph-legal__in h3{font-size:1.125rem;margin:1.75rem 0 .625rem}
.ph-legal__in p,.ph-legal__in li{color:var(--ink-2);font-size:1rem;line-height:1.75;margin-bottom:1rem}
.ph-legal__in ul{list-style:none;display:grid;gap:.5rem;margin-bottom:1.5rem}
.ph-legal__in ul li{padding-inline-start:1.5rem;position:relative;margin-bottom:0}
.ph-legal__in ul li::before{content:"";position:absolute;left:0;top:.7rem;width:.4375rem;height:.4375rem;
  border-radius:50%;background:var(--accent)}
.ph-legal__in table{width:100%;border-collapse:collapse;margin:0 0 1.5rem;font-size:1rem}
.ph-legal__in thead th{text-align:start;font-weight:600;color:var(--ink);padding:0 1.25rem .625rem 0;border-bottom:1px solid var(--ink-2)}
.ph-legal__in tbody td{color:var(--ink-2);line-height:1.7;padding:.875rem 1.25rem;border-bottom:1px solid var(--line);vertical-align:top}
.ph-legal__in tbody td:first-child{padding-inline-start:0;inline-size:46%}
.ph-legal__in th:last-child,.ph-legal__in td:last-child{padding-inline-end:0}
.ph-legal__in strong{color:var(--ink)}

/* ── Pie ─────────────────────────────────────────────────────── */
.ph-foot{background:var(--ink);color:var(--paper);border-radius:var(--r-lg) var(--r-lg) 0 0;margin-top:clamp(3rem,6vw,5rem)}
.ph-foot__top{max-width:var(--wrap);margin:0 auto;padding:clamp(3rem,6vw,4.5rem) var(--gut);display:grid;gap:2.5rem}
.ph-foot .ph-logo{color:var(--paper)}
.ph-foot__brand p{color:rgba(246,245,241,.6);font-size:.9375rem;max-width:32ch;margin:1rem 0 1.5rem}
.ph-foot__col h3{font-family:var(--fs);font-size:.8125rem;font-weight:600;color:rgba(246,245,241,.5);margin-bottom:1.125rem}
.ph-foot__col ul{display:grid;gap:.625rem;font-size:.9375rem;color:rgba(246,245,241,.75)}
.ph-foot__col a:hover{color:#fff}
.ph-foot address{display:grid;gap:.625rem;font-size:.9375rem;color:rgba(246,245,241,.75);max-width:30ch}
.ph-foot__hours{color:rgba(246,245,241,.5);font-size:.875rem}
.ph-foot__bar{border-top:1px solid rgba(246,245,241,.12);padding:1.375rem var(--gut);
  display:flex;flex-wrap:wrap;gap:.5rem 2rem;justify-content:space-between;
  color:rgba(246,245,241,.5);font-size:.875rem;max-width:var(--wrap);margin:0 auto}
.ph-foot .ph-lang{background:rgba(246,245,241,.08)}
.ph-foot .ph-flag{box-shadow:0 0 0 1px rgba(246,245,241,.24)}
.ph-foot .ph-lang a{color:rgba(246,245,241,.6)}
.ph-foot .ph-lang a.is-on{background:rgba(246,245,241,.16);color:#fff;box-shadow:none}

/* ═══ Puntos de quiebre ═══════════════════════════════════════ */
@media (min-width:600px){
  .ph-grid{grid-template-columns:repeat(2,1fr)}
  .ph-steps{grid-template-columns:repeat(2,1fr)}
  .ph-stats{grid-template-columns:repeat(3,1fr)}
  .ph-cols{grid-template-columns:1fr 1fr}
  .ph-docs{grid-template-columns:repeat(2,1fr)}
  .ph-ticker{grid-template-columns:repeat(2,1fr)}
  .ph-foot__top{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:900px){
  .ph-lang{display:flex}
  .ph-grid{grid-template-columns:repeat(3,1fr)}
  .ph-steps{grid-template-columns:repeat(4,1fr)}
  .ph-ticker{grid-template-columns:repeat(4,1fr)}
  .ph-split{grid-template-columns:1.05fr .95fr}
  .ph-contact{grid-template-columns:.8fr 1.2fr}
  .ph-panes{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}
  .ph-foot__top{grid-template-columns:1.6fr 1fr 1fr 1fr}
  .ph-auth{grid-template-columns:1fr 1.05fr}
  .ph-auth__aside{display:flex;flex-direction:column}
}
@media (min-width:1060px){
  .ph-nav{display:flex}
  .ph-burger{display:none}
}
@media (max-width:1059px){
  .ph-head__act > .ph-btn{display:none}
}

/* ── Checkout de WooCommerce ─────────────────────────────────── */
.ph-steps-bar{display:flex;gap:.5rem;margin:0 0 2rem;padding:0;list-style:none;flex-wrap:wrap}
.ph-steps-bar li{flex:1 1 8rem;display:flex;align-items:center;justify-content:center;gap:.625rem;
  padding:.8125rem 1rem;font-size:.875rem;font-weight:600;color:var(--mute);
  background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-pill);white-space:nowrap}
.ph-steps-bar li span{display:grid;place-items:center;inline-size:1.5rem;block-size:1.5rem;
  border-radius:50%;font-family:var(--fs);font-size:.75rem;background:var(--paper-3);flex:none}
.ph-steps-bar li.is-done{color:var(--ink-2)}
.ph-steps-bar li.is-now{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.ph-steps-bar li.is-now span{background:rgba(255,255,255,.24);color:#fff}

.woocommerce form .form-row label{font-size:.9375rem;font-weight:600;margin-bottom:.375rem;display:block}
.woocommerce form .form-row .required{color:var(--accent);text-decoration:none}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select{background:var(--paper-2);color:var(--ink);border:1px solid var(--line-2);
  border-radius:var(--r);padding:.9375rem 1.125rem;font:400 1rem/1.4 var(--fs)}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-2)}
.woocommerce .select2-container--default .select2-selection--single{
  background:var(--paper-2);border:1px solid var(--line-2);border-radius:var(--r);height:auto;padding:.75rem 1.125rem}
.woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered{color:var(--ink);line-height:1.4;padding:0}
.woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow{top:50%;transform:translateY(-50%);right:14px}
.select2-dropdown{background:var(--paper-2);border:1px solid var(--line-2);border-radius:var(--r);color:var(--ink)}
.select2-container--default .select2-results__option--highlighted[aria-selected]{background:var(--accent);color:#fff}
.woocommerce table.shop_table{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--paper-2)}
.woocommerce table.shop_table td,.woocommerce table.shop_table th{border-color:var(--line);color:var(--ink)}
.woocommerce .button,.woocommerce button.button,.woocommerce a.button,.woocommerce input.button,
.woocommerce #respond input#submit{background:var(--accent)!important;color:#fff!important;
  border-radius:var(--r-pill)!important;font-weight:600!important;padding:1rem 1.75rem!important}
.woocommerce .button:hover,.woocommerce a.button:hover{background:#4A38F5!important}
.woocommerce-info,.woocommerce-message,.woocommerce-error{
  border-top-color:var(--accent)!important;background:var(--paper-2)!important;color:var(--ink)!important;border-radius:var(--r)!important}
.woocommerce-checkout #payment{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-lg)}
.woocommerce-checkout #payment ul.payment_methods{border-bottom:1px solid var(--line)}
/* La pasarela impone fondo blanco a su formulario con !important: es su iframe.
   No se pelea con eso; se le da marco para que se lea intencional. */
.woocommerce-checkout #payment div.payment_box.payment_method_keycop_gateway{
  border:1px solid var(--line-2)!important;border-radius:var(--r)!important;padding:1rem!important;margin-top:.75rem!important}
.woocommerce-checkout #payment div.payment_box.payment_method_keycop_gateway::before{display:none!important}
.woocommerce .cart-collaterals{display:flow-root}
@media (min-width:900px){
/* Bricks marca el formulario como .brxe-container y lo pone en columna:
     hay que declarar la dirección o las dos columnas se apilan. */
  .ph-woo form.checkout{display:flex;flex-direction:row;flex-wrap:nowrap;gap:2.5rem;align-items:flex-start}
  .ph-woo #customer_details{flex:1 1 auto;min-width:0}
  .ph-woo #order_review{flex:0 0 23rem;width:23rem;position:sticky;top:calc(var(--bar) + 1.5rem)}
  .ph-woo #order_review_heading{display:none}
}

/* ═══ Portada y palabras ═════════════════════════════════════ */

/* Retícula del hero: texto, fotografía y la línea de datos cruzando ambas. */
.ph-hero__grid{display:grid;gap:clamp(2.5rem,5vw,3.5rem)}
/* Junto a la fotografía el titular dispone de ~700 px: al cuerpo de .ph-d1
   (80 px) cada línea se parte en dos. Se baja la escala en vez de partirlo. */
.ph-hero h1{margin-block:1.25rem 1.5rem}
.ph-hero .ph-d1{font-size:clamp(2.25rem,4.2vw,3.5rem);line-height:1.04}
.ph-shot img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--paper-3)}

/* Los datos duros: una línea de cifras con su filete, no una cinta de casillas. */
.ph-datos{padding-top:1rem;border-top:1px solid var(--line-2);
  font-size:.9375rem;line-height:1.9;color:var(--ink-2);
  font-variant-numeric:tabular-nums lining-nums}
.ph-datos b{font-weight:600;color:var(--ink);white-space:nowrap}
.ph-datos__sep{margin-inline:.4375rem;color:var(--mute-2)}

/* Tres fotografías con su dato, encabezando la tabla de palabras. */
.ph-fotos{display:grid;gap:clamp(1.75rem,3.5vw,2.25rem);margin-bottom:clamp(3rem,6vw,4.5rem)}
.ph-foto img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
  border:1px solid var(--line);border-radius:var(--r);background:var(--paper-3)}
.ph-foto h3{margin-top:1rem;font-size:1.125rem;letter-spacing:-.02em}
.ph-foto p{margin-top:.375rem;font-size:.9375rem;line-height:1.6;color:var(--ink-2)}

/* Tabla de traducción: término a la izquierda, español normal a la derecha. */
.ph-tra{width:100%;border-collapse:collapse;text-align:start}
.ph-tra th,.ph-tra td{text-align:start;vertical-align:baseline;
  padding:1.125rem 1.5rem 1.125rem 0;border-bottom:1px solid var(--line)}
.ph-tra thead th{padding-block:.625rem;border-bottom:1px solid var(--ink);
  font-family:var(--fs);font-size:.8125rem;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-2)}
.ph-tra tbody th{width:24%;padding-inline-end:2rem;font-family:var(--fd);font-weight:600;font-size:1.0625rem;
  font-variation-settings:"wdth" 90;letter-spacing:-.02em;color:var(--ink)}
/* La celda ocupa todo el ancho para que el filete llegue al borde, pero el
   texto se corta a 54ch: a plena anchura el renglón llegaba a 105 caracteres. */
.ph-tra td{font-size:.9375rem;line-height:1.6;color:var(--ink-2)}
.ph-tra td span{display:block;max-width:46ch}
.ph-tra tbody tr:last-child th,.ph-tra tbody tr:last-child td{border-bottom:0}

/* Las cuatro comprobaciones de «Antes de comprar».
   OJO con el nombre: `.ph-check` ya era la casilla de verificación del tema
   (acceso y alta). Un componente nuevo NUNCA reutiliza una clase existente. */
.ph-antes{margin:0;padding:0;list-style:none;border-top:1px solid var(--line-2)}
.ph-antes__i{display:grid;gap:.375rem;padding-block:clamp(1.25rem,3vw,1.75rem);
  border-bottom:1px solid var(--line)}
.ph-antes__i h3{font-size:clamp(1.125rem,1.8vw,1.375rem);letter-spacing:-.022em}
.ph-antes__i p{font-size:1rem;line-height:1.62;color:var(--ink-2);max-width:52ch}

@media (max-width:559px){
  /* Una tabla de dos columnas no cabe a 375: cada fila pasa a bloque. */
  /* El encabezado se retira de la vista pero se queda en el árbol de
     accesibilidad; sacarlo con left:-9999px alargaría la caja a la izquierda. */
  .ph-tra thead{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
    overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .ph-tra tbody th,.ph-tra tbody td{display:block;width:auto;padding-inline-end:0}
  .ph-tra tbody th{padding-bottom:.375rem;border-bottom:0}
  .ph-tra tbody td{padding-top:0}
}
@media (min-width:620px){
  .ph-fotos{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:820px){
  .ph-antes__i{grid-template-columns:minmax(0,20rem) minmax(0,1fr);
    gap:.375rem clamp(2rem,5vw,4rem);align-items:baseline}
}
@media (min-width:940px){
  .ph-hero__grid{grid-template-columns:minmax(0,1fr) minmax(0,22rem);
    align-items:start;column-gap:clamp(2.5rem,5vw,4.5rem)}
  .ph-datos{grid-column:1 / -1}
}

/* ── Cabecera del alta ─────────────────────────────────────────
   El formulario de expediente es largo y empezaba con medio millar de
   píxeles vacíos. Aquí el espacio dice qué tener a la mano antes de
   empezar, que es lo único útil en ese momento. */
.ph-mast{background:var(--ink);color:var(--paper);
  padding-block:calc(var(--bar) + clamp(2.5rem,5vw,4rem)) clamp(2.5rem,5vw,4rem)}
.ph-mast__in{display:grid;gap:clamp(2rem,4vw,3.5rem);align-items:center}
.ph-mast h1{margin-top:1.25rem;font-size:clamp(2rem,4vw,3.25rem);letter-spacing:-.032em;line-height:1.05}
.ph-mast h1 > span{display:block}
.ph-mast__d{margin-top:1.125rem;max-width:48ch;font-size:clamp(1rem,1.3vw,1.125rem);
  line-height:1.6;color:rgba(246,245,241,.72)}

.ph-mast__lista{display:grid;margin-top:clamp(1.75rem,3.5vw,2.5rem);
  border-top:1px solid rgba(246,245,241,.16)}
.ph-mast__lista li{display:grid;gap:.1875rem;padding-block:.9375rem;
  border-bottom:1px solid rgba(246,245,241,.16)}
.ph-mast__lista b{font-family:var(--fd);font-weight:600;font-size:1rem;
  font-variation-settings:"wdth" 92;letter-spacing:-.015em;color:var(--paper)}
.ph-mast__lista span{font-size:.9375rem;line-height:1.55;color:rgba(246,245,241,.66)}

.ph-mast__foto img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
  border-radius:var(--r-lg);border:1px solid rgba(246,245,241,.14)}

/* Con cabecera, el contenedor deja de centrar verticalmente a pantalla completa */
.ph-auth__main--mast{display:block;min-height:0;padding:0 0 clamp(3rem,6vw,4.5rem)}
/* Alineado con la cabecera, no centrado por su cuenta: si no, el eje del
   formulario cae 170 px a la derecha del titular y se nota. */
.ph-auth__main--mast .ph-auth__box{margin:clamp(2.5rem,5vw,3.5rem) 0 0}

@media (min-width:900px){
  .ph-mast__in{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
  .ph-mast__lista li{grid-template-columns:minmax(0,16rem) minmax(0,1fr);
    gap:.1875rem clamp(1.5rem,3vw,2.5rem);align-items:baseline}
}

/* ── Acceso: partición horizontal ──────────────────────────────
   Sin panel lateral. La franja va arriba a todo lo ancho y el
   formulario debajo, en el mismo eje. */
.ph-mast--slim .ph-mast__txt{max-width:52rem}
.ph-mast--slim{padding-block:calc(var(--bar) + clamp(2rem,4vw,3rem)) clamp(2rem,4vw,3rem)}

.ph-datos--dark{border-top-color:rgba(246,245,241,.22);color:rgba(246,245,241,.7);
  margin-top:clamp(1.75rem,3.5vw,2.5rem);max-width:none}
.ph-datos--dark b{color:var(--paper)}
.ph-datos--dark .ph-datos__sep{color:rgba(246,245,241,.4)}

/* El correo, primero y con cuerpo mayor */
.ph-in--lg{font-size:1.125rem;padding-block:1.125rem}

.ph-login__row{display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;
  justify-content:space-between;align-items:center;margin-bottom:1.75rem}
.ph-login__olvido{font-size:.875rem;color:var(--ink-2);
  text-decoration:underline;text-underline-offset:3px}
.ph-login__olvido:hover{color:var(--ink)}

@media (min-width:900px){
  .ph-mast--slim .ph-mast__in{grid-template-columns:1fr}
}

/* Cuerpo del acceso: formulario y ayuda, ambos sobre papel */
.ph-login__body{display:grid;gap:clamp(2.5rem,5vw,4rem);
  padding-block:clamp(2.5rem,5vw,3.5rem) clamp(3rem,6vw,4.5rem)}
.ph-login__body .ph-auth__box{margin:0;max-width:28rem}
.ph-login__ayuda h2{font-size:1.125rem;letter-spacing:-.02em;margin-bottom:1.25rem}
.ph-login__ayuda dl{margin:0;border-top:1px solid var(--line)}
.ph-login__ayuda dt{font-family:var(--fd);font-weight:600;font-size:.9375rem;
  font-variation-settings:"wdth" 92;letter-spacing:-.012em;color:var(--ink);padding-top:1rem}
.ph-login__ayuda dd{margin:.25rem 0 0;padding-bottom:1rem;border-bottom:1px solid var(--line);
  font-size:.9375rem;line-height:1.55;color:var(--ink-2);max-width:44ch}
.ph-login__ayuda a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}

@media (min-width:900px){
  .ph-login__body{grid-template-columns:minmax(0,28rem) minmax(0,1fr);align-items:start}
}


/* ── Controles homologados ─────────────────────────────────────
   Campo, selector y boton de formulario miden lo mismo y alinean por
   arriba y por abajo. Sin esto, un boton de 62 px junto a un campo de
   50 sobresale 12 px y se ve mal construido. */
.ph-in,.ph-sel{block-size:var(--ctrl);padding-block:0}
.ph-ta{block-size:auto}
form .ph-btn{block-size:var(--ctrl);padding-block:0}

/* ── Franja fotográfica de las pantallas de cuenta ─────────────
   La franja de acceso, recuperar y clave nueva lleva la fotografía del
   sitio con velo de tinta; el registro conserva su lámina a dos columnas. */
.ph-mast--slim{position:relative;overflow:hidden}
.ph-mast__fondo{position:absolute;inset:0;z-index:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 40%}
.ph-mast__velo{position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(21,22,26,.95) 0%,rgba(21,22,26,.92) 46%,
                             rgba(21,22,26,.86) 68%,rgba(21,22,26,.46) 100%)}
.ph-mast--slim > .ph-mast__in{position:relative;z-index:2}

/* ── El alta POR PASOS ─────────────────────────────────────────
   El único de las ocho casas que se llena de a un paso: cada tramo se abre
   y se cierra por su cabecera, con el número al margen. Los tres vienen
   abiertos en el HTML, así que quien no tenga guion puede enviar igual. */
.ph-vh{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap}
.ph-paso{border:1px solid var(--line);border-radius:var(--r-lg);
  margin-bottom:1rem;background:var(--paper-2, #fff);overflow:hidden}
.ph-paso__s{display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;gap:1rem;cursor:pointer;list-style:none;
  padding:clamp(1rem,2vw,1.375rem) clamp(1rem,2.5vw,1.75rem)}
.ph-paso__s::-webkit-details-marker{display:none}
.ph-paso__s::after{content:"";inline-size:10px;block-size:10px;
  border-inline-end:2px solid var(--mute);border-block-end:2px solid var(--mute);
  transform:rotate(45deg);margin-block-end:4px}
.ph-paso[open] .ph-paso__s::after{transform:rotate(-135deg);margin-block:4px 0}
.ph-paso__n{inline-size:2rem;block-size:2rem;display:grid;place-items:center;
  border-radius:999px;background:var(--accent);color:#fff;
  font-weight:700;font-variant-numeric:tabular-nums lining-nums}
.ph-paso__x b{display:block;font-size:1.0625rem;letter-spacing:-.015em;line-height:1.3}
.ph-paso__x span{display:block;margin-top:.1875rem;font-size:.9375rem;color:var(--mute)}
.ph-paso__c{padding:0 clamp(1rem,2.5vw,1.75rem) clamp(1.25rem,2.5vw,1.75rem)}
.ph-paso__c .ph-fieldset{margin-bottom:0}
.ph-alta form,.ph-alta .ph-auth__alt{max-width:none}

/* El rótulo oculto es un `legend`, y `.ph-fieldset legend{width:100%}` le
   ganaba en especificidad: se quedaba a 1440 px y empujaba el lienzo 185 px
   hacia la derecha. Se iguala la especificidad. */
.ph-fieldset legend.ph-vh{inline-size:1px;max-inline-size:1px;margin:0;padding:0}

/* Los pasos ocupan el ancho del encabezado de arriba: una caja de 44rem al
   pie de una cabecera a todo lo ancho deja el costado en blanco y se lee
   como una sección a medio cargar. */
.ph-alta .ph-auth__box--wide,
.ph-auth__main--mast .ph-auth__box--wide{max-width:none}

/* La cabecera de las pantallas de cuenta arrancaba un canalón antes que el
   contenido de abajo, porque su interior no lleva el mismo relleno que el
   wrap del sitio. Se iguala para que titular y formulario compartan la x. */
.ph-auth-page .ph-mast__in{padding-inline:var(--gut)}

/* ── Marcas de aceptación de pago ──────────────────────────────
   Logotipos reales. Cada casa las presenta a su manera; lo que no
   cambia es la marca. */
/* Las dos marcas comparten UNA sola pastilla blanca, que es el gesto de este
   sitio: todo va en pastilla. A color, que es como deben ir sobre papel. */
.ph-pays{display:flex}
.ph-pays__chip{display:inline-flex;align-items:center;gap:.875rem;
  background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:.5rem 1rem}
.ph-pay--visa{inline-size:3rem;block-size:.9375rem}
.ph-pay--mc{inline-size:1.75rem;block-size:1.125rem}

/* ── Ritmo vertical de una pantalla de cuenta ──────────────────
   El defecto: DOS contenedores pagaban el relleno inferior y sólo uno el
   superior. `.ph-auth__main--mast` aportaba 0 arriba y 72 px abajo, y
   `.ph-login__body` otros 56 y 72; el cuerpo quedaba con 56 arriba contra
   144 abajo y se veía descentrado.

   La regla, no el parche: el aire lo define UN token y lo paga UN solo
   elemento, en los dos sentidos. El contenedor no paga ritmo; lo paga el
   cuerpo en las tres pantallas que lo tienen, y la caja en el alta, que no
   lo lleva. Así una pantalla nueva hereda el mismo aire sin decidir nada. */
:root{ --aire:clamp(3rem,6vw,4.5rem); }

.ph-auth__main--mast{padding-block:0}
.ph-login__body{padding-block:var(--aire)}
.ph-auth__main--mast .ph-auth__box{margin-block:var(--aire)}

/* El aire lo paga UN solo elemento por pantalla. En acceso, recuperar y
   clave nueva lo paga el cuerpo, así que la caja que va dentro no vuelve a
   pagarlo: si lo hace, su columna arranca 72 px más abajo que la de ayuda y
   las dos dejan de alinear. En el alta no hay cuerpo y sí lo paga la caja. */
.ph-login__body .ph-auth__box{margin-block:0}

/* En una pantalla de cuenta el aire inferior de la sección YA es la
   separación con el pie; el margen superior del pie lo duplicaba y dejaba
   72 px arriba contra 152 abajo. Sólo esta casa tiene ese margen. */
.ph-auth-page .ph-foot{margin-top:0}

/* ── pulido responsivo: --- pulido responsivo --- ──────────────
   El copyright del pie es un <small> sin regla propia: hereda el 0.8em
   del navegador y cae a 10.4 px dentro de una barra de 13. No era un
   valor mal elegido, era un valor que nadie eligió. */
.ph-foot__bar small{font-size:inherit}

@media (max-width:767px){
  /* Blancos de toque a 44 px SIN mover la maqueta: la superficie la pone
     un pseudo-elemento centrado, no el relleno. Medido antes: entre 15 y
     38 px, con el mínimo exigible en 24. */
  .ph-logo,.ph-login__olvido{position:relative}
  .ph-logo::after,.ph-login__olvido::after{content:"";position:absolute;top:50%;left:50%;
    translate:-50% -50%;inline-size:max(100%,2.75rem);block-size:2.75rem}
}

/* El retrato del héroe mide 800 px de archivo. Apilado ocupaba toda la
   columna —922 px a 1024, es decir 0.87×: AMPLIADO— porque la rejilla no
   pasaba a dos columnas hasta 1100. Se baja el quiebre a 940 y, mientras
   siga apilado, el retrato se acota a los mismos 22rem que tendrá luego. */
@media (max-width:939px){
  .ph-shot img{max-inline-size:22rem}
}

/* ── toque en listas: --- toque en listas --- ──────────────────
   Los enlaces del pie medían de 16 a 21 px y el conmutador de idioma se
   quedaba por debajo de 24 aunque tuviera superposición: entre vecinos
   pegados los recuadros se solapan y el de la derecha roba el toque. Aquí
   la separación de la lista se convierte en relleno del propio enlace, así
   que el blanco crece y el pie mide lo mismo. */
@media (max-width:767px){
  .ph-foot__col ul{gap:0}
  .ph-foot__col ul a{display:inline-block;padding-block:.375rem}
  .ph-foot address a,.ph-foot__bar a{display:inline-block;padding-block:.3125rem}
  .ph-lang{gap:0}
  /* Sin tocar el display: alguno es inline-flex con bandera, y
     forzarlo a inline-block descolocaba el icono. */
  .ph-lang a{padding:.5rem .625rem}
}

/* La foto del alta mide 1040 px de archivo. Apilada por debajo de 900
   ocupaba toda la columna —691 px a 768, o sea 1.50x— porque la rejilla
   no se parte hasta ahí. Se acota mientras siga apilada. */
@media (max-width:899px){
  .ph-mast__foto img{max-inline-size:30rem}
}

/* Una paridad no envejece: el sello «Precio de hace N min» era información
   de una tasa que se movía, y ya no se mueve. */
[data-quote-age]{display:none}


/* ══ Identificación · una tarjeta que se voltea ═══════════════════════
   Las caras se piden de una en una sobre el MISMO objeto, como cuando se
   le da la vuelta a la credencial en la mano. La cara apagada conserva su
   sitio en la maqueta —opacidad, no `display`— porque un campo obligatorio
   escondido cancela el envío en silencio. */
.ph-flip{grid-column:1/-1;margin-bottom:1.5rem}
.ph-flip__head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:.625rem}
.ph-flip__t{font-size:.875rem;font-weight:600;color:var(--ink)}
.ph-flip__n{font-size:.75rem;letter-spacing:.09em;text-transform:uppercase;color:var(--mute);
  font-variant-numeric:tabular-nums}
.ph-flip__box{position:relative;height:16rem;perspective:1400px}
.ph-flip__f{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:.625rem;text-align:center;padding:1.25rem;cursor:pointer;
  border:1px dashed var(--line-2);background:var(--paper-2);backface-visibility:hidden;
  transition:opacity .5s ease,transform .5s ease,border-color .2s}
.ph-flip__f:hover{border-color:var(--accent)}
.ph-flip__f input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.ph-flip__f--b{transform:rotateY(180deg);opacity:0;pointer-events:none}
.ph-flip.is-vuelta .ph-flip__f--a{transform:rotateY(-180deg);opacity:0;pointer-events:none}
.ph-flip.is-vuelta .ph-flip__f--b{transform:none;opacity:1;pointer-events:auto}
.ph-flip__art{color:var(--accent);line-height:0}
.ph-flip__t2{font-size:.9375rem;font-weight:600;color:var(--ink)}
.ph-flip__h{font-size:.8125rem;color:var(--mute);max-width:22rem;line-height:1.4}
.ph-flip__pv{display:none;max-height:8.5rem;max-width:88%;object-fit:contain;border:1px solid var(--line-2)}
.ph-flip__f.is-set{border-style:solid;border-color:var(--ok)}
.ph-flip__f.is-set .ph-flip__art{display:none}
.ph-flip__f.is-set .ph-flip__pv{display:block}
.ph-flip__f.is-set.is-pdf .ph-flip__art{display:block}
.ph-flip__f.is-set.is-pdf .ph-flip__pv{display:none}
.ph-flip__f.is-bad{border-style:solid;border-color:var(--bad)}
.ph-flip__f.is-bad .ph-flip__h{color:var(--bad)}
.ph-flip__pie{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:.75rem}
.ph-flip__ir{background:none;border:0;padding:0;font:inherit;font-size:.8125rem;color:var(--accent);
  text-decoration:underline;text-underline-offset:.2em;cursor:pointer}
.ph-flip__say{display:flex;align-items:center;gap:.5rem;font-size:.8125rem;color:var(--mute);min-height:1.25rem}
.ph-flip__say.is-ok{color:var(--ok)}
.ph-flip__say.is-bad{color:var(--bad)}