/* Blog v3 — artículo (views/v3/blog/article.php).
   Consume tokens.css + base.css + components.css.
   Fuente visual: «Blog - Articulo.dc.html»:188-284.

   Cuatro notas de traducción del template a CSS:

   1. Esta página no tiene ni un valor que dependa del ancho: el dc-script no usa `mob`/`desk` en
      ninguno de sus bloques, todo se resuelve con clamp() y grid auto-fit. Por eso no hay media
      queries.
   2. Las tres columnas de 716 px del template (cabecera, portada y cuerpo) son .container con el
      max-width recortado; el padding lateral es el mismo del sitio.
   3. El cuerpo del artículo llega de BD como HTML (p, h2, h3, h4, strong, a), así que se le da
      estilo por etiqueta dentro de .art-body. El template solo escribe p, h2 y ul: h3 y h4 son
      extensión nuestra, con la misma escala descendente.
   4. #3a4841 (texto del cuerpo), #e0e6e2 (borde de las categorías secundarias) y #c3cfc7 (el
      punto separador) son literales del template, fuera del catálogo de tokens. */

/* ---------- 1 · cabecera: migas, categorías, titular, extracto y autor (Articulo:188-207) ---------- */
.art-head{background:#f7faf8;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%);background-repeat:no-repeat}
.art-head__inner{max-width:716px;padding:clamp(32px,4.5vw,55px) clamp(18px,4vw,28px) clamp(20px,3vw,30px);display:flex;flex-direction:column;gap:34px}

.art-crumbs{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--c-muted)}
.art-crumbs__link{color:var(--c-secondary)}
.art-crumbs__current{color:var(--c-brand);font-weight:600}

