/* extras.css — piezas compartidas: accesibilidad, avisos y estado de formularios */
.skip-link{position:absolute;left:-9999px;top:0;z-index:999;background:#062f2c;color:#fff;padding:.7rem 1.2rem;border-radius:0 0 12px 0;font-family:'Oswald',sans-serif}
.skip-link:focus{left:0}
.site-toast{position:fixed;left:50%;bottom:1.5rem;transform:translate(-50%,30px);z-index:500;max-width:min(92vw,520px);background:#062f2c;color:#fff;padding:1rem 1.4rem;border-radius:16px;box-shadow:0 18px 40px rgba(6,47,44,.35);font-family:'Work Sans',sans-serif;font-size:.95rem;line-height:1.45;opacity:0;pointer-events:none;transition:opacity .35s ease,transform .35s ease;border-left:5px solid #f2a63d}
.site-toast.is-visible{opacity:1;transform:translate(-50%,0)}
.form-status{margin-top:.9rem;padding:.8rem 1rem;border-radius:12px;font-size:.92rem;font-family:'Work Sans',sans-serif}
.form-status.is-ok{background:#e7f6ec;color:#14532d;border:1px solid #bde5c8}
.form-status.is-error{background:#fdecec;color:#7f1d1d;border:1px solid #f4c4c4}
.hp-field{position:absolute!important;left:-9999px!important;height:0;width:0;overflow:hidden}
form button[disabled]{opacity:.6;cursor:progress}

html{overflow-x:clip}

/* Evita imágenes estiradas: los atributos width/height solo reservan espacio */
img{height:auto;}
.hero__visual img{height:auto !important;}
@media (min-width:1025px){.hero__visual img{max-width:820px !important;}}
/* Hero: no tapar a los personajes con el header fijo; ocultar indicador de scroll en pantallas pequeñas */
@media (max-width:1024px){.hero{padding-top:9.5rem !important;}.hero__scroll-cue{display:none;}}
@media (max-width:480px){.hero{padding-top:9rem !important;}.hero__visual img{max-width:360px;}}
@media (max-width:480px){.page-hero__title{font-size:clamp(1.9rem,8.4vw,2.6rem) !important;overflow-wrap:anywhere;}}
/* Logos de aliados grandes (el CSS original los limitaba a 70px) */
.partner-logo img{max-width:78% !important;max-height:150px !important;width:auto;}
.partner-logo img.is-multiply{max-height:130px !important;}
@media (max-width:600px){.partner-logo{min-height:170px !important;}.partner-logo img{max-height:130px !important;}}

/* Personajes: en móvil y tablet siempre primero la imagen y luego la descripción */
@media (max-width:768px){.character-feature__figure,.character-feature--reverse .character-feature__figure{order:-1;}}

/* Artículo del blog (página dinámica) */
.article-page{padding:9rem 0 5rem}
.article-page__wrap{max-width:46rem;margin-inline:auto;padding-inline:1.25rem}
.article-page__back{display:inline-block;margin-bottom:1.25rem;font-weight:700;color:var(--teal,#2f6f73);text-decoration:none}
.article-page__title{font-family:var(--font-display,inherit);font-size:clamp(1.9rem,5vw,3rem);line-height:1.1;margin:.8rem 0 1.5rem;overflow-wrap:anywhere}
.article-page__media{margin:0 0 2rem}
.article-page__media img{width:100%;border-radius:1.25rem;display:block}
.article-page__content{font-size:1.08rem;line-height:1.75}
.article-page__content h2,.article-page__content h3{margin:2rem 0 .75rem;line-height:1.2}
.article-page__content p,.article-page__content ul,.article-page__content ol{margin:0 0 1.15rem}
.article-page__content ul,.article-page__content ol{padding-left:1.4rem}
.article-page__content img{max-width:100%;height:auto;border-radius:1rem}
.article-page__content blockquote{border-left:4px solid currentColor;margin:1.5rem 0;padding:.25rem 0 .25rem 1.25rem;opacity:.85}
.article-page__missing{font-size:1.15rem;text-align:center}