/*
Theme Name: Labscience
Theme URI: https://labscienceusa.com
Author: Estudio Volando
Description: Theme de bloques del sitio institucional de Labscience. Sin page builder y sin plugins: el estilo sale de theme.json y las ocho secciones son plantillas del theme.
Version: 0.1.0
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: labscience
Tags: full-site-editing, block-patterns, one-column
*/

/* Las variables son las mismas que trajo el cliente en site.html, pero ahora
   apuntan a la paleta de theme.json: cambiar un color allá lo cambia acá y en
   el editor a la vez. --accent se llamaba --cyan y es un violeta; el nombre
   original mentía y no se conservó. */
:root{
  --ink:var(--wp--preset--color--ink);
  --blue:var(--wp--preset--color--blue);
  --brand-blue:var(--wp--preset--color--brand-blue);
  --accent:var(--wp--preset--color--accent);
  --accent-dark:var(--wp--preset--color--accent-dark);
  --paper:var(--wp--preset--color--paper);
  --slate:var(--wp--preset--color--slate);
  --white:var(--wp--preset--color--white);
  --line:rgba(10,31,61,0.14);
  --line-on-dark:rgba(255,255,255,0.16);
  --serif:var(--wp--preset--font-family--display);
  --sans:var(--wp--preset--font-family--body);
  --mono:var(--wp--preset--font-family--mono);
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}

/* WordPress envuelve todo en .wp-site-blocks y le mete gap entre bloques. Acá
   el ritmo lo dan los padding de cada section, así que se anula. */
.wp-site-blocks{display:block;}
.wp-site-blocks > *{margin-block:0;}

.wrap{max-width:1180px;margin:0 auto;padding:0 40px;}
@media (max-width:720px){ .wrap{padding:0 22px;} }

/* corner registration ticks — signature motif */
.ticks{position:relative;}
.ticks::before,.ticks::after{
  content:"";position:absolute;width:14px;height:14px;
  border-color:currentColor;opacity:.35;
}
.ticks::before{top:0;left:0;border-top:1px solid;border-left:1px solid;}
.ticks::after{bottom:0;right:0;border-bottom:1px solid;border-right:1px solid;}

.eyebrow{
  font-family:var(--mono);
  font-size:13px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent-dark);
  display:flex;align-items:center;gap:10px;
  margin-bottom:18px;
}
.eyebrow .bar{width:28px;height:1px;background:var(--accent-dark);display:inline-block;}

h1,h2,h3{font-family:var(--serif);font-weight:500;letter-spacing:.01em;text-transform:uppercase;}

/* Páginas sueltas (no la portada): solo hace falta que el texto respire. */
.pagina-simple{max-width:1180px;margin:0 auto;padding:120px 40px 96px;}
.pagina-simple h1{font-size:clamp(28px,3vw,40px);margin-bottom:28px;}
.pagina-simple p{color:var(--slate);margin-bottom:16px;font-size:15.5px;}
@media (max-width:720px){ .pagina-simple{padding:100px 22px 72px;} }

/* ---------- NAV ---------- */
/* El alias con .wp-block-template-part es un seguro: si una versión de
   WordPress deja de aplicar el className del bloque template-part, el
   encabezado igual queda sticky y con su fondo. */
