/* =============================================================================
   Mento Agency · politica-de-datos.css (solo /politica-de-datos/)
   Se carga después de sitio.css. Todo lo propio de esta página lleva el prefijo
   pd-; los componentes compartidos solo se ajustan dentro de .pd-* para no tocar
   otras páginas. Tono: tranquilo y legible (crema y blanco, texto navy, ~70ch).

   01 Héroe (m en trazo + tarjeta "En pocas palabras" en arco)
   02 Lo esencial (4 datos de ley en arcos)
   03 Cuerpo: índice fijo + texto legal
   04 Piezas del texto: ficha, definiciones, derechos, canales, trámites, cierre
   05 Responsive
   06 Impresión
   ========================================================================== */


/* ---------- 01 Héroe ----------------------------------------------------- */
/* La m del logo en tono sobre tono (crema profundo): misma firma, versión tranquila.
   Se apoya en el borde inferior, detrás de la tarjeta, sin cruzar texto ni botones. */
.pd-hero{--pd-m:min(80vw,1120px)}
.pd-hero .page-hero-m{fill:var(--crema-200);width:var(--pd-m);right:calc(-.2 * var(--pd-m));top:auto;bottom:calc(-.24 * var(--pd-m))}
.pd-h1{font-size:clamp(2.3rem,6.4vw,5.75rem);margin:.42em 0 .38em}
.pd-h1 .thin{letter-spacing:-.04em}

