/* v3 components — recetas de chrome (topbar, header/nav, dropdown, botones). Consume tokens.css.
   Task 8 añade aquí las recetas de página (card, banner, input, etc). */

/* ---------- barra de oferta (partial v3/base/promo.php, por encima del topbar) ---------- */
/* Fuente: Home.dc.html:74-85, con los verdes translúcidos literales del template. */
.promo{position:relative;overflow:hidden;background:var(--c-ink);color:var(--c-white);text-align:center;padding:11px clamp(34px,6vw,48px);font-size:13.5px;line-height:1.5}
.promo[hidden]{display:none}
.promo__glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 60% 130% at 20% 50%,rgba(46,139,87,.35),transparent 60%),radial-gradient(ellipse 50% 120% at 80% 50%,rgba(127,214,163,.14),transparent 60%)}
.promo__sheen{position:absolute;top:0;bottom:0;left:-40%;width:40%;pointer-events:none;background:linear-gradient(105deg,transparent,rgba(127,214,163,.13) 45%,rgba(255,255,255,.1) 50%,rgba(127,214,163,.13) 55%,transparent);animation:promoSheen 5s ease-in-out infinite}
.promo b{font-weight:700}
.promo__code{display:inline-block;margin:0 4px;padding:2px 9px;border:1.5px dashed rgba(127,214,163,.65);border-radius:var(--r-check);color:var(--c-dark-check);font-family:'SF Mono',Menlo,Consolas,monospace;font-size:12.5px;font-weight:600;letter-spacing:.06em}
.promo__close{position:absolute;right:clamp(8px,2vw,18px);top:50%;transform:translateY(-50%);width:28px;height:28px;display:flex;align-items:center;justify-content:center;padding:0;border:0;border-radius:50%;background:transparent;color:rgba(255,255,255,.6);cursor:pointer;transition:color .15s,background .15s}
.promo__close:hover{color:var(--c-white);background:rgba(255,255,255,.1)}

/* ---------- chrome: barra de progreso + topbar + header en un único bloque sticky ----------
   Home.dc.html:87-212. El wrapper se oculta entero al bajar (navscroll.js pone --hidden), así
   que topbar y header suben juntos; abre en v3/base/topbar.php y cierra en v3/base/header.php. */