.site-header,
header.wp-block-template-part{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,0.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
/* Con la barra de administración el sticky se pega abajo de ella, no arriba —
   pero SOLO arriba de 782px.

   Abajo de ese ancho WordPress hace su barra `position:absolute`, o sea que se
   va con el scroll. Desplazar el encabezado 46px ahí deja un hueco vacío
   permanente arriba de la pantalla apenas se scrollea: la barra de admin ya no
   está y el encabezado sigue corrido. Lo ve solo quien tenga sesión abierta,
   que es justamente quien revisa el sitio. */
@media (min-width:783px){
  .admin-bar .site-header,
  .admin-bar header.wp-block-template-part{top:32px;}
}

.site-header nav.wrap,
header.wp-block-template-part nav.wrap{
  display:flex;align-items:center;gap:32px;
  height:76px;
  max-width:1400px;
  padding-left:24px;
}
.logo{
  font-family:var(--wp--preset--font-family--logo);font-size:19px;font-weight:800;
  letter-spacing:-.01em;color:var(--brand-blue);
}
.logo svg{height:26px;width:auto;display:block;}
.logo-spacer{visibility:hidden;}
.logo-fixed{
  position:absolute;left:24px;top:50%;transform:translateY(-50%);
  z-index:5;
}
.navlinks{display:flex;gap:26px;list-style:none;}
.navlinks a{
  font-size:13px;font-weight:700;letter-spacing:.04em;color:var(--brand-blue);
  position:relative;padding-bottom:4px;text-transform:uppercase;
}
.navlinks a:visited{color:var(--brand-blue);}
.navlinks a::after{
  content:"";position:absolute;left:0;bottom:0;width:0;height:1px;
  background:var(--accent-dark);transition:width .25s ease;
}
.navlinks a:hover::after{width:100%;}
.navcta{
  font-family:var(--mono);font-size:12px;letter-spacing:.05em;
  color:var(--brand-blue);border:1px solid var(--line);
  padding:9px 18px;border-radius:2px;
  margin-left:auto;
  font-weight:600;
}
.navcta:visited{color:var(--brand-blue);}
.navcta:hover{border-color:var(--brand-blue);}
@media (max-width:900px){ .navlinks{display:none;} }

/* ---------- HERO ---------- */
.hero{
  min-height:85vh;
  display:flex;
  align-items:center;
  padding:110px 0 90px;
  position:relative;overflow:hidden;
  background:var(--ink);color:var(--white);
}
.hero-grid{
  width:100%;
  display:block;
}
.hero-content{max-width:1080px;}
.hero h1{
  font-size:clamp(34px,4.4vw,54px);
  line-height:1.28;
  letter-spacing:.005em;
  color:var(--white);
  max-width:none;
  white-space:normal;
}
.hero p.lede{
  margin-top:24px;font-size:17px;color:rgba(255,255,255,.72);max-width:44ch;
}
.hero-cta{
  margin-top:34px;display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:13px;letter-spacing:.04em;
  color:var(--white);border-bottom:1px solid rgba(255,255,255,.5);padding-bottom:3px;
}
.hero-cta:hover{color:var(--accent);border-color:var(--accent);}
.hero-video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.85;filter:saturate(.85) brightness(1);
}
.hero-scrim{
  position:absolute;inset:0;
  background:linear-gradient(100deg, rgba(10,31,61,.88) 22%, rgba(10,31,61,.42) 62%, rgba(10,31,61,.18) 100%);
}
.hero .wrap{position:relative;z-index:2;}
.hero .eyebrow{color:var(--accent);font-size:11px;}

/* ---------- SECTION SHELL ---------- */
.site-main section{padding:96px 0;}
.site-main section.alt{background:var(--paper);}
.site-main section.dark{background:var(--ink);color:var(--white);}
.site-main section.dark .eyebrow{color:var(--accent);}
.section-head{max-width:640px;margin-bottom:56px;}
.section-head h2{font-size:clamp(24px,2.6vw,32px);line-height:1.32;letter-spacing:.005em;}
.site-main section.dark .section-head h2{color:var(--white);}

/* ---------- COMPANY ---------- */
.company-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:start;
}
@media (max-width:800px){ .company-grid{grid-template-columns:1fr;} }
.company-grid p{color:var(--slate);margin-bottom:16px;font-size:15.5px;}
.company-grid h2{font-size:clamp(22px,2.4vw,28px);margin-bottom:22px;line-height:1.35;}
.pillar-list{list-style:none;}
.pillar-list li{
  display:flex;gap:16px;padding:20px 0;border-top:1px solid var(--line);
}
.pillar-list li:last-child{border-bottom:1px solid var(--line);}
.pillar-list .n{font-family:var(--mono);color:var(--accent-dark);font-size:13px;padding-top:2px;}
.pillar-list h4{font-family:var(--sans);font-weight:600;font-size:14.5px;margin-bottom:4px;}
.pillar-list span{color:var(--slate);font-size:14px;}

/* ---------- SCIENCE ---------- */
.sci-intro{color:rgba(255,255,255,.72);max-width:560px;margin-bottom:0;font-size:15.5px;}
/* Reusable "paragraphs with no gap between them" pattern — used in Our Science (dark) and Quality (light) */
.flow-copy p{color:var(--slate);font-size:15.5px;margin-bottom:0;}