/* Fechas de la política en dos píldoras */
.pd-meta{display:flex;flex-wrap:wrap;gap:.5rem .6rem;margin-top:1.5rem}
.pd-meta li{font-size:var(--fs-xs);font-weight:600;letter-spacing:.02em;color:var(--navy);background:#fff;border:1.5px solid var(--navy);border-radius:var(--r-pill);padding:.4rem .9rem;line-height:1.35}

/* Tarjeta resumen: reutiliza .wc (tope en arco) sobre navy */
.pd-hero-media{max-width:440px}
.pd-resumen{padding-bottom:clamp(1.75rem,3vw,2.5rem);box-shadow:16px 16px 0 var(--amarillo)}
.pd-resumen .wc-top{padding-bottom:1rem}
.pd-resumen .wc-top .ico{width:58px;height:58px}
.pd-resumen-h{font-size:clamp(1.5rem,2.2vw,1.9rem);letter-spacing:-.035em;line-height:1.1;color:#fff}
.pd-resumen .checks{margin:1.1rem 0 0;gap:.8rem}
.pd-resumen .checks li{font-size:.9375rem;line-height:1.45;font-weight:500;color:var(--crema)}
.pd-hero-media .sticker{left:-9%;top:-5%}
.pd-mt{display:flex;justify-content:flex-start;margin-top:2.25rem}


/* ---------- 02 Lo esencial ----------------------------------------------- */
.pd-cifras{grid-template-columns:repeat(4,minmax(0,1fr))}
.pd-cifras .fig strong{font-size:clamp(2.2rem,26cqi,4.5rem)}
.pd-cifras .fig span{font-weight:400}
.pd-cifras .fig b{font-weight:700}
.pd-cifras .fig.s-blanco strong,.pd-cifras .fig.s-crema strong{color:var(--azul)}
@media (min-width:901px){.pd-cifras .fig{aspect-ratio:1/1.08}}


/* ---------- 03 Cuerpo: índice + texto ------------------------------------ */
.pd-layout{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:clamp(2rem,5vw,5.5rem);align-items:start}
.pd-toc{position:sticky;top:calc(var(--hdr-h) + env(safe-area-inset-top, 0px) + 1.5rem);border-radius:var(--r-card);padding:1.5rem 1.25rem 1.25rem 1.5rem;max-height:calc(100vh - var(--hdr-h) - 3rem);overflow-y:auto;overscroll-behavior:contain}
.pd-toc .label{margin-bottom:.9rem}
.pd-toc ol{display:grid;gap:.1rem}
.pd-toc a{display:grid;grid-template-columns:2rem minmax(0,1fr);gap:.4rem;align-items:baseline;padding:.4rem .5rem;margin-inline:-.5rem;border-radius:10px;color:var(--navy);font-size:.90625rem;font-weight:500;line-height:1.35;text-decoration:none;transition:background-color .2s}
.pd-toc a span{font-size:.8125rem;font-weight:700;color:var(--azul);font-variant-numeric:tabular-nums}
.pd-toc a:hover{background:var(--hover)}

.pd-prose{max-width:70ch;color:var(--gris)}
.pd-prose h2{display:flex;align-items:flex-start;gap:.85rem;font-size:clamp(1.55rem,2.5vw,2.15rem);margin-top:2em;padding-top:1.4em;border-top:1px solid var(--linea);text-wrap:balance}
.pd-prose > h2:first-child{margin-top:0;padding-top:0;border-top:0}
.pd-n{flex:none;display:grid;place-items:end center;width:44px;height:52px;padding-bottom:7px;margin-top:-.2rem;border-radius:var(--r-arch);background:var(--navy);color:var(--amarillo);font-size:.9375rem;font-weight:700;letter-spacing:0;line-height:1}
.pd-prose h3{font-size:1.1875rem;margin-top:1.6em}
.pd-prose h2 + p,.pd-prose h3 + p{margin-top:.75em}


/* ---------- 04 Piezas del texto ------------------------------------------ */
/* Ficha del responsable */
.pd-ficha{background:var(--crema);border-radius:22px;padding:.5rem clamp(1.1rem,2.5vw,1.75rem);margin-top:1.5em}
.pd-ficha > div{display:grid;grid-template-columns:minmax(0,13em) minmax(0,1fr);gap:.25rem 1.25rem;padding:.85rem 0;border-top:1px solid var(--linea)}
.pd-ficha > div:first-child{border-top:0}
.pd-ficha dt{font-size:var(--fs-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--navy);padding-top:.2em}
.pd-ficha dd{margin:0;font-weight:500;color:var(--navy);overflow-wrap:anywhere}

/* Definiciones en dos columnas */
.pd-defs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.1rem 2rem;margin-top:1.25em}
.pd-defs dt{font-weight:700;color:var(--navy)}
.pd-defs dd{margin:.15rem 0 0;font-size:var(--fs-sm);line-height:1.55}

/* Derechos: letras del artículo 8 en arcos */
.pd-prose .pd-derechos{list-style:none;padding-left:0;counter-reset:der;display:grid;gap:1rem}
.pd-derechos li{position:relative;counter-increment:der;padding-left:3.25rem;min-height:2.6rem}
.pd-prose .pd-derechos li + li{margin-top:0}
.pd-derechos li::before{content:counter(der,lower-alpha);position:absolute;left:0;top:.1rem;display:grid;place-items:end center;width:2.25rem;height:2.6rem;padding-bottom:.3rem;border-radius:var(--r-arch);background:var(--amarillo);color:var(--navy);font-weight:700;font-size:.9375rem;line-height:1}

/* Canales para ejercer derechos */
.pd-prose .pd-canales{list-style:none;padding-left:0;display:grid;gap:.6rem}
.pd-prose .pd-canales li + li{margin-top:0}
.pd-canales li{display:flex;align-items:flex-start;gap:.75rem;font-weight:500;color:var(--navy);overflow-wrap:anywhere}
.pd-canales .ico{width:22px;height:22px;margin-top:.15em;color:var(--azul)}

/* Consulta y reclamo: plazo en arco + pasos */
.pd-tramites{display:grid;gap:1.25rem;margin-top:1.75em}
.pd-tramite{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.25rem clamp(1.25rem,3vw,2rem);align-items:start;border-radius:26px;padding:clamp(1.25rem,3vw,2rem)}
.pd-plazo{width:112px;aspect-ratio:4/5;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding:0 .5rem 1rem;border-radius:999px 999px 18px 18px;background:var(--navy);color:#fff;text-align:center}
.pd-plazo strong{font-size:3.25rem;font-weight:800;letter-spacing:-.05em;line-height:.9;color:var(--amarillo)}
.pd-plazo span{font-size:.75rem;font-weight:600;line-height:1.25;margin-top:.35rem}
.pd-tramite-txt > * + *{margin-top:.75rem}
.pd-prose .pd-tramite h3{margin-top:0;font-size:clamp(1.5rem,2.4vw,1.9rem);letter-spacing:-.03em}
.pd-para{font-weight:500;color:var(--navy)}
.pd-tramite ul{font-size:var(--fs-sm);line-height:1.6}
.pd-tramite.s-amarillo li::marker{color:var(--navy)}

/* Cierre con WhatsApp */
.pd-prose > .pd-cierre{margin-top:clamp(3rem,6vw,4.5rem)}
.pd-cierre > p{font-size:clamp(1.45rem,2.4vw,2.1rem);max-width:16em}


/* ---------- 05 Responsive ------------------------------------------------ */
@media (max-width:1099px){
  .pd-layout{grid-template-columns:minmax(0,250px) minmax(0,1fr)}
  .pd-defs{grid-template-columns:1fr}
}
@media (max-width:900px){
  .pd-hero{--pd-m:150vw}
  .pd-hero .page-hero-m{right:-62%}
  .pd-hero-media{margin-top:1.5rem}
  .pd-hero-media .sticker{left:auto;right:-5%;top:-7%}
  .pd-cifras .fig:nth-child(n){margin-top:0}
  .pd-cifras .fig:nth-child(even){margin-top:2rem}
  .pd-cifras .fig span{font-size:.8125rem}
  .pd-layout{grid-template-columns:1fr}
  .pd-toc{position:static;max-height:none;overflow:visible}
  .pd-toc ol{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1.5rem}
}
@media (max-width:640px){
  /* A este ancho la m gigante solo dejaría dos franjas pálidas sueltas: se oculta, como en pauta y desarrollo web */
  .pd-hero .page-hero-m{display:none}
  /* Botones apilados a todo el ancho, como en el resto del sitio */
  .pd-hero .actions{flex-direction:column;align-items:stretch}
  .pd-toc ol{grid-template-columns:1fr}
  .pd-ficha > div{grid-template-columns:1fr}
  .pd-tramite{grid-template-columns:1fr}
  .pd-plazo{width:auto;aspect-ratio:auto;flex-direction:row;justify-content:flex-start;align-items:baseline;gap:.6rem;padding:.9rem 1.25rem;border-radius:var(--r-pill);justify-self:start}
  .pd-plazo strong{font-size:2.4rem}
  .pd-plazo span{margin-top:0;font-size:.875rem}
  .pd-prose h2{gap:.7rem}
  .pd-n{width:38px;height:45px;font-size:.875rem;padding-bottom:6px;margin-top:-.1rem}
}
/* Cifras en píldora cuando el arco ya no deja espacio al texto */
@media (max-width:640px){
  .pd-cifras{grid-template-columns:1fr;gap:.75rem}
  .pd-cifras .fig:nth-child(n){margin-top:0;aspect-ratio:auto;border-radius:var(--r-pill);display:grid;grid-template-columns:6.4rem minmax(0,1fr);align-items:center;column-gap:.9rem;padding:1rem 1.5rem}
  .pd-cifras .fig strong{font-size:2.1rem}
  .pd-cifras .fig span{margin-top:0;font-size:.875rem}
}
@media (max-width:360px){
  .pd-cifras .fig:nth-child(n){grid-template-columns:5.3rem minmax(0,1fr);column-gap:.7rem;padding:.9rem 1.15rem}
  .pd-cifras .fig strong{font-size:1.75rem}
}


/* ---------- 06 Impresión ------------------------------------------------- */
@media print{
  .pd-hero-media,.pd-esencial,.pd-cierre,.contact{display:none!important}
  .pd-hero .page-hero-m{display:none}
  .pd-layout{display:block}
  .pd-toc{position:static;margin-bottom:2rem}
  .pd-prose{max-width:none}
}