/* Precios v3 — página completa.
   Consume tokens.css + base.css + components.css.
   Fuente visual: Precios.dc.html:195-539 (comportamiento en su dc-script, 656-916).

   Cinco notas de traducción del template a CSS:

   1. El único ternario de ancho que toca esta página es `mob = w < 760` (Precios.dc.html:793):
      decide tabla o tarjetas, el padding del bloque superior y sus huecos. La base es el caso
      móvil y hay una media query para el resto. Los demás valores del dc-script (dispNav,
      dispBurger, planCols…) son del chrome o de secciones que el template no llegó a pintar.
   2. La comparativa del template tiene cuatro columnas —la cuarta, «Concierge», es un plan
      inventado—; aquí son las que haya en BD (tres en es y en us). El número lo pasa la vista en
      --pc-cols y el min-width del bloque queda en 780px (200 + 3×160 y aire; la primera columna
      creció para etiqueta+logo), en vez de los 880px que el template necesitaba para cuatro.
   3. Los estados que el template calcula en JS —panel del selector abierto, país elegido,
      resultado vacío, acordeón del FAQ— son aquí clases y el atributo [hidden], que mueven
      modules/countrypick.js, modules/faqfilter.js y modules/accordion.js.
   4. Las escenas animadas de los beneficios y el brillo del distintivo RECOMENDADO son keyframes
      de esta página (helmet del template, líneas 44-53): solo existen aquí, así que viven en este
      fichero y no en base.css.
   5. El tooltip es nuestro (modules/tooltip.js): el template usaba tippy + popper por CDN, que la
      v3 no carga. Los estilos de la caja son los del tema `setroi` del template (línea 40-41).
*/

/* ---------- keyframes de página (helmet del template: Precios.dc.html:44-53) ---------- */
@keyframes dcSheen{0%,60%{background-position:220% 0,0 0}100%{background-position:-120% 0,0 0}}
@keyframes pcFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes pcPing{0%{box-shadow:0 0 0 0 rgba(46,139,87,.4)}70%{box-shadow:0 0 0 8px rgba(46,139,87,0)}100%{box-shadow:0 0 0 0 rgba(46,139,87,0)}}
@keyframes pcSway{0%,100%{transform:translateX(-50%) rotate(-3.5deg)}50%{transform:translateX(-50%) rotate(-1deg) translateY(-4px)}}
@keyframes pcChipA{0%,100%{transform:rotate(-7deg) translateY(0)}50%{transform:rotate(-8.5deg) translateY(-5px)}}
@keyframes pcChipB{0%,100%{transform:rotate(6deg) translateY(0)}50%{transform:rotate(7.5deg) translateY(-6px)}}
@keyframes pcChipC{0%,100%{transform:rotate(-4deg) translateY(0)}50%{transform:rotate(-2.5deg) translateY(-4px)}}
@keyframes pcPop{0%,64%,100%{transform:scale(1)}72%{transform:scale(1.25)}82%{transform:scale(1)}}

/* ---------- primitivas de la página ---------- */
/* cabecera de sección (Precios.dc.html:362-366, 435-439, 472-476) */
.pc-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px}
.pc-head__eyebrow{margin:0;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--c-brand)}
.pc-head__title{margin:0;font-size:clamp(26px,4vw,34px);font-weight:700;line-height:1.2;letter-spacing:-.02em;text-wrap:balance}
.pc-head__accent{color:var(--c-brand)}
.pc-head__text{margin:0;font-size:16px;line-height:1.55;color:var(--c-secondary);max-width:560px;text-wrap:pretty}
.pc-head__text--full{max-width:none}

/* enlace de cierre (Precios.dc.html:536) */
.pc-link{align-self:center;display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;color:var(--c-brand);border-bottom:1px solid var(--c-border-success);padding-bottom:2px;transition:all .15s}
.pc-link:hover{color:var(--c-green-text);border-color:var(--c-brand)}
.pc-link i{font-size:12px;line-height:1}

/* botones de plan (Precios.dc.html:288-291). No son .btn-cta: el del template es de ancho
   completo, con variante contorno y variante gris para ventas. */