.science-lede-grid{
  display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:start;margin-bottom:64px;
}
@media (max-width:800px){ .science-lede-grid{grid-template-columns:1fr;} }
.sci-figure{
  position:relative;border:1px solid var(--line-on-dark);
}
.sci-figure img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;display:block;aspect-ratio:5/4;}
.sci-figure .cap{
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:6px 12px;
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:rgba(255,255,255,.5);
  padding:12px 14px;border-top:1px solid var(--line-on-dark);
}
.sci-figure .cap .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);display:inline-block;margin-right:8px;}

/* ---------- SCIENCE TABS (interactive Bioavailability/Synergy/Longevity) ---------- */
.sci-tabs{display:grid;grid-template-columns:300px 1fr;gap:0;border:1px solid var(--line-on-dark);border-radius:16px;overflow:hidden;}
@media (max-width:800px){ .sci-tabs{grid-template-columns:1fr;} }
.sci-tabs-nav{border-right:1px solid var(--line-on-dark);display:flex;flex-direction:column;}
@media (max-width:800px){ .sci-tabs-nav{flex-direction:row;border-right:none;border-bottom:1px solid var(--line-on-dark);} }
.sci-tab{
  display:flex;align-items:center;gap:14px;width:100%;min-height:76px;flex:1;
  background:transparent;border:none;border-bottom:1px solid var(--line-on-dark);
  padding:0 24px;cursor:pointer;text-align:left;font-family:var(--sans);
  transition:background .2s ease;
}
.sci-tab:last-child{border-bottom:none;}
@media (max-width:800px){ .sci-tab{border-bottom:none;padding:0 10px;} }
@media (max-width:480px){ .sci-tab{min-height:60px;} }
.sci-tab .label{font-size:15px;font-weight:600;color:rgba(255,255,255,.55);transition:color .2s ease;}
.sci-tab:hover{background:rgba(255,255,255,.03);}
.sci-tab:hover .label{color:var(--accent);}
.sci-tab.active{background:rgba(255,255,255,.03);}
.sci-tab.active .label{color:var(--accent);}
@media (max-width:480px){ .sci-tab .label{font-size:12.5px;} }
.sci-panel{background:var(--ink);padding:40px 40px;min-height:400px;display:flex;flex-direction:column;justify-content:center;}
@media (max-width:800px){ .sci-panel{padding:28px 24px;min-height:0;} }
.sci-panel-eyebrow{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:16px;display:block;}
.sci-panel-title{font-family:var(--serif);font-weight:500;text-transform:none;font-size:clamp(26px,3vw,34px);line-height:1.3;color:var(--white);margin-bottom:22px;}
.sci-panel p{color:rgba(255,255,255,.68);font-size:13.5px;line-height:1.7;margin-bottom:14px;}
@media (max-width:600px){ .sci-break{display:none;} }
.sci-panel-content{animation:sciFade .35s ease;}
@keyframes sciFade{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:translateY(0);}}
/* Sin JavaScript los tres paneles quedan uno abajo del otro en vez de
   desaparecer: el contenido se lee igual. */
.sci-panel-content[hidden]{display:none;}
.no-js .sci-panel-content[hidden]{display:block;}
.no-js .sci-tabs-nav{display:none;}

/* ---------- DIFFERENTIATION (pull statement) ---------- */
.statement{
  font-family:var(--serif);
  font-size:clamp(24px,2.6vw,34px);
  line-height:1.45;color:var(--ink);
  max-width:920px;
}
.statement em{
  font-style:normal;color:var(--brand-blue);
  border-bottom:1px solid var(--brand-blue);
}
.statement + .statement{margin-top:28px;font-size:16px;font-family:var(--sans);color:var(--slate);line-height:1.7;max-width:60ch;}

.sci-statement{
  font-family:var(--serif);
  font-size:clamp(20px,2.2vw,26px);
  line-height:1.42;color:var(--white);
  max-width:820px;
  margin-top:26px;margin-bottom:38px;
}
.sci-statement em{
  font-style:normal;color:var(--accent);
  border-bottom:1px solid var(--accent);
}
.sci-intro em{font-style:normal;color:var(--accent);font-weight:600;}