.art-cats{display:flex;flex-wrap:wrap;gap:8px}
.art-cat{background:var(--c-white);border:1px solid #e0e6e2;color:var(--c-secondary);border-radius:var(--r-pill);padding:6px 14px;font-size:12.5px;font-weight:600;transition:border-color .15s}
.art-cat:hover{border-color:var(--c-brand);color:var(--c-green-text)}
/* la primera categoría es la del artículo y va marcada, como en el template */
.art-cat--main{background:var(--c-tint-badge);border-color:var(--c-border-success);color:var(--c-green-text);font-weight:700;transition:background .15s}
.art-cat--main:hover{background:#d8ecdf;border-color:var(--c-border-success);color:var(--c-green-text)}

.art-title{margin:0;font-size:clamp(30px,4.8vw,46px);font-weight:700;line-height:1.12;letter-spacing:-.025em;text-wrap:balance}
.art-lead{margin:0;font-size:clamp(15px,1.6vw,18px);line-height:1.65;color:var(--c-secondary);max-width:640px;text-wrap:pretty}

.art-author{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:4px}
.art-author__avatar{width:38px;height:38px;flex:none;border-radius:50%;background:linear-gradient(135deg,#2e8b57,#1e5c3a);color:var(--c-white);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700}
.art-author__text{display:flex;flex-direction:column;line-height:1.35}
.art-author__name{font-size:13.5px;font-weight:600;color:var(--c-ink)}
.art-author__meta{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--c-muted)}
.art-author__dot{color:#c3cfc7}
.art-author__read{display:inline-flex;align-items:center;gap:4px}
.art-author__read i{font-size:12px;line-height:1;color:var(--c-brand)}

/* Caja de bio del equipo al cierre del artículo (E-E-A-T): reusa el avatar de la cabecera */
.art-bio{display:flex;gap:14px;align-items:flex-start;margin:34px 0 6px;padding:18px 20px;border:1px solid var(--c-border);border-radius:14px;background:var(--c-inset)}
.art-bio__avatar{width:44px;height:44px;flex:none;border-radius:50%;background:linear-gradient(135deg,#2e8b57,#1e5c3a);color:var(--c-white);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700}
.art-bio__text{display:flex;flex-direction:column;gap:4px}
.art-bio__name{font-size:14px;font-weight:600;color:var(--c-ink)}
.art-bio__desc{margin:0;font-size:13.5px;line-height:1.6;color:var(--c-secondary)}

/* ---------- 2 · portada y cuerpo (Articulo:209-249) ---------- */
.art-main{background:var(--c-white)}
.art-cover{max-width:716px;padding:0 clamp(18px,4vw,28px)}
.art-cover__frame{position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:var(--c-page);margin-top:clamp(20px,2.4vw,30px);box-shadow:0 18px 40px rgba(23,36,28,.12)}
.art-cover__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.art-cover__ph{position:absolute;inset:0}

.art-body{max-width:716px;padding:clamp(32px,4.5vw,55px) clamp(18px,4vw,28px) clamp(20px,3vw,30px);display:flex;flex-direction:column}
.art-body > p{margin:20px 0 0;font-size:17px;line-height:1.8;color:#3a4841;text-wrap:pretty}
/* la entradilla: el primer párrafo va más grande y más oscuro (Articulo:217) */
.art-body > p:first-child{margin:0;font-size:19.5px;line-height:1.68;color:var(--c-ink);font-weight:500}
.art-body > h2{margin:38px 0 0;font-size:22px;font-weight:700;color:var(--c-ink);line-height:1.3;letter-spacing:-.015em}
.art-body > h3{margin:30px 0 0;font-size:19px;font-weight:700;color:var(--c-ink);line-height:1.35;letter-spacing:-.01em}
.art-body > h4{margin:26px 0 0;font-size:17px;font-weight:700;color:var(--c-ink);line-height:1.4}
/* el CMS envuelve los títulos en <strong> (<h2><strong>…): strong hereda bolder → 700 pasa a
   900, más negro que el h2 del template (Articulo:218, a 700). Se neutraliza para que el peso
   sea el del propio encabezado. */
.art-body h2 strong,.art-body h3 strong,.art-body h4 strong,
.art-body h2 b,.art-body h3 b,.art-body h4 b{font-weight:inherit}
.art-body > ul,.art-body > ol{margin:18px 0 0;padding-left:22px;display:flex;flex-direction:column;gap:9px}
.art-body li{font-size:17px;line-height:1.8;color:#3a4841;text-wrap:pretty}
.art-body a{font-weight:600;overflow-wrap:anywhere}
.art-body img{max-width:100%;height:auto;border-radius:var(--r-sub);margin-top:20px}
/* envoltorio del CTA de leads que el controller mete en el cuerpo (variante .pl--inline de
   popup-lead.css); el aire vertical es el del template (Blog - Articulo.dc.html:230) */
.art-cta{padding:clamp(40px,6vw,56px) 0}

.art-share{margin-top:30px;padding-top:20px;border-top:1px solid var(--c-divider);display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.art-share__label{font-size:12.5px;color:var(--c-muted)}
.art-share__icons{display:flex;gap:8px}
/* el cuarto botón es «Copiar enlace» y es un <button>: de ahí el reseteo de fondo y borde */
.art-share__icon{width:38px;height:38px;padding:0;border:1px solid var(--c-border-chip);border-radius:var(--r-btn);background:var(--c-white);color:var(--c-secondary);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s}
.art-share__icon:hover{border-color:var(--c-brand);color:var(--c-green-text)}
.art-share__icon i{font-size:15px;line-height:1}
/* acuse de «copiado» que pone modules/copylink.js; el template no lo tiene porque su botón no
   hacía nada */
.art-share__icon.is-copied{background:var(--c-tint-badge);border-color:var(--c-brand);color:var(--c-green-text)}

/* ---------- 3 · seguir leyendo (Articulo:251-284) ---------- */
.art-more{background:#f7faf8}
.art-more__inner{padding:clamp(64px,9vw,110px) clamp(18px,4vw,28px);display:flex;flex-direction:column;gap:34px}
.art-more__head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap}
.art-more__title{margin:0;font-size:clamp(26px,4vw,34px);font-weight:700;line-height:1.2;letter-spacing:-.02em}
.art-more__all{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--c-green-text)}
.art-more__all i{font-size:13px;line-height:1}
.art-more__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:20px}

.art-rel{display:flex;flex-direction:column;background:var(--c-white);border:1px solid var(--c-border-card);border-radius:var(--r-card);overflow:hidden;box-shadow:0 1px 3px rgba(23,36,28,.05);transition:transform .2s ease,box-shadow .2s ease}
.art-rel:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(23,36,28,.1)}
.art-rel__media{position:relative;aspect-ratio:16/9;background:var(--c-page)}
.art-rel__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.art-rel__ph{position:absolute;inset:0}
.art-rel__body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:8px}
.art-rel__cat{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--c-brand)}
.art-rel__title{margin:0;font-size:15px;font-weight:700;color:var(--c-ink);line-height:1.32;text-wrap:pretty}
.art-rel__meta{font-size:12px;color:var(--c-muted)}

/* ---------- 4 · caja del tooltip ----------
   modules/tooltip.js crea siempre el mismo marcado (.pc-tooltip + .pc-tooltip__arrow), y sus
   estilos nacieron en pages/pricing.css. Se repiten aquí con los mismos valores porque las dos
   hojas no se cargan nunca a la vez: cada página trae solo la suya. */
.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}

/* ---------- reseñas (funcionalidad del artículo legacy con el lenguaje v3; los campos copian
   los valores literales de .ct-input/.ct-field de contact.css y el CTA es el .btn-cta global.
   El .rc__stars del listado viene de components.css, cargado en todas las páginas) ---------- */
.art-rev__inner{max-width:716px;padding:clamp(20px,3vw,30px) clamp(18px,4vw,28px) clamp(40px,6vw,70px);display:flex;flex-direction:column;gap:22px}
.art-rev__tabs{display:flex;gap:8px;flex-wrap:wrap}
.art-rev__tab{padding:8px 15px;border-radius:var(--r-pill);font-size:12.5px;font-weight:600;font-family:inherit;cursor:pointer;background:var(--c-white);color:var(--c-body);border:1px solid var(--c-border-input);transition:all .15s;display:inline-flex;align-items:center;gap:7px}
.art-rev__tab:hover{border-color:var(--c-brand);color:var(--c-green-text)}
.art-rev__tab.is-active{background:#17311f;border-color:#17311f;color:var(--c-white)}
.art-rev__count{font-size:11px;font-weight:700;background:rgba(255,255,255,.18);border-radius:var(--r-pill);padding:1px 7px}
.art-rev__tab:not(.is-active) .art-rev__count{background:var(--c-tint-badge);color:var(--c-green-text)}
.art-rev__form{display:flex;flex-direction:column;gap:16px}
.art-rev__score{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.art-rev__stars{display:flex;gap:2px}
.art-rev__star{border:0;background:none;padding:0 2px;font-size:26px;line-height:1;cursor:pointer;color:var(--c-border-input);transition:color .12s,transform .12s}
.art-rev__star:hover{transform:scale(1.12)}
.art-rev__star.is-on{color:#f0b429}
.art-rev__field{display:flex;flex-direction:column;gap:6px}
.art-rev__label{font-size:12.5px;font-weight:600;color:var(--c-secondary)}
.art-rev__opt{font-weight:500;color:var(--c-disabled)}
.art-rev__input{width:100%;box-sizing:border-box;background:var(--c-white);border:1px solid var(--c-border-input);border-radius:var(--r-btn);padding:12px 14px;font-size:14px;font-family:inherit;color:var(--c-ink);outline:none;transition:border-color .15s,box-shadow .15s}
.art-rev__input:focus{border-color:var(--c-brand);box-shadow:var(--sh-focus)}
.art-rev__input.is-invalid{border-color:#b3452c}
.art-rev__textarea{resize:vertical;min-height:110px}
.art-rev__row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:600px){.art-rev__row{grid-template-columns:1fr}}
.art-rev__msg{margin:0;font-size:13.5px;line-height:1.5;border-radius:var(--r-btn);padding:11px 14px}
.art-rev__msg--error{background:#fbeae5;color:#b3452c}
.art-rev__msg--ok{background:var(--c-tint-badge);color:var(--c-green-text)}
.art-rev__submit{align-self:flex-start;padding:12px 22px;font-size:14px}
.art-rev__submit[disabled]{opacity:.6;cursor:default;transform:none}
.art-rev__list-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.art-rev__list-title{font-size:16.5px;font-weight:700;color:var(--c-ink)}
.art-rev__list-count{font-size:12px;color:var(--c-muted)}
.art-rev__list{display:flex;flex-direction:column}
.art-rev__item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0;border-bottom:1px solid var(--c-divider)}
.art-rev__item:last-child{border-bottom:0}
.art-rev__item-stars{font-size:16px}
.art-rev__item-date{font-size:12.5px;color:var(--c-muted)}
.art-rev__empty{text-align:center;padding:26px 0 10px}
.art-rev__empty-title{margin:0;font-size:16.5px;font-weight:700;color:var(--c-ink)}
.art-rev__empty-text{margin:8px 0 0;font-size:13.5px;color:var(--c-muted)}