.pc-btn{width:100%;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:7px;text-align:center;border-radius:var(--r-btn);padding:11px;font-size:13px;font-weight:600;transition:background .15s,border-color .15s,color .15s,transform .12s,box-shadow .15s}
.pc-btn i{font-size:12px;line-height:1}
.pc-btn:active{transform:scale(.98)}
.pc-btn--outline{background:var(--c-white);border:1.5px solid var(--c-brand);color:var(--c-brand)}
.pc-btn--outline:hover{background:var(--c-tint-badge);border-color:var(--c-green-text);color:var(--c-green-text);transform:translateY(-1px);box-shadow:0 6px 14px rgba(46,139,87,.18)}
.pc-btn--solid{background:var(--g-cta);color:var(--c-white);padding:12px;box-shadow:0 5px 16px rgba(46,139,87,.3)}
.pc-btn--solid:hover{background:linear-gradient(180deg,#3bb172,#2d8a56);color:var(--c-white);transform:translateY(-1px);box-shadow:0 9px 22px rgba(46,139,87,.42)}
.pc-btn--ghost{background:var(--c-white);border:1.5px solid var(--c-border-input);color:#3c4a41}
.pc-btn--ghost:hover{border-color:var(--c-brand);color:var(--c-green-text);background:var(--c-tint-selected);transform:translateY(-1px);box-shadow:0 6px 14px rgba(23,49,31,.1)}
.pc-btn--block{display:flex;border-radius:11px;padding:12px;font-size:14px}
.pc-btn--block.pc-btn--solid{padding:13px}

/* distintivo RECOMENDADO con brillo (Precios.dc.html:243) */
.pc-badge{align-self:flex-start;background:linear-gradient(110deg,rgba(255,255,255,0) 40%,rgba(255,255,255,.65) 50%,rgba(255,255,255,0) 60%),var(--g-gold);background-size:220% 100%,100% 100%;background-repeat:no-repeat;animation:dcSheen 4.5s ease-in-out infinite;color:var(--c-amber-text);font-size:9px;font-weight:700;border-radius:5px;padding:2px 8px}
.pc-badge--lg{align-self:center;font-size:9.5px;padding:3px 10px}

/* ---------- 1 · bloque superior: hero, selector y comparativa (Precios.dc.html:195-355) ---------- */
.pc-top{background:linear-gradient(180deg,#f7faf8 0%,#f7faf8 72%,#fff 100%);background-image:radial-gradient(700px 420px at 12% -60px,rgba(127,214,163,.35),rgba(127,214,163,0) 65%),radial-gradient(760px 460px at 88% -80px,rgba(46,139,87,.22),rgba(46,139,87,0) 65%),radial-gradient(1100px 520px at 50% -120px,#e7f0e9,rgba(231,240,233,0) 60%),linear-gradient(180deg,#f7faf8 0%,#f7faf8 72%,#fff 100%);background-repeat:no-repeat}
/* .container ya pone el padding lateral; aquí se le añade el vertical del template */
.pc-top__inner{padding:36px clamp(18px,4vw,28px) 40px;display:flex;flex-direction:column;gap:32px}

/* 1.1 · hero (Precios.dc.html:200-204) */
.pc-hero{display:flex;flex-direction:column;gap:16px;align-items:center;text-align:center;animation:dcFadeUp .5s ease .06s backwards}
.pc-hero__eyebrow{margin:0;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--c-brand)}
.pc-hero__title{margin:0;font-size:clamp(30px,4.8vw,46px);font-weight:700;line-height:1.12;letter-spacing:-.02em;max-width:780px;text-wrap:balance}
.pc-hero__grad{background:linear-gradient(92deg,#1e5c3a,#2e8b57 55%,#7fd6a3);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.06em;margin-right:-.06em}
.pc-hero__lead{margin:0;font-size:clamp(15px,1.6vw,18px);line-height:1.55;color:var(--c-secondary);max-width:560px;text-wrap:pretty}

/* 1.2 · selector de país (Precios.dc.html:207-227). El template coloca el panel con floating-ui;
   aquí basta con centrarlo bajo la pastilla, que siempre está centrada en la columna. */
.pc-pick{display:flex;justify-content:center;position:relative;z-index:45;margin-top:-10px;animation:dcFadeUp .5s ease .12s backwards}
.pc-pick__trigger{display:flex;align-items:center;gap:10px;background:var(--c-white);border:1px solid var(--c-border-card);border-radius:14px;padding:11px 22px 11px 12px;font-family:inherit;font-size:15px;color:#3c4a41;cursor:pointer;box-shadow:0 2px 10px rgba(23,36,28,.06);transition:border-color .15s ease,box-shadow .15s ease}
.pc-pick__trigger:hover{border-color:var(--c-brand);box-shadow:0 3px 10px rgba(23,36,28,.06)}
.pc-pick__trigger:active{transform:scale(.99)}
.pc-pick__globe{width:32px;height:32px;border-radius:50%;background:var(--c-tint-badge);display:flex;align-items:center;justify-content:center;flex:none}
.pc-pick__globe i{font-size:16px;color:var(--c-green-text);line-height:1}
.pc-pick__label{color:var(--c-muted)}
.pc-pick__flag{border-radius:3px;font-size:15px}
.pc-pick__country{font-weight:700}
.pc-pick__chev{font-size:14px;color:var(--c-muted);line-height:1}

/* centrado con left/right+margin auto, NO con translateX(-50%): dcPop anima transform y lo
   pisaría durante la entrada — el panel abría pegado a la derecha y saltaba al centro al acabar */
.pc-pick__panel{position:absolute;top:calc(100% + 6px);left:0;right:0;margin-inline:auto;width:max-content;background:var(--c-white);border:1px solid var(--c-border-card);border-radius:var(--r-sub);box-shadow:0 12px 32px rgba(23,36,28,.14);padding:6px;display:flex;flex-direction:column;min-width:240px;max-width:min(320px,calc(100vw - 36px));z-index:40;animation:dcPop .15s ease}
.pc-pick__panel[hidden]{display:none}
.pc-pick__search{border:1px solid var(--c-border-input);border-radius:var(--r-input);padding:8px 11px;font-size:13px;font-family:inherit;outline:none;margin:2px 2px 6px;box-sizing:border-box}
.pc-pick__search:focus{border-color:var(--c-brand);box-shadow:var(--sh-focus)}
.pc-pick__list{max-height:250px;overflow:auto;display:flex;flex-direction:column}
.pc-pick__row{display:flex;align-items:center;gap:9px;padding:9px 12px;border-radius:var(--r-input);font-size:13px;color:var(--c-body);cursor:pointer;transition:background .12s ease}
.pc-pick__row:hover{background:#f2f4f2;color:var(--c-body)}
.pc-pick__row[hidden]{display:none}
.pc-pick__row.is-selected{background:var(--c-tint-selected);font-weight:600}
.pc-pick__row .fi{border-radius:2px;font-size:12px;flex:none}
.pc-pick__empty{padding:10px 12px;font-size:12.5px;color:var(--c-muted)}
.pc-pick__empty[hidden]{display:none}

/* 1.3-1.5 · bloque de planes intercambiable: mientras countrypick.js pide otro país el cuerpo
   baja de opacidad y el velo pinta un spinner centrado encima (opacidad + spinner, no el
   skeleton del legacy). El min-height evita que la página colapse si el cuerpo se vaciara. */
.pc-plans{position:relative}
.pc-plans__body{transition:opacity .2s ease}
.pc-plans.is-loading .pc-plans__body{opacity:.35;pointer-events:none;user-select:none}
.pc-plans.is-loading{min-height:220px}
.pc-plans__loader{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:3;pointer-events:none}
.pc-plans__loader[hidden]{display:none}
.pc-plans__spin{width:36px;height:36px;border-radius:50%;border:3px solid rgba(46,139,87,.22);border-top-color:#2e8b57;animation:pcSpin .7s linear infinite}
@keyframes pcSpin{to{transform:rotate(360deg)}}

/* 1.3 · país sin precios: la tarjeta va sola y centrada, con el ancho de una tarjeta móvil */
.pc-solo{display:flex;justify-content:center}
.pc-solo__card{width:min(420px,100%)}
.pc-solo__list{margin:0;padding:4px 18px 6px;list-style:none;display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--c-divider)}
.pc-solo__item{display:flex;align-items:flex-start;gap:9px;font-size:13px;line-height:1.5;color:var(--c-secondary);padding-top:8px}
.pc-solo__item svg{flex:none;margin-top:1px}

/* ---------- 2 · comparativa en rejilla (Precios.dc.html:232-294) ---------- */
/* base = caso móvil del template: manda .pc-cards */
.pc-comp{display:none}
/* la primera columna va más ancha que el 150-185 original para que etiqueta + logo quepan en una
   línea (petición 2026-08-18); el min-width del bloque sube a la par */
.pc-comp__grid{display:grid;grid-template-columns:minmax(200px,250px) repeat(var(--pc-cols,3),minmax(160px,1fr));min-width:780px;background:var(--c-white);border:1px solid var(--c-border-card);border-radius:20px;overflow:hidden;box-shadow:0 2px 10px rgba(23,36,28,.05)}
.pc-comp__corner{padding:22px 18px;display:flex;align-items:flex-end;font-size:12.5px;font-weight:600;color:var(--c-secondary)}
.pc-comp__head{padding:22px 18px;display:flex;flex-direction:column;gap:4px;justify-content:flex-end}
.pc-comp__head.is-featured{padding:20px 18px;gap:5px;background:radial-gradient(220px 130px at 88% -25%,rgba(127,214,163,.38),transparent 70%),radial-gradient(260px 150px at -5% 115%,rgba(46,139,87,.45),transparent 70%),linear-gradient(150deg,#1d3d27,#122a19);color:var(--c-white)}
.pc-comp__plan{margin:0;font-size:18px;font-weight:700;font-family:'Bricolage Grotesque',sans-serif;color:var(--c-ink);display:flex;align-items:center;gap:8px}
.pc-comp__head.is-featured .pc-comp__plan{color:var(--c-white)}
.pc-comp__ico{width:27px;height:27px;border-radius:var(--r-input);background:linear-gradient(180deg,#eef8f2,#dcefe4);border:1px solid #cde5d7;box-shadow:inset 0 1px 0 rgba(255,255,255,.9);color:#257a4a;display:inline-flex;align-items:center;justify-content:center;flex:none}
.pc-comp__head.is-featured .pc-comp__ico{background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.08));border:1px solid rgba(255,255,255,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.18);color:#c8ecd8}

.pc-comp__label{padding:15px 18px;font-size:13px;border-top:1px solid var(--c-divider);display:flex;align-items:center;gap:7px;font-weight:600;color:#3c4a41}
.pc-comp__cell{padding:15px 18px;font-size:13px;color:var(--c-secondary);border-top:1px solid var(--c-divider);display:flex;align-items:center;gap:7px}
.pc-comp__cell.is-featured{border-top:1px solid rgba(46,139,87,.14);background:var(--c-tint-selected);font-weight:600;color:var(--c-ink)}
.pc-comp__yes{font-size:13px;color:#3c4a41}
.pc-comp__cell.is-featured .pc-comp__yes{font-weight:600;color:var(--c-ink)}

/* fila de precio (Precios.dc.html:250-253) */
.pc-comp__cell--price{gap:2px;flex-direction:column;align-items:flex-start;justify-content:center}
.pc-price{display:flex;align-items:baseline;gap:6px}
.pc-price__amount{font-size:21px;font-weight:700;font-family:'Bricolage Grotesque',sans-serif;color:var(--c-ink)}
/* sufijo /mes discreto (petición 2026-08-18); hereda el baseline del flex del precio */
.pc-price__per{font-size:11.5px;font-weight:600;color:var(--c-muted);margin-left:-3px}
/* código ISO junto al importe en divisas cuyo símbolo se presta a confusión («$ … MXN»);
   en la tarjeta móvil el precio no es flex, de ahí el margen propio */
.pc-price__code{font-size:11px;font-weight:700;letter-spacing:.03em;color:var(--c-secondary);margin-left:-2px}
.pc-card__val .pc-price__code{margin-left:4px;font-size:10.5px}
.pc-card__per{font-size:11px;font-weight:600;color:var(--c-muted);margin-left:2px}
/* logos de los features (agencias, Google News, IA, medios): las medidas las trae el JSON inline;
   tope por si un svg viene sin ellas (26px deja pasar el height:25px de Europa Press). En la
   franja de comunes y en las tarjetas móviles van algo más contenidos */
.pc-media{max-width:90px;max-height:26px;width:auto;height:auto;object-fit:contain;flex:none;border-radius:4px}
.pc-media--strip{max-height:16px}
.pc-media--sm{max-width:64px;max-height:14px;vertical-align:middle;margin-left:6px}
.pc-warranty{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--c-muted);font-weight:500}
.pc-warranty svg{flex:none}

/* distintivos de agencia en las celdas de texto (Precios.dc.html:256-257): los isotipos
   cuadrados reales de Europa Press y EFE (agencia-*.png, 64×64 servidos a 16px) */
.pc-ag{width:16px;height:16px;border-radius:4px;object-fit:cover;vertical-align:middle;margin-right:5px;flex:none}
/* el de Europa Press es fondo blanco: hilo de borde para que no se funda con la celda */
.pc-ag--borde{outline:1px solid rgba(23,36,28,.14);outline-offset:-1px}
/* en la tabla la celda ya es flex con gap: el margen del modo inline sobraría */
.pc-comp__cell .pc-ag{margin-right:0}

/* filas de isotipos (cambios ronda 2): sustituyen las tiras de logos del JSON (IA junto a
   «Optimización para IA», buscadores junto a «Inclusión en Google News»); mismo cuadradito
   16px y mismo hueco que las agencias, sin solapar */
.pc-isos{display:inline-flex;align-items:center;gap:5px;flex:none;vertical-align:middle}
.pc-isos__logo{width:16px;height:16px;border-radius:4px;background:var(--c-white);outline:1px solid rgba(23,36,28,.14);outline-offset:-1px}
/* en el key móvil el span va pegado al texto de la etiqueta */
.pc-card__key .pc-isos{margin-left:6px}
/* variante celda (fila media_row de us): hasta 7 cabeceras + el recuento al lado — parte
   línea si no caben y el cursor avisa del tooltip con la lista */
.pc-isos--celda{flex-wrap:wrap;row-gap:4px;cursor:help}
/* el recuento lleva el punteado de .pc-tip: avisa de que la celda tiene tooltip */
.pc-isos__texto{white-space:nowrap;border-bottom:1px dotted var(--c-border-control);padding-bottom:1px}
.pc-card__val .pc-isos--celda{justify-content:flex-end}

/* franja «Incluido en todos los planes» (Precios.dc.html:279-286); los items no parten línea —
   los textos de BD se recortaron para caber en una (cambios ronda 2) */
.pc-comp__all{grid-column:1 / -1;border-top:1px solid var(--c-divider);background:var(--c-inset);padding:14px 18px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 20px}
.pc-comp__all-title{font-size:12.5px;font-weight:600;color:var(--c-secondary)}
.pc-comp__all-item{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:#3c4a41;white-space:nowrap}
.pc-comp__all-check{color:var(--c-brand);font-weight:700}
/* la misma franja bajo las tarjetas móviles (cambios ronda 2): tarjeta propia al final de la
   pila; vive dentro de .pc-cards, así que >=760 desaparece con ella */
.pc-comp__all--cards{border:1px solid var(--c-border-card);border-radius:18px;box-shadow:0 2px 10px rgba(23,36,28,.05)}

.pc-comp__cta-label{padding:15px 18px;border-top:1px solid var(--c-divider)}
.pc-comp__cell--cta.is-featured{flex-direction:column;gap:6px;align-items:stretch}

/* ---------- 2b · tarjetas de plan en móvil (Precios.dc.html:295-351) ---------- */
.pc-cards{display:flex;flex-direction:column;gap:18px}
.pc-card{background:var(--c-white);border:1px solid var(--c-border-card);border-radius:18px;overflow:hidden;box-shadow:0 2px 10px rgba(23,36,28,.05)}
.pc-card__head{padding:20px 20px 16px;display:flex;flex-direction:column;gap:4px;align-items:center;text-align:center}
.pc-card.is-featured .pc-card__head{gap:6px;background:radial-gradient(220px 130px at 88% -25%,rgba(127,214,163,.38),transparent 70%),radial-gradient(260px 150px at -5% 115%,rgba(46,139,87,.45),transparent 70%),linear-gradient(150deg,#1d3d27,#122a19);color:var(--c-white)}
.pc-card__name{margin:0;font-size:20px;font-weight:700;font-family:'Bricolage Grotesque',sans-serif;color:var(--c-ink)}
.pc-card.is-featured .pc-card__name{color:var(--c-white)}
.pc-card__sum{font-size:12px;color:var(--c-muted)}
.pc-card.is-featured .pc-card__sum{color:var(--c-dark-muted)}
.pc-card__row{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:12px 18px;border-top:1px solid var(--c-divider);font-size:12.5px}
.pc-card__key{color:var(--c-secondary)}
.pc-card__val{font-weight:600;color:var(--c-ink);text-align:right}
.pc-card__price{font-size:16px;font-family:'Bricolage Grotesque',sans-serif}
/* garantía bajo la fila de precio (cambios ronda 2): mismo sello que la celda de la tabla */
.pc-card__warranty{display:flex;justify-content:center;padding:0 18px 12px;margin-top:-2px}
.pc-card__foot{padding:16px 18px 18px;border-top:1px solid var(--c-divider)}

/* ---------- 3 · beneficios sobre blanco (Precios.dc.html:357-441) ---------- */
.pc-mid{background:var(--c-white)}
.pc-mid__inner{padding:clamp(64px,9vw,110px) clamp(18px,4vw,28px);display:flex;flex-direction:column;gap:clamp(56px,7vw,84px)}

.pc-ben{display:flex;flex-direction:column;gap:38px;max-width:1020px;margin:0 auto;width:100%}
.pc-ben__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:16px}
.pc-ben__card{background:var(--c-white);border:1px solid var(--c-border-card);border-radius:var(--r-card);box-shadow:0 1px 3px rgba(23,36,28,.05);padding:28px 26px 0;display:flex;flex-direction:column;gap:11px;overflow:hidden;transition:transform .2s ease,box-shadow .2s ease}
.pc-ben__card:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(23,36,28,.09)}
.pc-ben__title{margin:0;font-size:16.5px;font-weight:700;color:var(--c-ink)}
.pc-ben__text{margin:0;font-size:13.5px;color:var(--c-secondary);line-height:1.6;text-wrap:pretty}
/* el lienzo de cada escena sangra hasta el borde de la tarjeta (Precios.dc.html:371) */
.pc-scene{height:178px;position:relative;margin:16px -24px 0;overflow:hidden}

/* escena 1 · dos fichas de negocio (Precios.dc.html:372-388) */
.pc-scene__stack{position:absolute;left:34px;right:34px;top:16px;display:flex;flex-direction:column;gap:11px;transform:rotate(-2deg)}
.pc-mini{background:var(--c-white);border:1px solid #dfe7e1;border-radius:var(--r-sub);box-shadow:0 14px 28px rgba(23,49,31,.16);padding:11px 14px;display:flex;align-items:center;gap:10px}
.pc-mini--float{animation:pcFloat 4.5s ease-in-out infinite}
.pc-mini--off{background:var(--c-inset);border-color:var(--c-divider);box-shadow:none;opacity:.6}
.pc-mini__avatar{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#2e8b57,#1e5c3a);color:var(--c-white);font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;flex:none}
.pc-mini__avatar--off{background:#dfe5e0;color:var(--c-muted)}
.pc-mini__body{display:flex;flex-direction:column;line-height:1.3;min-width:0;flex:1}
.pc-mini__name{font-size:12.5px;font-weight:700;color:var(--c-ink)}
.pc-mini__name--off{color:var(--c-secondary)}
.pc-mini__meta{font-size:10.5px;color:var(--c-brand);font-weight:600}
.pc-mini__meta--off{color:var(--c-disabled);font-weight:400}
.pc-mini__tag{background:var(--c-tint-badge);color:var(--c-green-text);font-size:9.5px;font-weight:700;border-radius:var(--r-pill);padding:4px 10px;white-space:nowrap;animation:pcPing 2.8s ease-out infinite}

/* escena 2 · conversación con la IA (Precios.dc.html:395-398) */
.pc-chat{position:absolute;left:34px;right:34px;top:12px;display:flex;flex-direction:column;gap:10px}
.pc-chat__ask{align-self:flex-end;background:var(--c-green-ink);color:var(--c-tint-badge);border-radius:14px 14px 3px 14px;padding:9px 13px;font-size:11.5px;box-shadow:0 8px 20px rgba(23,49,31,.18);animation:pcFloat 5s ease-in-out infinite}
.pc-chat__ans{align-self:flex-start;background:var(--c-white);border:1px solid #dfe7e1;border-radius:14px 14px 14px 3px;padding:10px 14px;font-size:11.5px;color:var(--c-body);line-height:1.55;box-shadow:0 10px 24px rgba(23,49,31,.12);max-width:90%;animation:pcFloat 5s ease-in-out 1.4s infinite}
.pc-chat__ia{color:var(--c-brand);font-weight:700}
.pc-chat__you{color:var(--c-green-text)}

/* escena 3 · recorte de prensa y etiquetas (Precios.dc.html:405-416) */
.pc-clip{position:absolute;left:50%;top:14px;transform:translateX(-50%) rotate(-3deg);width:200px;background:var(--c-white);border:1px solid #dfe7e1;border-radius:var(--r-btn);box-shadow:0 14px 30px rgba(23,49,31,.16);overflow:hidden;animation:pcSway 6s ease-in-out infinite}
.pc-clip__bar{background:linear-gradient(135deg,#2e8b57,#1e5c3a);color:var(--c-white);font-size:8.5px;font-weight:800;letter-spacing:.12em;padding:5px 10px}
.pc-clip__body{padding:10px 12px;display:flex;flex-direction:column;gap:5px}
.pc-clip__title{font-size:10.5px;font-weight:700;color:var(--c-ink);line-height:1.3}
.pc-clip__line{height:4px;background:var(--c-divider);border-radius:2px}
.pc-clip__line--m{width:82%}
.pc-clip__line--s{width:64%}
.pc-tagfly{position:absolute;background:var(--c-white);border:1px solid #dfe7e1;border-radius:var(--r-pill);padding:5px 12px;font-size:10px;font-weight:700;color:var(--c-green-text);box-shadow:0 8px 18px rgba(23,49,31,.14)}
.pc-tagfly--a{left:6%;top:24px;transform:rotate(-7deg);animation:pcChipA 4s ease-in-out infinite}
.pc-tagfly--b{right:5%;top:40px;transform:rotate(6deg);animation:pcChipB 4.6s ease-in-out .7s infinite}
.pc-tagfly--c{right:12%;bottom:12px;transform:rotate(-4deg);animation:pcChipC 5.2s ease-in-out 1.4s infinite}

/* escena 4 · las tres garantías (Precios.dc.html:423-427) */
.pc-guar{position:absolute;left:34px;right:34px;top:14px;background:var(--c-white);border:1px solid #dfe7e1;border-radius:14px;box-shadow:0 14px 28px rgba(23,49,31,.12);padding:13px;display:flex;flex-direction:column;gap:9px}
.pc-guar__row{display:flex;align-items:center;gap:9px;background:var(--c-page);border-radius:var(--r-btn);padding:8px 11px}
.pc-guar__check{width:18px;height:18px;border-radius:50%;background:var(--c-brand);color:var(--c-white);font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;flex:none;animation:pcPop 3.6s ease-in-out infinite}
.pc-guar__check--0{animation-delay:0s}
.pc-guar__check--1{animation-delay:.35s}
.pc-guar__check--2{animation-delay:.7s}
.pc-guar__text{font-size:11.5px;font-weight:600;color:var(--c-ink)}

/* ---------- 4 · Publicaciones de clientes (Precios.dc.html:443-465) ---------- */
/* Tarjetas solo-foto: los recortes (pubs, 640×814) son ≈4:5, de ahí ese ratio y no el 3:4 del template.
   El margen negativo del scroller deja respirar la sombra y asomar las tarjetas vecinas sin
   romper la retícula, y los veils sustituyen al mask-image del template (patrón home.css:133). */
.pc-pubs{display:flex;flex-direction:column;gap:30px;max-width:1180px;margin:0 auto;width:100%}
.pc-pubs__wrap{display:flex;flex-direction:column;gap:14px}
.pc-pubs__scroller{position:relative;margin:0 -14px}
.pc-pubs__track{gap:18px;padding:4px 14px 40px}
.pc-pubs__veil{position:absolute;top:0;bottom:0;width:46px;pointer-events:none}
.pc-pubs__veil--left{left:0;background:linear-gradient(90deg,var(--c-white),rgba(255,255,255,0))}
.pc-pubs__veil--right{right:0;background:linear-gradient(270deg,var(--c-white),rgba(255,255,255,0))}
/* Medidas del template (Precios.dc.html:452 y pubCardW en 863): 236px en móvil, 286px en
   escritorio y relación 3/4. El 4/5 que había era un desliz de la conversión —el comentario
   ya citaba el template para el ancho, pero la proporción se quedó por el camino—.
   La tarjeta es el div y la foto va dentro (2026-08-21): un <img> como ítem flex arrastra su
   tamaño intrínseco —min-width:auto lo planta en sus 640px de ancho y el stretch del eje
   cruzado le impone los 814 de alto, ignorando el aspect-ratio—, que es como se rompió. Es el
   mismo montaje del carrusel de recortes de la Home. */
.pc-pubs__card{width:236px;flex:none;aspect-ratio:3/4;border-radius:18px;overflow:hidden;background-color:var(--c-green-ink);box-shadow:0 14px 34px rgba(23,49,31,.16)}
.pc-pubs__img{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- 5 · FAQ con buscador (Precios.dc.html:467-503) ---------- */
.pc-faq{display:flex;flex-direction:column;gap:28px;max-width:900px;margin:0 auto;width:100%}
.pc-faq__search-wrap{display:flex;flex-direction:column;align-items:center;gap:8px}
.pc-faq__search{position:relative;width:min(480px,100%)}
.pc-faq__search i{position:absolute;left:16px;top:50%;transform:translateY(-50%);font-size:15px;color:var(--c-muted);line-height:1}
.pc-faq__input{width:100%;box-sizing:border-box;background:var(--c-white);border:1px solid var(--c-border-input);border-radius:var(--r-sub);padding:13px 16px 13px 42px;font-size:14px;font-family:inherit;outline:none;transition:border-color .15s,box-shadow .15s}
.pc-faq__input:focus{border-color:var(--c-brand);box-shadow:var(--sh-focus)}
.pc-faq__note{font-size:12px;color:var(--c-muted);min-height:1em}
.pc-faq__box{background:var(--c-white);border:1px solid var(--c-border-card);border-radius:var(--r-card);box-shadow:0 1px 3px rgba(23,36,28,.05);padding:6px 26px;display:flex;flex-direction:column}
.pc-faq__list{display:flex;flex-direction:column}
.pc-faq__item{border-top:1px solid var(--c-divider)}
/* el separador lo pierde la primera pregunta VISIBLE, que recalcula faqfilter.js */
.pc-faq__item.is-first{border-top:0}
.pc-faq__item[hidden]{display:none}
.pc-faq__q{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;padding:19px 0;background:none;border:0;font-family:inherit;text-align:left;cursor:pointer}
.pc-faq__q-text{font-size:15px;font-weight:600;color:var(--c-ink);transition:color .15s}
.pc-faq__q:hover .pc-faq__q-text{color:var(--c-green-text)}
.pc-faq__sign{width:27px;height:27px;border-radius:50%;border:1px solid var(--c-border-input);background:var(--c-white);color:var(--c-ink);display:flex;align-items:center;justify-content:center;font-size:16px;flex:none;line-height:1;transition:all .2s ease}
.pc-faq__q[aria-expanded="true"] .pc-faq__sign{transform:rotate(45deg);background:var(--c-brand);border-color:var(--c-brand);color:var(--c-white)}
.pc-faq__a{padding:0 44px 20px 0;font-size:14px;color:var(--c-secondary);line-height:1.6;text-wrap:pretty}
.pc-faq__a p{margin:0 0 10px}
.pc-faq__a p:last-child{margin-bottom:0}
.pc-faq__empty{padding:26px 0;text-align:center;font-size:13.5px;color:var(--c-muted)}
.pc-faq__empty[hidden]{display:none}
.pc-faq__more{margin-top:14px;text-align:center;font-size:13.5px;color:var(--c-muted)}
.pc-faq__more a{color:var(--c-brand);text-decoration:underline;text-underline-offset:2px}
.pc-faq__empty-link{color:var(--c-brand);font-weight:600}

/* ---------- 6 · opiniones en vídeo (Precios.dc.html:505-574) ---------- */
.pc-ops{background:#f7faf8}
.pc-ops__inner{padding:clamp(64px,9vw,110px) clamp(18px,4vw,28px);display:flex;flex-direction:column;gap:34px}
.pc-ops__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:18px;align-items:stretch;max-width:1020px;margin:0 auto;width:100%}
.pc-ops__col{display:flex;flex-direction:column;gap:16px}

.pc-op{background:var(--c-white);border:1px solid var(--c-border-card);border-radius:var(--r-card);overflow:hidden;display:flex;flex-direction:column;transition:transform .15s,box-shadow .15s}
.pc-op:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(23,49,31,.14)}
/* cuadrada 1:1, como todas las tarjetas de reseña del sitio (petición 2026-08-19) */
.pc-op__media{position:relative;aspect-ratio:3/3;min-height:300px;overflow:hidden;background:var(--c-page)}
.pc-op__ph{position:absolute;inset:0}
.pc-op__photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 22%;display:block}
.pc-op__play{position:absolute;right:16px;bottom:16px;width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.94);display:flex;align-items:center;justify-content:center;color:var(--c-green-text);box-shadow:0 8px 24px rgba(46,139,87,.32);pointer-events:none;transition:transform .15s;z-index:1}
/* Hover como en la Home: pasar por cualquier punto de la tarjeta agranda el chip (solo con vídeo). */
.pc-op__play.setroi-video-popup:hover,
.pc-op__media:hover .pc-op__play.setroi-video-popup{transform:scale(1.08)}
/* Velo inferior (30% de alto) para que el chip de play no se pierda sobre fotos claras. */
.pc-op__media::after{content:"";position:absolute;left:0;right:0;bottom:0;height:30%;background:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0));pointer-events:none}
.pc-op__play i{font-size:18px;line-height:1}
.pc-op__play.setroi-video-popup{pointer-events:auto;cursor:pointer}
.pc-op__body{padding:18px 22px 20px;display:flex;flex-direction:column;gap:10px;flex:1}
.pc-op__stars{display:flex;gap:2px;color:#f7cd6b;font-size:12px;line-height:1}
.pc-op__stars-off{color:var(--c-border-input)}
.pc-op__quote{margin:0;font-size:15px;line-height:1.55;color:var(--c-ink);font-weight:500;flex:1;text-wrap:pretty}
.pc-op__sign{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;border-top:1px solid var(--c-divider);padding-top:12px}
.pc-op__name{font-size:13.5px;font-weight:600;color:var(--c-ink)}
.pc-op__role{font-size:12px;color:var(--c-muted)}

.pc-opm{background:var(--c-white);border:1px solid var(--c-border-card);border-radius:14px;padding:14px;display:flex;gap:14px;align-items:center;flex:1;transition:transform .15s,box-shadow .15s}
.pc-opm:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(23,49,31,.12)}
/* pulgar cuadrado de 90px, mismo 1:1 que el resto de tarjetas de reseña (2026-08-19) */
.pc-opm__media{position:relative;width:90px;aspect-ratio:3/3;border-radius:var(--r-btn);overflow:hidden;flex:none;background:var(--c-page)}
.pc-opm__ph{position:absolute;inset:0}
.pc-opm__photo{width:100%;height:100%;object-fit:cover;object-position:center 22%;display:block}
.pc-opm__play{position:absolute;right:7px;bottom:7px;width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.94);display:flex;align-items:center;justify-content:center;color:var(--c-green-text);box-shadow:0 3px 10px rgba(46,139,87,.24);pointer-events:none;transition:transform .15s;z-index:1}
.pc-opm__play.setroi-video-popup:hover,
.pc-opm__media:hover .pc-opm__play.setroi-video-popup{transform:scale(1.08)}
.pc-opm__media::after{content:"";position:absolute;left:0;right:0;bottom:0;height:30%;background:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0));pointer-events:none}
.pc-opm__play i{font-size:11px;line-height:1}
.pc-opm__play.setroi-video-popup{pointer-events:auto;cursor:pointer}
.pc-opm__body{display:flex;flex-direction:column;gap:5px;min-width:0}
.pc-opm__quote{margin:0;font-size:13px;line-height:1.5;color:var(--c-body);text-wrap:pretty}
.pc-opm__sign{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
.pc-opm__name{font-size:12.5px;font-weight:600;color:var(--c-ink)}
.pc-opm__role{font-size:11.5px;color:var(--c-muted)}

/* ---------- 7 · tooltips (Precios.dc.html:40-41 y 249-285) ---------- */
/* el disparador lleva el subrayado punteado del template */
.pc-tip{border-bottom:1px dotted var(--c-border-control);cursor:help;padding-bottom:1px}
.pc-warranty.pc-tip{border-bottom-color:#c3ccc6}
/* en la franja de comunes el subrayado va en el texto, no en la fila entera */
.pc-comp__all-item.pc-tip{border-bottom:0;padding-bottom:0}
.pc-comp__all-item.pc-tip .pc-comp__all-text{border-bottom:1px dotted var(--c-border-control);padding-bottom:1px}
/* la caja la crea modules/tooltip.js y la coloca en coordenadas de documento */
.pc-tooltip{position:absolute;z-index:70;max-width:280px;background:var(--c-ink);color:var(--c-white);font-family:var(--font-body);font-size:11.5px;font-weight:500;line-height:1.45;border-radius:var(--r-check);padding:6px 10px;pointer-events:none;animation:dcPop .12s ease}
.pc-tooltip__arrow{position:absolute;width:8px;height:8px;background:var(--c-ink);transform:rotate(45deg)}
.pc-tooltip--top .pc-tooltip__arrow{bottom:-4px}
.pc-tooltip--bottom .pc-tooltip__arrow{top:-4px}

/* ---------- responsive ----------
   >=760: caso no-`mob` del template (Precios.dc.html:793): manda la tabla y el bloque superior
   recupera su padding y su hueco grandes. */
@media (min-width:760px){
  .pc-top__inner{padding:clamp(54px,8vw,90px) clamp(18px,4vw,28px) clamp(40px,6vw,64px);gap:44px}
  .pc-cards{display:none}
  /* el contenedor de la tabla desplaza en horizontal cuando no cabe (Precios.dc.html:233) */
  .pc-comp{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;animation:dcFadeUp .55s ease .18s backwards}
  /* La tarjeta grande de opiniones se parte en dos columnas, como la destacada de Opiniones v3
     (customer-reviews.css:131): un retrato 3:4 a todo el ancho la dejaría el doble de alta que la
     columna de tarjetas pequeñas de al lado. Así la foto rellena el alto que dé la fila y
     object-fit la recorta. */
  .pc-op{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:stretch}
  .pc-op__media{aspect-ratio:auto;height:100%}
  .pc-op__body{justify-content:center}
  .pc-pubs__card{width:286px}
}

/* Banda tablet (iPad): la tabla a tamaño completo mide 780px de mínimo y desborda — columnas y
   paddings algo más compactos para que los tres planes quepan enteros sin scroll lateral. */
@media (min-width:760px) and (max-width:991px){
  .pc-comp__grid{grid-template-columns:minmax(150px,190px) repeat(var(--pc-cols,3),minmax(128px,1fr));min-width:0}
  .pc-comp__corner,.pc-comp__head{padding:18px 13px}
  .pc-comp__head.is-featured{padding:16px 13px}
  .pc-comp__label,.pc-comp__cell{padding:13px 13px;font-size:12.5px}
  .pc-comp__plan{font-size:16px}
  .pc-price__amount{font-size:19px}
  .pc-media{max-width:74px;max-height:22px}
}

/* El template detiene las escenas cuando se pide no ver movimiento (Precios.dc.html:54). */
@media (prefers-reduced-motion:reduce){
  .pc-badge,.pc-mini--float,.pc-mini__tag,.pc-chat__ask,.pc-chat__ans,.pc-clip,.pc-tagfly,.pc-guar__check{animation:none}
  .pc-hero,.pc-pick,.pc-comp{animation:none}
  /* el spinner sigue girando —es el indicador de carga—, pero más lento y sin fundido */
  .pc-plans__body{transition:none}
  .pc-plans__spin{animation-duration:1.4s}
}