/* ---------- QUALITY ---------- */
.quality-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;}
.cert-grid{gap:20px;}
@media (max-width:800px){ .quality-grid{grid-template-columns:1fr;} }
.cert{
  border:1px solid var(--line);background:var(--white);padding:34px 30px;position:relative;
}
.cert .head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:22px;padding-bottom:18px;border-bottom:1px solid var(--line);}
.cert .region{font-family:var(--serif);font-size:22px;display:inline-flex;align-items:center;gap:10px;}
.cert .flag{width:26px;height:18px;border:1px solid var(--line);border-radius:2px;flex-shrink:0;overflow:hidden;display:inline-block;}
.cert .flag svg{display:block;width:100%;height:100%;}
.cert .code{font-family:var(--mono);font-size:11px;color:var(--accent-dark);letter-spacing:.08em;}
.cert .row{padding:12px 0;font-size:13.5px;border-bottom:1px dashed var(--line);}
.cert .row:last-child{border-bottom:none;}
.cert .row .k{display:block;color:var(--slate);font-family:var(--mono);font-size:11px;letter-spacing:.06em;margin-bottom:5px;}
.cert .row .v{display:block;color:var(--ink);font-weight:500;line-height:1.5;}
.quality-copy{max-width:760px;margin-bottom:48px;}

/* ---------- SUSTAINABILITY ---------- */
.sustain-grid{display:grid;grid-template-columns:1fr .9fr;gap:60px;align-items:center;}
@media (max-width:800px){ .sustain-grid{grid-template-columns:1fr;} }
.sustain-grid p{color:var(--slate);font-size:15.5px;margin-bottom:16px;}
.sustain-grid h2{font-size:clamp(22px,2.4vw,26px);line-height:1.35;margin-bottom:20px;}

/* ---------- CONTACT / FOOTER ---------- */
.site-footer{background:var(--ink);color:rgba(255,255,255,.7);padding:80px 0 34px;}
.footer-top{
  display:grid;grid-template-columns:1.2fr .8fr .8fr;gap:60px;
  padding-bottom:56px;border-bottom:1px solid var(--line-on-dark);
}
@media (max-width:800px){ .footer-top{grid-template-columns:1fr;gap:40px;} }
.footer-brand{align-self:center;}
.footer-brand .logo{color:var(--white);margin-bottom:18px;}
.footer-brand p{max-width:36ch;font-size:14px;color:rgba(255,255,255,.55);}
.footer-col h5{
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent);margin-bottom:18px;
}
.footer-col a, .footer-col p{
  display:block;font-size:14px;color:rgba(255,255,255,.68);margin-bottom:10px;
}
.footer-col a:hover{color:var(--white);}
.footer-bottom{
  display:flex;justify-content:space-between;align-items:flex-start;
  padding-top:28px;font-size:12px;color:rgba(255,255,255,.4);gap:30px;
}
@media (max-width:700px){ .footer-bottom{flex-direction:column;gap:14px;} }
.footer-bottom .disclaimer{max-width:56ch;font-family:var(--mono);font-size:11px;line-height:1.7;}

/* ---------- IMAGE TREATMENT (duotone-style) ---------- */
.photo{position:relative;overflow:hidden;background:var(--ink);}
.photo img{width:100%;height:100%;object-fit:cover;display:block;}
.photo .tint{
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(10,31,61,.15), rgba(10,31,61,.72));
  mix-blend-mode:multiply;
}
.photo .tint.light{background:linear-gradient(180deg, rgba(10,31,61,.05), rgba(10,31,61,.35));}

.sustain-photo{height:100%;min-height:320px;border-radius:10px;}

/* ---------- ACCESIBILIDAD ---------- */
.saltar-al-contenido{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--white);color:var(--brand-blue);
  padding:12px 20px;font-family:var(--mono);font-size:13px;
}
.saltar-al-contenido:focus{left:0;}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}

