/* MOTS Blog — estilos de entrada y listado.
   Incluye los retoques globales (logo, letra pequeña, Mots TV) porque en el blog
   no está el CSS que va dentro del contenido de las páginas. */
:root{--turquoise:#36c1cc}

/* --- retoques globales --- */
.eyebrow{font-size:13px;letter-spacing:.13em;font-weight:800}
.footer-grid a[href*="youtube"]{display:none}
.footer-grid>div>a{font-size:15px;font-weight:700}
.footer-grid h2{font-size:12.5px;letter-spacing:.1em}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* --- cabecera de la entrada --- */
.mots-post-hero h1{font-size:clamp(34px,5vw,74px);text-transform:none;letter-spacing:-.045em;max-width:1100px}
.mots-post-hero .eyebrow{color:var(--turquoise);margin-bottom:22px}
.mots-post-foto{margin:0;max-height:70vh;overflow:hidden;background:#111c1f}
.mots-post-foto img{width:100%;height:100%;object-fit:cover}

/* --- cuerpo del artículo --- */
.mots-post-cuerpo{padding-top:60px;padding-bottom:70px}
.mots-post-texto{max-width:780px;margin:0 auto;font-size:18px;line-height:1.75;color:#d7e4e6}
.mots-post-texto p{margin:0 0 26px;max-width:none}
.mots-post-texto h2{font-size:clamp(27px,3vw,40px);margin:52px 0 20px;letter-spacing:-.04em}
.mots-post-texto h3{font-size:clamp(22px,2.2vw,29px);margin:42px 0 16px}
.mots-post-texto a{color:var(--turquoise);border-bottom:1px solid rgba(54,193,204,.45)}
.mots-post-texto a:hover{border-bottom-color:var(--turquoise)}
.mots-post-texto strong{color:#fff}
.mots-post-texto img{height:auto;margin:14px 0}
.mots-post-texto figure{margin:34px 0}
.mots-post-texto figcaption,.mots-post-texto .wp-element-caption{font-size:13px;color:#9db3b7;margin-top:10px;text-align:center}
.mots-post-texto iframe{max-width:100%;margin:30px 0}
.mots-post-texto blockquote{border-left:3px solid var(--turquoise);margin:34px 0;padding:6px 0 6px 26px;font-size:21px;line-height:1.5;color:#fff}
.mots-post-texto ul,.mots-post-texto ol{padding-left:22px;margin:0 0 26px}
.mots-post-texto li{margin-bottom:10px}
.mots-post-texto .wp-block-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin:34px 0}
.mots-post-texto .wp-block-gallery figure{margin:0}
.mots-post-texto .wp-block-embed{margin:32px 0}

/* --- etiquetas y navegación --- */
.mots-post-tags{max-width:780px;margin:44px auto 0;justify-content:flex-start}
.mots-post-tags a span{transition:background .2s,color .2s}
.mots-post-tags a:hover span{background:var(--turquoise);color:var(--ink);border-color:var(--turquoise)}
.mots-post-nav{max-width:780px;margin:52px auto 0;padding-top:26px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}

/* --- comentarios --- */
.mots-comentarios{border-top:1px solid var(--line);max-width:920px}
.mots-lista-comentarios,.mots-lista-comentarios ol{list-style:none;margin:0;padding:0}
.mots-lista-comentarios li.comment{border:1px solid var(--line);background:#16262a;padding:22px 24px;margin-bottom:16px}
.mots-lista-comentarios li.comment li.comment{margin-top:16px;margin-bottom:0;background:#1b3036}
.mots-lista-comentarios .comment-author{font-weight:800;font-size:15px}
.mots-lista-comentarios .comment-metadata{font-size:12px;color:#93aaae;margin:4px 0 12px}
.mots-lista-comentarios .comment-content p{font-size:15.5px;line-height:1.65;color:#cfdedf}
.mots-lista-comentarios .reply{font-size:12px;font-weight:700}
.mots-lista-comentarios .reply a{color:var(--turquoise)}
.comment-respond{margin-top:40px;background:#192a2e;border:1px solid var(--line);padding:32px}
.comment-respond .comment-reply-title{font-size:22px;font-weight:900;margin-bottom:18px}
.comment-respond label{font-size:13px;font-weight:700;display:block;margin-bottom:8px}
.comment-respond input[type=text],.comment-respond input[type=email],.comment-respond input[type=url],.comment-respond textarea{width:100%;background:#101c1f;border:1px solid #ffffff30;color:#fff;padding:13px 14px;margin-bottom:18px;min-height:50px}
.comment-respond textarea{min-height:150px}
.comment-respond .submit{border:1px solid var(--accent);background:var(--accent);color:var(--ink);padding:15px 26px;font-size:13px;font-weight:700;cursor:pointer}
.comment-respond .comment-form-cookies-consent{display:flex;gap:10px;align-items:flex-start;font-size:13px}
.comment-respond .comment-form-cookies-consent input{width:auto;margin-top:3px}

/* --- listado --- */
.mots-listado{gap:52px 28px}
.mots-card h3{font-size:26px;line-height:1.15;margin-bottom:12px}
.mots-card:hover h3{color:var(--turquoise)}
.mots-card .eyebrow{color:var(--turquoise);margin:20px 0 9px;font-size:12px}
.mots-card .project-visual{background:#1d2d30}
.mots-buscador{display:flex;gap:12px;margin-top:34px;max-width:520px;flex-wrap:wrap}
.mots-buscador input{flex:1 1 240px;background:#101c1f;border:1px solid #ffffff30;color:#fff;padding:13px 15px;min-height:50px}
.mots-paginacion{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:60px}
.mots-paginacion .page-numbers{border:1px solid var(--line);padding:11px 17px;font-size:13px;font-weight:700;color:#cfdee0}
.mots-paginacion .page-numbers:hover{border-color:var(--turquoise);color:var(--turquoise)}
.mots-paginacion .page-numbers.current{background:var(--turquoise);border-color:var(--turquoise);color:var(--ink)}
.mots-paginacion .dots{border-color:transparent}

@media(max-width:850px){.mots-listado{grid-template-columns:1fr 1fr}}
@media(max-width:560px){
  .mots-listado{grid-template-columns:1fr;gap:38px}
  .mots-post-cuerpo{padding-top:40px}
  .mots-post-texto{font-size:17px}
  .mots-post-foto{max-height:46vh}
  .comment-respond{padding:22px 18px}
}

/* --- 1 y 3: marca y menu --- */
.site-header{height:96px}
.brand{font-size:30px;gap:14px;letter-spacing:-.055em;align-items:center;line-height:1}
.brand img{height:56px;width:41px;display:block;align-self:center;object-fit:contain;position:relative;top:3px}
.brand>span{display:inline-flex;align-items:center;line-height:1}
.brand-dot{font-size:.30em;margin:0 0 0 .12em;align-self:flex-start;position:relative;top:.06em;line-height:1}
.nav-links{font-size:15px;gap:27px}
.nav-links a{padding:10px 0}
.nav-cta{font-size:13.5px;padding:13px 19px;gap:16px}
.footer-wordmark{font-size:clamp(44px,5.2vw,86px)}
.hero{min-height:calc(100svh - 150px)}
@media(max-width:850px){
  .site-header{height:74px}
  .brand{font-size:25px;gap:11px}
  .brand img{height:44px;width:32px}
  .nav-links{font-size:24px}
  .hero{min-height:calc(100svh - 128px)}
}
@media(max-width:560px){
  .brand{font-size:21px;gap:9px}
  .brand img{height:38px;width:28px}
  .footer-wordmark{font-size:58px}
  .hero{min-height:calc(100svh - 138px)}
}

/* --- enlaces legales dentro del pie de siempre --- */
.footer-bottom{align-items:center}
.mots-legal-links{display:flex;gap:20px;flex-wrap:wrap}
.mots-legal-links a{color:#a7bec2}
.mots-legal-links a:hover{color:var(--turquoise)}
@media(max-width:560px){.footer-bottom{align-items:flex-start}.mots-legal-links{gap:12px}}
/* --- aire entre la foto y el nombre en las tarjetas --- */
.work-grid .project-card h3{margin-top:32px;margin-bottom:6px}
.work-grid .project-card .project-visual{margin-bottom:0}
.work-grid .project-card p{margin-top:0}

/* --- entrada escalonada de los elementos --- */
:root{--mots-ease:cubic-bezier(0.23,1,0.32,1)}
/* Antes de que el JS marque nada, se oculta lo que va a entrar: asi no parpadea.
   En cuanto el JS termina de marcar, este bloque deja de aplicar. */
.mots-js:not(.mots-listo) .hero .eyebrow,
.mots-js:not(.mots-listo) .hero h1,
.mots-js:not(.mots-listo) .hero-lede,
.mots-js:not(.mots-listo) .hero .actions,
.mots-js:not(.mots-listo) .hero-footnote,
.mots-js:not(.mots-listo) .section-head,
.mots-js:not(.mots-listo) .label-copy,
.mots-js:not(.mots-listo) .partnership-inner,
.mots-js:not(.mots-listo) .work-grid>*,
.mots-js:not(.mots-listo) .service-grid>*,
.mots-js:not(.mots-listo) .news-grid>*,
.mots-js:not(.mots-listo) .release-grid>*,
.mots-js:not(.mots-listo) .artist-grid>*,
.mots-js:not(.mots-listo) .mots-listado>*,
.mots-js:not(.mots-listo) .channel-grid>*,
.mots-js:not(.mots-listo) .steps-grid>*,
.mots-js:not(.mots-listo) .intro-grid>*,
.mots-js:not(.mots-listo) .manifesto>*,
.mots-js:not(.mots-listo) .social-inner>*,
.mots-js:not(.mots-listo) .contact-layout>*{opacity:0}
.mots-js .mots-rv{opacity:0;transform:translateY(16px)}
.mots-js .mots-rv.is-in{opacity:1;transform:translateY(0);
 transition:opacity .5s var(--mots-ease) var(--rv-d,0ms),transform .5s var(--mots-ease) var(--rv-d,0ms)}
@media (prefers-reduced-motion:reduce){
 .mots-js .mots-rv{transform:none}
 .mots-js .mots-rv.is-in{transform:none;transition:opacity .2s ease}
}

/* --- cortinilla de entrada (solo portada, una vez por sesion) --- */
.mots-intro{display:none}
.mots-js .mots-intro{position:fixed;inset:0;z-index:200;background:var(--ink,#101718);display:grid;place-items:center;overflow:hidden}
.mots-intro-marca{display:block;overflow:hidden;padding:0 6vw}
.mots-intro-marca>span{display:block;font-size:clamp(30px,8.4vw,128px);font-weight:900;letter-spacing:-.065em;line-height:.9;color:#fff;transform:translateY(106%)}
.mots-intro-marca .punto{color:var(--turquoise,#36c1cc)}
html.mots-intro-va .mots-intro-marca>span{transform:translateY(0);transition:transform .62s var(--mots-ease)}
html.mots-intro-fin .mots-intro{transform:translateY(-100%);transition:transform .66s cubic-bezier(0.77,0,0.175,1)}
html.mots-intro-activa{overflow:hidden}
@media (prefers-reduced-motion:reduce){.mots-js .mots-intro{display:none}}

/* --- movil: zonas tactiles y campos --- */
@media(max-width:850px){
 /* iOS amplia la pagina si el campo tiene menos de 16px: se fuerza 16 */
 .mots-contact-form input:not([type=checkbox]),.mots-contact-form textarea,.mots-contact-form select,
 .mots-buscador input,.comment-respond input,.comment-respond textarea{font-size:16px}
 /* zonas tactiles de al menos 44px */
 .mots-legal-links a{display:inline-block;padding:10px 0}
 .footer-grid>div>a{padding:7px 0}
 .filter{padding:13px 18px;font-size:14px}
 .service-checks label{padding:6px 0}
 .genre-tags span{padding:10px 15px}
 .mots-paginacion .page-numbers{padding:14px 18px}
 .text-link{padding-top:6px;padding-bottom:10px}
 .mots-post-nav a{padding:8px 0}
}

/* --- fotos del equipo --- */
.team-member img.initials{width:60px;height:60px;border-radius:50%;object-fit:cover;object-position:center 22%;display:block;background:#27464c;transition:filter .2s}
.team-member a.team-link{display:inline-block;line-height:0}
.team-member a.team-link:hover img.initials{filter:brightness(1.15)}
.team-member h3 a:hover{color:var(--turquoise)}

/* --- consentimiento de contenidos de terceros --- */
.mots-cookies{position:fixed;left:16px;right:16px;bottom:16px;z-index:150;max-width:980px;margin:0 auto;background:#0f1b1e;border:1px solid rgba(255,255,255,.3);box-shadow:0 18px 60px rgba(0,0,0,.55);padding:20px 22px}
.mots-cookies[hidden]{display:none}
.mots-cookies-in{display:flex;gap:24px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.mots-cookies p{font-size:14px;line-height:1.55;color:#d3e1e3;max-width:62ch;margin:0}
.mots-cookies .eyebrow{color:var(--turquoise);margin-bottom:6px}
.mots-cookies a{color:#fff;border-bottom:1px solid var(--turquoise)}
.mots-cookies-bt{display:flex;gap:12px;flex-wrap:wrap}
.mots-cookies-bt .button{padding:14px 22px;justify-content:center}
@media(max-width:560px){.mots-cookies{left:10px;right:10px;bottom:10px;padding:16px}.mots-cookies-bt{width:100%}.mots-cookies-bt .button{flex:1}}
.mots-embed{position:relative;background:#132225;border:1px solid var(--line);margin:30px 0;display:flex;align-items:center;justify-content:center}
.mots-embed iframe{width:100%;border:0;display:block;margin:0!important}
.mots-embed.is-on{display:block;min-height:0!important;background:none;border:0}
.mots-embed-aviso{padding:26px 22px;text-align:center}
.mots-embed-aviso[hidden]{display:none}
.mots-embed-aviso p{font-size:14px;color:#c4d6d9;margin:0 auto 16px;max-width:52ch}
.mots-prefs{background:none;border:0;padding:10px 0;color:#a7bec2;font:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.mots-prefs:hover{color:var(--turquoise)}