.chrome{position:sticky;top:0;z-index:50;transition:transform .28s ease}
.chrome--hidden{transform:translateY(-100%)}
.chrome__progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:80;pointer-events:none}
.chrome__progress-bar{height:100%;width:0%;background:linear-gradient(90deg,#7fd6a3,#35a065);box-shadow:0 0 8px rgba(127,214,163,.5)}

/* ---------- topbar (barra verde: país/idioma/moneda) ---------- */
.topbar{position:relative;z-index:55;background:var(--c-green-text)}
.topbar__inner{min-height:42px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.topbar__right{display:flex;align-items:center;gap:2px;flex-shrink:0}
.topbar__sep{width:1px;height:16px;background:var(--c-white-a20)}
.topbar__country{margin-left:-10px}
.topbar__currency{margin-right:-10px}
.topbar__country-label{font-size:12.5px;font-weight:500;color:var(--c-white-a80);white-space:nowrap}
.topbar__country-name{font-size:12.5px;font-weight:700;color:var(--c-white);white-space:nowrap}
.topbar__lang-code{font-size:12.5px;font-weight:600;color:var(--c-white)}
.topbar .dropdown__trigger{color:var(--c-white);background:transparent}
.topbar .dropdown__trigger:hover{background:var(--c-white-a12)}
.topbar .dropdown__trigger i{color:var(--c-white-a70)}
.topbar .fi{border-radius:2px}
.topbar__country .fi{font-size:13px;flex-shrink:0}
.topbar__lang .fi{font-size:12px;flex-shrink:0}
/* en móvil estrecho la fila no cabe entera («Publicar en Estados Unidos» + ES + moneda):
   cae el rótulo y el nombre de país largo se corta con elipsis */
@media (max-width:480px){
  .topbar__country-label{display:none}
  .topbar__country-name{max-width:110px;overflow:hidden;text-overflow:ellipsis}
}

/* ---------- dropdown genérico (país/idioma/moneda) ---------- */
.dropdown{position:relative}
.dropdown__trigger{display:flex;align-items:center;gap:8px;border:0;border-radius:var(--r-input);padding:7px 10px;font-size:12.5px;font-family:inherit;cursor:pointer;transition:background .15s}
.dropdown__trigger i{font-size:11px;line-height:1}
.topbar__lang,.topbar__currency{gap:7px}
/* capa de cierre que el template pinta delante del panel abierto (Home.dc.html:101/124/142):
   se traga el clic que cierra, en vez de dejarlo pasar al elemento de debajo */
.dropdown__scrim{position:fixed;inset:0;z-index:59}
.dropdown__panel{position:absolute;top:calc(100% + 8px);left:0;background:var(--c-white);border:1px solid var(--c-border-input);border-radius:var(--r-btn);box-shadow:var(--sh-pop);overflow:hidden;z-index:60;animation:dcPop .15s ease}
.dropdown__panel[hidden]{display:none}
.dropdown__panel--right{left:auto;right:0}
[data-dropdown-panel="paises"]{width:290px}
/* el panel de idioma no tiene buscador ni lista con scroll: rótulo + filas, con el padding
   en el propio panel (Home.dc.html:125-132) */
[data-dropdown-panel="idioma"]{width:200px;padding:6px}
[data-dropdown-panel="idioma"] .dropdown__list{max-height:none;overflow:visible;padding:0}
[data-dropdown-panel="idioma"] .dropdown__row{padding:9px 10px}
[data-dropdown-panel="moneda"]{width:300px}
[data-dropdown-panel="moneda"] .dropdown__list{max-height:260px}
[data-dropdown-panel="moneda"] .dropdown__row{gap:10px}
.dropdown__heading{font-size:11.5px;font-weight:600;color:var(--c-muted);padding:6px 10px 6px}
.dropdown__search{padding:8px;border-bottom:1px solid var(--c-divider)}
.dropdown__search input{width:100%;box-sizing:border-box;border:1px solid var(--c-border-input);border-radius:var(--r-input);padding:9px 12px;font-size:13.5px;font-family:inherit;outline:none;transition:border-color .15s}
.dropdown__search input:focus{border-color:var(--c-brand);box-shadow:var(--sh-focus)}
.dropdown__list{max-height:250px;overflow-y:auto;padding:6px}
.dropdown__row{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:var(--r-logo);font-size:13.5px;color:var(--c-body);cursor:pointer;text-align:left;transition:background .15s}
/* el display:flex le ganaría al [hidden] del navegador y el buscador no ocultaría filas */
.dropdown__row[hidden]{display:none}
.dropdown__row .fi{font-size:12px}
.dropdown__row:hover,.dropdown__row--selected{background:var(--c-tint-selected)}
.dropdown__empty{padding:14px 10px;font-size:12.5px;color:var(--c-muted);text-align:center}
.dropdown__empty[hidden]{display:none}
.dropdown__row-symbol{width:26px;flex-shrink:0;font-size:13.5px;font-weight:700;color:var(--c-ink);text-align:center}
.dropdown__row-text{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.dropdown__row-title{font-size:13px;font-weight:500;color:var(--c-body);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dropdown__row-sub{font-size:11.5px;color:var(--c-muted)}
.dropdown__row-check{font-size:14px;color:var(--c-brand);margin-left:auto}

/* ---------- nav (header blanco: logo, menú, acciones, burger) ----------
   No es sticky por sí mismo: va dentro de .chrome, que es quien se pega y se oculta. */
.nav{background:var(--c-white-a92);backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--c-divider)}
.nav__inner{height:66px;display:flex;align-items:center;gap:18px}
.nav__logo{display:flex;align-items:center;flex-shrink:0;overflow:hidden;width:106px;transition:opacity .15s,width .35s ease}
.nav__logo:hover{opacity:.75}
/* logo real (public/v3/images/logo.svg, 140×37): a 28px de alto el isotipo ocupa los primeros
   25px; al bajar de 70px el enlace se retrae y recorta la palabra — mismo gesto que
   Home.dc.html:172 + 1187-1188 hacía con el span de texto */
.nav__logo-img{height:28px;width:auto;max-width:none;display:block}
.chrome--compact .nav__logo{width:25px}
.nav__menu{flex:1;display:flex;align-items:center;justify-content:center;gap:22px}
.nav__pill{font-size:13.5px;font-weight:500;color:var(--c-body);transition:color .15s}
.nav__pill:hover{color:var(--c-green-text)}
.nav__pill--active{font-weight:600;color:var(--c-green-text);background:var(--c-tint-badge);border:1px solid var(--c-border-success);border-radius:var(--r-pill);padding:6px 14px}
.nav__actions{display:flex;align-items:center;gap:12px;margin-left:auto}
.nav__burger{display:none;align-items:center;justify-content:center;width:42px;height:42px;background:var(--g-cta);border:0;border-radius:14px;margin-left:auto;cursor:pointer;box-shadow:0 5px 16px rgba(46,139,87,.35);transition:transform .15s,box-shadow .15s}
.nav__burger:hover{transform:scale(1.05)}
.nav__burger:active{transform:scale(.94)}
.nav__burger-box{position:relative;width:18px;height:14px;display:block}
.nav__burger-bar{position:absolute;left:0;width:18px;height:2px;border-radius:2px;background:var(--c-white);transition:transform .25s ease,opacity .2s ease}
.nav__burger-bar:nth-child(1){top:0}
.nav__burger-bar:nth-child(2){top:6px;width:12px}
.nav__burger-bar:nth-child(3){top:12px}
.nav__burger[aria-expanded="true"] .nav__burger-bar:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav__burger[aria-expanded="true"] .nav__burger-bar:nth-child(2){opacity:0;transform:translateX(8px)}
.nav__burger[aria-expanded="true"] .nav__burger-bar:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.nav__mobile{display:none;flex-direction:column;gap:4px;padding:14px clamp(18px,4vw,28px) 20px;border-top:1px solid var(--c-divider);background:var(--c-white);animation:dcExpand .22s ease;overflow:hidden}
.nav--open .nav__mobile{display:flex}
.nav__mobile-link{font-size:15px;font-weight:500;color:var(--c-body);padding:12px 0}
/* mismo tratamiento que .nav__pill--active, adaptado a fila de lista; el margen negativo
   compensa el padding horizontal para que el texto quede alineado con el resto de opciones */
.nav__mobile-link--active{font-weight:600;color:var(--c-green-text);background:var(--c-tint-badge);border:1px solid var(--c-border-success);border-radius:var(--r-pill);padding:12px 16px;margin:0 -17px}
.nav__mobile-divider{height:1px;background:var(--c-divider);margin:8px 0}

/* ---------- botones ---------- */
.btn-cta{display:inline-flex;align-items:center;gap:7px;background:var(--g-cta);color:var(--c-white);border:0;border-radius:var(--r-btn);padding:10px 18px;font-size:13px;font-weight:600;cursor:pointer;box-shadow:var(--sh-cta);transition:transform .15s,box-shadow .15s}
.btn-cta:hover{transform:translateY(-1px);box-shadow:var(--sh-cta-hover);color:var(--c-white)}
.btn-cta i{font-size:12px;line-height:1}
/* los dos CTA del chrome (header y menú móvil) no son flex en el template: el icono va en línea
   con margin-left:7px y vertical-align:-1px (Home.dc.html:186 y 207). El resto de CTA de la
   página sí son flex con gap, por eso el cambio va acotado a estos dos. */
.nav__actions .btn-cta{display:inline-block}
.nav__actions .btn-cta i,.btn-cta--block i{display:inline-block;margin-left:7px;vertical-align:-1px}
.btn-cta--block{display:block;text-align:center;padding:15px;font-size:15px;border-radius:var(--r-sub)}

.btn-outline{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--c-border-input);border-radius:var(--r-btn);padding:9px 14px;font-size:13px;font-weight:600;color:var(--c-body);cursor:pointer;transition:all .15s}
.btn-outline:hover{border-color:var(--c-brand);color:var(--c-green-text)}
.btn-outline i{font-size:13px;line-height:1}
.btn-outline--block{display:flex;justify-content:center;padding:14px;font-size:14px}

/* ---------- responsive: el nav colapsa a burger en el mismo punto que el template
   (matchMedia('(max-width:960px)'), Home.dc.html:1032). El topbar y los paneles no cambian
   por ancho: el template no tiene media queries en ese bloque. ---------- */
@media (max-width:960px){
  .nav__menu,.nav__actions{display:none}
  .nav__burger{display:flex}
  /* Apertura/cierre animados (2026-08-19). El dcExpand original paraba en max-height:320px
     —el panel real mide ~420px y los botones del final aparecían de golpe— y el cierre con
     display:none no animaba nada. Transición de max-height (tope por encima del alto real),
     con padding y borde plegados también (sin box-sizing:border-box el padding no colapsa
     con max-height:0) y visibility retardada para que el cierre se vea antes de ocultar. */
  .nav__mobile{display:flex;animation:none;max-height:0;padding-top:0;padding-bottom:0;border-top-color:transparent;opacity:0;transform:translateY(-6px);visibility:hidden;transition:max-height .3s ease,padding .3s ease,border-top-color .3s ease,opacity .22s ease,transform .22s ease,visibility 0s linear .3s}
  .nav--open .nav__mobile{max-height:480px;padding-top:14px;padding-bottom:20px;border-top-color:var(--c-divider);opacity:1;transform:none;visibility:visible;transition:max-height .3s ease,padding .3s ease,border-top-color .3s ease,opacity .22s ease,transform .22s ease}
}
@media (prefers-reduced-motion:reduce){
  .nav__mobile{transition:none}
}

/* ---------- footer ---------- */
.footer{background:var(--c-green-ink);padding:clamp(40px,6vw,60px) 0 28px}
.footer__inner{display:flex;flex-direction:column;gap:42px}
.footer__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:32px}
.footer__col{display:flex;flex-direction:column;gap:12px}
.footer__brand{gap:14px}
.footer__logo{display:flex;align-items:center;width:fit-content}
.footer__logo-img{height:28px;width:auto;display:block}
.footer__tagline{font-size:12.5px;color:var(--c-dark-muted);line-height:1.55;max-width:260px;margin:0}
.footer__heading{font-size:11.5px;font-weight:600;color:var(--c-white);letter-spacing:.04em;text-transform:uppercase}
.footer__link{font-size:13px;color:var(--c-dark-muted);width:fit-content;transition:color .15s,transform .15s}
.footer__link:hover{color:var(--c-white);transform:translateX(3px)}
.footer__countries{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px}
.footer__country{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--c-dark-muted);min-width:0;transition:color .15s,transform .15s}
.footer__country:hover{color:var(--c-white);transform:translateX(3px)}
.footer__country .fi{border-radius:2px;font-size:11px;flex-shrink:0}
.footer__country-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.footer__divider{height:1px;background:rgba(255,255,255,.1)}
.footer__bottom{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.footer__copy{font-size:11.5px;color:var(--c-dark-muted)}
.footer__legal-mail{color:inherit;text-decoration:underline;text-underline-offset:2px}
.footer__legal-mail:hover{color:#fff}
.footer__payments{display:flex;align-items:center;gap:8px}
/* tarjetas reales (public/v3/images/payments/*-light.svg, 30×21 con su propio marco blanco);
   sustituyen a las chips de texto del template por petición del usuario (2026-08-17) */
.footer__pay-card{height:22px;width:auto;border-radius:3px;display:block}
/* chips de texto genéricas que reusará Precios (Task 8) — colores de marca de terceros,
   fuera del catálogo UI */
.pay-chip{width:34px;height:22px;border-radius:4px;background:var(--c-white);border:1px solid var(--c-border-chip);display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:700}
.pay-chip--visa{color:#1a1f71}
.pay-chip--mastercard{color:#eb001b}
.pay-chip--amex{color:#006fcf}
.pay-chip--paypal{color:#003087}

/* ---------- selectores del footer: «Publicar en» + «Idioma» (Home.dc.html:873-907) ----------
   Misma mecánica que los del topbar (modules/dropdown.js), pero con caja propia: el panel se
   abre hacia arriba desde el borde del contenedor, no hacia abajo desde el disparador. */
.footer__selects{position:relative;display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:2px}
.footer__select{display:inline-flex;align-items:center;gap:8px;background:transparent;border:1px solid rgba(255,255,255,.25);border-radius:var(--r-btn);padding:9px 14px;font-family:inherit;cursor:pointer;transition:all .15s}
.footer__select:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.45)}
.footer__select .fi{border-radius:2px;font-size:12px;flex-shrink:0}
.footer__select-label{font-size:12px;font-weight:500;color:var(--c-dark-muted)}
.footer__select-name{font-size:13px;font-weight:600;color:var(--c-white)}
.footer__select-chev{font-size:11px;line-height:1;color:rgba(255,255,255,.6);transition:transform .15s}
.footer__select[aria-expanded="true"] .footer__select-chev{transform:rotate(180deg)}
.footer__select-panel{position:absolute;bottom:calc(100% + 8px);left:0;width:230px;max-height:280px;overflow:auto;background:var(--c-white);border:1px solid var(--c-border-input);border-radius:var(--r-btn);box-shadow:0 12px 32px rgba(23,49,31,.2);z-index:60;padding:6px;animation:dcPop .15s ease}
.footer__select-panel[hidden]{display:none}
/* el panel de idioma no tiene scroll: cabe entero */
.footer__select-panel--lang{width:200px;max-height:none;overflow:hidden}
.footer__select-heading{font-size:11.5px;font-weight:600;color:var(--c-muted);padding:6px 10px 6px}
.footer__select-row{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:var(--r-logo);font-size:13.5px;color:var(--c-body);cursor:pointer;transition:background .15s}
.footer__select-row .fi{border-radius:2px;font-size:12px;flex-shrink:0}
.footer__select-row:hover,.footer__select-row--selected{background:var(--c-tint-selected);color:var(--c-body)}

/* ---------- reveal (scroll-in fade/slide, IntersectionObserver) ---------- */
/* Sin reglas: como en el template (Home.dc.html:1103-1124), el estado inicial y la transición
   los escribe reveal.js sobre el propio elemento medio segundo después de cargar. Hasta
   entonces —y siempre que el visitante haya pedido no ver movimiento— el contenido está
   visible, así que la página se lee entera aunque el módulo no llegue a ejecutarse. */

/* ---------- carousel (scroll-snap horizontal, drag, autoplay) ---------- */
[data-carousel]{display:flex;overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;cursor:grab;user-select:none}
[data-carousel]::-webkit-scrollbar{display:none}
[data-carousel]:active{cursor:grabbing}
[data-carousel] > *{scroll-snap-align:start;flex-shrink:0}
/* modo una-tarjeta (móvil): carousel.js aplica la clase y el padding simétrico */
.carousel--center > *{scroll-snap-align:center}
/* controles: flechas + puntos. Task 9 los dejó en pages/home.css porque solo había un
   carrusel; con tres (clippings, usos y opiniones) suben aquí. Los puntos los crea
   carousel.js como <div> dentro de [data-carousel-dots], igual que el template.
   carousel.js oculta la fila entera cuando solo hay una página. */
.carousel__controls{display:flex;align-items:center;justify-content:center;gap:16px}
.carousel__arrow{width:34px;height:34px;border-radius:50%;background:var(--c-white);border:1px solid var(--c-border-input);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--c-body);flex-shrink:0;transition:all .15s}
.carousel__arrow:hover{border-color:var(--c-brand);color:var(--c-green-text)}
/* en el extremo del scroller la flecha se apaga y deja de responder (Home.dc.html:1255-1258) */
.carousel__arrow.is-disabled{opacity:.35;pointer-events:none}
.carousel__arrow i{font-size:13px;line-height:1}
.carousel__dots{display:flex;align-items:center;gap:6px}
.carousel__dots > *{width:7px;height:7px;border-radius:var(--r-pill);background:var(--c-border-input);cursor:pointer;transition:all .25s}
.carousel__dots > *:hover{transform:scale(1.3)}
.carousel__dots > *.is-active{width:20px;background:var(--c-brand)}

/* ---------- Task 8: recetas de página (DESIGN-SYSTEM.md §5) ---------- */

/* ---------- card ---------- */
.card{background:var(--c-white);border:1px solid var(--c-border-card);border-radius:var(--r-card);padding:26px 32px;position:relative;transition:transform .2s,box-shadow .2s}
.card:hover{transform:translateY(-2px);box-shadow:var(--sh-pop)}
.card--featured{border-color:var(--c-brand)}
.card__sub{border:1px solid var(--c-border-chip);border-radius:var(--r-sub);padding:14px 16px}
.card__inset{background:var(--c-inset);border:1px solid var(--c-border-chip);border-radius:var(--r-sub);padding:14px 16px}

/* ---------- card dark (plan héroe / closing CTA) ---------- */
.card--dark{background:var(--g-dark-card);color:var(--c-white);border-radius:var(--r-card);padding:26px 24px;position:relative}
.card--dark .card__check{color:var(--c-dark-check)}
.card--dark .card__text-secondary{color:var(--c-dark-muted)}

/* ---------- badge flotante sobre card ---------- */
.badge-float{position:absolute;top:-10px;left:50%;transform:translateX(-50%);background:var(--c-brand);color:var(--c-white);font-size:11.5px;font-weight:600;border-radius:var(--r-pill);padding:4px 12px;white-space:nowrap;transition:transform .15s}
.badge-float:hover{transform:translateX(-50%) scale(1.08)}
.badge-float--gold{top:-12px;background:var(--g-gold);color:var(--c-amber-text);font-size:11px;font-weight:700;border-radius:var(--r-check);padding:4px 10px}

/* ---------- banner informativo ---------- */
.banner{display:flex;align-items:flex-start;gap:8px;background:var(--c-amber-bg);border:1px solid var(--c-amber-border);color:var(--c-amber-text);font-size:12.5px;border-radius:var(--r-btn);padding:12px 14px}
.banner--ok{background:var(--c-tint-selected);border-color:var(--c-border-success);color:var(--c-green-text)}
.banner--warn{background:var(--c-urgent-bg);border-color:var(--c-urgent);color:var(--c-urgent)}

/* ---------- input ---------- */
.input-group{display:flex;flex-direction:column;gap:6px}
.input-group__label{font-size:11.5px;font-weight:600;color:var(--c-body)}
.input{width:100%;box-sizing:border-box;border:1px solid var(--c-border-input);border-radius:var(--r-input);padding:13px 14px;font-size:14px;font-family:inherit;background:var(--c-white);color:var(--c-ink);transition:border-color .15s,box-shadow .15s}
.input:focus{border-color:var(--c-brand);box-shadow:var(--sh-focus);outline:none}
.input--error{border-color:var(--c-error)}
.input-group__error{font-size:12px;color:var(--c-error);animation:dcExpand .2s ease}

/* ---------- checkbox / radio custom ---------- */
.checkbox{width:20px;height:20px;flex-shrink:0;border:1.5px solid var(--c-border-control);border-radius:var(--r-check);background:var(--c-white);display:flex;align-items:center;justify-content:center;color:var(--c-white);font-size:12px;font-weight:700;line-height:1;cursor:pointer;transition:background .15s,border-color .15s}
.checkbox--checked{background:var(--c-brand);border-color:var(--c-brand)}
.radio{width:17px;height:17px;flex-shrink:0;border:1.5px solid var(--c-border-control);border-radius:50%;background:var(--c-white);cursor:pointer;transition:border .15s}
.radio--checked{border:5px solid var(--c-brand)}

/* ---------- fila seleccionable (planes, métodos de pago, add-ons) ---------- */
.row-select{border:1.5px solid var(--c-border-input);border-radius:var(--r-sub);padding:14px 16px;cursor:pointer;transition:all .15s;display:flex;align-items:center;gap:12px}
.row-select:hover{border-color:var(--c-brand);box-shadow:var(--sh-row)}
.row-select--selected{border-color:var(--c-brand);background:var(--c-tint-selected)}
.row-select__title{font-size:14px;font-weight:600;color:var(--c-ink)}
.row-select__desc{font-size:12.5px;color:var(--c-secondary)}
.row-select__price{margin-left:auto}

/* ---------- modal ---------- */
.modal-overlay{position:fixed;inset:0;background:var(--c-ink-a45);z-index:100;display:flex;align-items:center;justify-content:center;padding:20px}
.modal{background:var(--c-white);border-radius:var(--r-card);max-width:720px;width:100%;animation:dcPop .2s ease}
.modal__header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px 24px;border-bottom:1px solid var(--c-divider)}
.modal__title{font-size:18px;font-weight:700;color:var(--c-ink);margin:0}
.modal__close{margin-left:auto;cursor:pointer;color:var(--c-muted);transition:color .15s}
.modal__close:hover{color:var(--c-ink)}
.modal__body{padding:24px}

/* ---------- isotipos de pago (chips) ---------- */
/* .pay-chip y sus modificadores de color de marca (--visa/--amex/--mastercard/--paypal) están
   definidos junto a .footer__pay-chip más arriba (selector combinado) para no duplicar los
   hex de marca — ese bloque es la única fuente de los 4 colores de terceros del archivo. */

/* ---------- tarjeta de opinión: cuerpo general del sitio ---------- */
/* Decisión del 2026-08-17: manda la tarjeta de Opiniones.dc.html:265-279. La comparten la Home,
   Marca blanca y Opiniones (views/v3/blocks/review-card-body.php); la media (foto + play) la
   pone cada página. Valores literales del template. */
.rc__body{padding:20px 22px 22px;display:flex;flex-direction:column;gap:12px;flex:1}
.rc__meta{display:flex;align-items:center;justify-content:space-between;gap:10px}
.rc__stars{display:flex;gap:1px;color:#f0b429;font-size:14px;letter-spacing:1px;line-height:1}
.rc__stars-off{color:var(--c-border-input)}
.rc__tag{font-size:11.5px;font-weight:700;color:#1e5c3a;background:#e7f3ec;border:1px solid #d8ecdf;border-radius:20px;padding:4px 10px;flex:none}
.rc__quote{margin:0;font-size:15px;line-height:1.66;color:#3a4841;flex:1;text-wrap:pretty}
.rc__author{display:flex;align-items:center;gap:11px;border-top:1px solid #eef0ee;padding-top:13px}
.rc__avatar{width:34px;height:34px;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex:none}
.rc__author-text{display:flex;flex-direction:column;line-height:1.35;min-width:0}
.rc__name{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;color:#17241c}
/* El autor puede traer nombre largo: el contenedor debe poder encoger (min-width:0 en la
   cadena flex) y el texto corta con ellipsis sin llevarse el tick de verificado. */
.rc__author-text{min-width:0}
.rc__name{max-width:100%}
.rc__name-txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rc__verified{flex:none;cursor:help}
.rc__role{font-size:12px;color:#8a978f;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}