/* =========================================================================
   CAPA EDITABLE — prototipo de la página «home-editable»
   =========================================================================
   Las secciones de la portada son patrones del theme: el cliente no puede
   tocar el texto. Para que pueda, las mismas secciones tienen que armarse con
   bloques del núcleo de WordPress, y esos bloques generan un HTML distinto del
   que escribió el cliente (envuelven en <figure>, agregan sus propias clases,
   traen sus propios márgenes).

   Esto es la traducción entre las dos formas. Es aditivo y está scopeado a
   clases que solo existen en el marcado de bloques (`.wp-block-*`), así que la
   página `home` sigue exactamente igual.
   ------------------------------------------------------------------------- */

/* El hero pasa a ser un bloque «Portada» (core/cover), que es el único bloque
   del núcleo que soporta video de fondo editable desde el panel. Trae su
   propio alto mínimo, padding y contenedor: hay que devolverlos a los del
   diseño. */
.hero.wp-block-cover{
  min-height:85vh;
  padding:110px 0 90px;
  align-items:center;
}
.hero.wp-block-cover .wp-block-cover__inner-container{
  width:100%;max-width:none;
}
.hero.wp-block-cover .wp-block-cover__video-background{
  opacity:.85;filter:saturate(.85) brightness(1);
}
/* El degradado del scrim lo pinta el propio bloque como superposición. */
.hero.wp-block-cover > .wp-block-cover__background{opacity:1;}
.hero.wp-block-cover h1{color:var(--white);}

/* Los tres pilares dejan de ser <li> y pasan a ser grupos. En el original cada
   <li> tenía un solo hijo, así que el flex no hacía nada: el borde y el
   espaciado alcanzan para que se vea igual. */
.pillar-list > .wp-block-group{
  padding:20px 0;border-top:1px solid var(--line);
}
.pillar-list > .wp-block-group:last-child{border-bottom:1px solid var(--line);}
.pillar-list > .wp-block-group h4{font-family:var(--sans);font-weight:600;font-size:14.5px;margin-bottom:4px;}
/* El interlineado va fijo en px y no en múltiplo: en el original el texto era
   un <span> en línea y su caja la marcaba la altura de línea del contenedor
   (1,6 x 16px = 25,6px), no la suya. Como párrafo usaría 1,6 x 14px = 22,4px y
   la sección quedaría 14px más corta. */
.pillar-list > .wp-block-group p{color:var(--slate);font-size:14px;line-height:25.6px;}

/* El bloque de imagen envuelve en <figure>, que trae márgenes propios. */
.sci-figure .wp-block-image,
.photo .wp-block-image{margin:0;height:100%;}
.sci-figure .wp-block-image img{aspect-ratio:5/4;}

/* Las filas de las tarjetas de certificación: los <span> del original pasan a
   ser párrafos, que ya son de bloque. Solo hay que recuperar los tamaños. */
.cert .row p.k{color:var(--slate);font-family:var(--mono);font-size:11px;letter-spacing:.06em;margin-bottom:5px;}
.cert .row p.v{color:var(--ink);font-weight:500;line-height:1.5;font-size:13.5px;}

/* Los títulos de bloque traen su propia clase; el resto lo resuelven los
   selectores por elemento que ya existen más arriba. */
.wp-block-heading{margin:0;}

/* El `eyebrow` era un <div> y pasa a ser un <p>, y ahí lo alcanzan reglas que
   antes no lo tocaban: `.company-grid p` y `.sustain-grid p` le pisaban el
   tamaño (15,5px en vez de 13) y el margen (16px en vez de 18). Empatan en
   especificidad con `.eyebrow`, así que se resuelve subiéndola una vez acá. */
p.eyebrow{font-size:13px;margin-bottom:18px;}
.hero p.eyebrow{font-size:11px;}

/* WordPress le saca el margen inferior al último bloque de cada grupo. En el
   original ese margen existía y contaba para el alto de la columna: sin él la
   sección Company quedaba 16px más corta. */
.company-grid > .wp-block-group > p:last-child,
.sustain-grid > .wp-block-group > p:last-child{margin-bottom:16px;}

/* =========================================================================
   PASADA DE MOBILE
   =========================================================================
   Lo que mandó el cliente está pensado para escritorio: abajo de 900px el menú
   desaparece y no hay reemplazo, el titular se corta en lugares raros y a 320px
   la barra se sale de la pantalla. Esto arregla lo que es defecto; el menú es
   decisión de diseño y va aparte.
   ------------------------------------------------------------------------- */

/* Los <br> de los titulares son quiebres elegidos para el ancho de escritorio.
   En un celular fuerzan cortes como «SCIENCE-/BACKED» y dejan renglones de una
   palabra. Apagados, el texto fluye solo. */
@media (max-width:700px){
  .hero h1 br,
  .science-lede-grid h2 br,
  .section-head h2 br{display:none;}
}

/* A 320px el botón «Contact» empujaba el documento 27px fuera de la pantalla y
   aparecía scroll horizontal. Verificado: el HTML original hace lo mismo. */
@media (max-width:360px){
  .site-header nav.wrap,
  header.wp-block-template-part nav.wrap{
    padding-left:16px;padding-right:16px;gap:12px;
  }
  .logo-fixed{left:16px;}
  .logo svg{height:22px;}
  .navcta{padding:9px 12px;font-size:11px;}
}

/* Objetivos táctiles. Los enlaces del pie miden 22px de alto y el CTA del hero
   25px: la mitad de lo que necesita un dedo. Se agranda el área sensible sin
   mover el texto de lugar. */
@media (max-width:800px){
  .footer-col a{padding:9px 0;margin-bottom:0;}
  .navcta{padding-top:13px;padding-bottom:13px;}
  .hero-cta{padding-top:10px;padding-bottom:10px;}
}

/* El enlace para saltar al contenido se sacaba de pantalla con left:-9999px, y
   así cuenta como elemento desbordado en cualquier auditoría. Con recorte no
   ocupa lugar ni ensancha el documento. */
.saltar-al-contenido{
  position:absolute;left:0;top:0;
  width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;
}
.saltar-al-contenido:focus{
  width:auto;height:auto;clip-path:none;
  padding:12px 20px;
}

/* ---------- MENÚ DE CELULAR ----------
   Abajo de 900px los cuatro links dejaban de existir y no había cómo llegar a
   las secciones. El botón los despliega debajo del encabezado.

   Sin JavaScript el botón se esconde y los links quedan siempre visibles
   apilados: se pierde el plegado, no la navegación. */

.menu-boton{
  display:none;
  align-items:center;justify-content:center;
  width:44px;height:44px;
  background:transparent;border:none;padding:0;
  cursor:pointer;color:var(--brand-blue);
}
.menu-lineas,
.menu-lineas::before,
.menu-lineas::after{
  display:block;width:20px;height:1.5px;
  background:currentColor;
  transition:transform .2s ease, opacity .2s ease;
}
.menu-lineas{position:relative;}
.menu-lineas::before,
.menu-lineas::after{content:"";position:absolute;left:0;}
.menu-lineas::before{top:-6px;}
.menu-lineas::after{top:6px;}
/* Abierto, las tres líneas se vuelven una cruz. */
.menu-boton[aria-expanded="true"] .menu-lineas{background:transparent;}
.menu-boton[aria-expanded="true"] .menu-lineas::before{transform:translateY(6px) rotate(45deg);}
.menu-boton[aria-expanded="true"] .menu-lineas::after{transform:translateY(-6px) rotate(-45deg);}

.screen-reader-text{
  position:absolute;width:1px;height:1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;
}

@media (max-width:900px){
  .menu-boton{display:flex;margin-left:auto;}
  .navcta{margin-left:0;}

  /* El panel cuelga del encabezado, que es sticky y por eso sirve de ancla. */
  .navlinks{
    display:block;
    position:absolute;top:100%;left:0;right:0;
    background:rgba(255,255,255,0.98);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
    padding:0 24px 8px;
    visibility:hidden;opacity:0;transform:translateY(-6px);
    transition:opacity .18s ease, transform .18s ease, visibility .18s;
  }
  .navlinks[data-abierto="true"]{visibility:visible;opacity:1;transform:none;}
  .navlinks li{border-top:1px solid var(--line);}
  .navlinks li:first-child{border-top:none;}
  .navlinks a{display:block;padding:15px 0;font-size:13px;}
  .navlinks a::after{display:none;}

  /* Sin JS: sin plegado, pero con navegación. */
  .no-js .menu-boton{display:none;}
  .no-js .navlinks{position:static;visibility:visible;opacity:1;transform:none;
    background:none;backdrop-filter:none;border-bottom:none;padding:0;
    display:flex;flex-wrap:wrap;gap:0 18px;}
  .no-js .navlinks li{border-top:none;}
  .no-js .navlinks a{padding:10px 0;}
}

/* Ajustes del encabezado con el botón puesto.

   El botón suma 44px a una barra que ya venía justa: a 390px el documento
   pasaba a 399 y volvía el scroll horizontal. Se achica el espacio entre
   elementos y el logo, que abajo de 900px no necesita el tamaño de escritorio.

   `flex:none` en el botón no es opcional: sin eso el flex lo comprimía de 44 a
   20px y dejaba de ser un objetivo táctil. */
@media (max-width:900px){
  .site-header nav.wrap,
  header.wp-block-template-part nav.wrap{gap:12px;}
  .menu-boton{flex:none;}
  /* El panel va opaco: con transparencia se leía el hero por debajo de los
     enlaces y el menú quedaba ilegible. */
  .navlinks{background:var(--white);backdrop-filter:none;}
}
@media (max-width:480px){
  .logo svg{height:22px;}
  .navcta{padding:9px 12px;font-size:11px;}
}
@media (max-width:360px){
  .logo svg{height:18px;}
}

/* ---------- ENCABEZADO FIJO EN CELULAR ----------
   Dos problemas que se ven solo en un celular:

   1. La barra mide 76px con un logo de 22: es una franja casi vacía que se come
      pantalla en todo el scroll.
   2. El fondo era blanco al 92% con desenfoque. Sobre las secciones oscuras
      funciona, pero sobre una sección blanca el texto se ve pasar por debajo a
      medio borrar y no se entiende dónde termina la barra. */
@media (max-width:900px){
  .site-header nav.wrap,
  header.wp-block-template-part nav.wrap{height:60px;}

  .site-header,
  header.wp-block-template-part{
    background:var(--white);
    backdrop-filter:none;
    border-bottom-color:transparent;
    transition:box-shadow .2s ease, border-color .2s ease;
  }

  /* Apenas se scrollea, la barra se despega del contenido con una sombra. Sin
     esto, sobre fondo blanco la barra y la página son la misma mancha. Arriba
     de todo no hace falta y quedaría sucia, por eso va por estado y no fijo. */
  .site-header.esta-scrolleado,
  header.esta-scrolleado.wp-block-template-part{
    box-shadow:0 1px 14px rgba(10,31,61,.12);
    border-bottom-color:var(--line);
  }
}

/* Al saltar a una sección desde el menú, el encabezado fijo se comía los
   primeros 77px (61 en celular): la sección arrancaba justo abajo de la barra y
   su borde superior quedaba tapado. `scroll-padding-top` le avisa al navegador
   cuánto espacio reservar al frenar. */
html{scroll-padding-top:77px;}
@media (max-width:900px){
  html{scroll-padding-top:61px;}
}

/* Menos bloques HTML sueltos, para que el editor muestre la página de verdad.

   WordPress dibuja cada bloque «HTML personalizado» dentro de un iframe
   aislado, SIN ninguna hoja de estilos del theme. Todo lo que viva ahí se ve
   sin formato en el editor —una bandera sin medidas propias pasaba de 26x18 a
   478x319— aunque en el sitio publicado esté perfecto.

   Por eso, en la versión editable, el pie de la foto y el tinte dejaron de ser
   marcado suelto: uno pasa a bloques del núcleo y el otro a CSS. */

/* El puntito del pie de foto, que antes era un <span class="dot"> escrito a
   mano dentro del bloque HTML. */
.sci-figure .cap p:first-child::before{
  content:"";width:6px;height:6px;border-radius:50%;
  background:var(--accent);display:inline-block;
  margin-right:8px;vertical-align:middle;
}

/* El tinte de la foto de Sustainability. En la versión editable la imagen va
   dentro de un <figure>, que no usa ::after: ahí se pinta. No se puede pintar
   sobre `.photo` porque sus dos pseudo-elementos ya los ocupan las marcas de
   esquina de `.ticks`. */
.photo .wp-block-image{position:relative;}
.photo .wp-block-image::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg, rgba(10,31,61,.05), rgba(10,31,61,.35));
  mix-blend-mode:multiply;
}