/*
Theme Name: Leyva Top Line Recycling
Theme URI: https://www.leyvarecycling.com/
Author: Grupo Gurú MKT
Author URI: https://www.leyvarecycling.com/
Description: Tema a medida para Leyva Top Line Recycling Center — centro de reciclaje en Long Beach, California. Bilingüe (ES/EN), optimizado para SEO local, con datos estructurados RecyclingCenter, slider panorámico, sistema Drive-Thru y formulario de cotización. Todos los datos de contacto se editan desde Apariencia → Personalizar.
Version: 1.2.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: leyva-topline
Tags: business, local-business, recycling, one-column, custom-colors, custom-menu, custom-logo, featured-images, translation-ready, block-styles, wide-blocks
*/

/* =========================================================
   LEYVA TOP LINE RECYCLING CENTER — Design System 2026
   Long Beach, CA · Autor: Grupo Gurú MKT
   ========================================================= */

/* ---------- 1. TOKENS ----------
   Paleta extraída del logotipo oficial de Leyva Top Line Recycling Center:
   teal #1B9BB9 (globo) + oro #E6B64B / #F3E683 / #A07B39 (flechas y tipografía)
------------------------------------------------------------------ */
:root{
  /* Marca */
  --ink:        #062731;  /* teal-navy profundo: fondos oscuros */
  --surface:    #0B3B49;
  --surface-2:  #114C5D;
  --line:       rgba(230,182,75,.18);

  /* Oro (acento brillante, siempre sobre fondo oscuro) */
  --lime:       #E6B64B;
  --lime-soft:  #F3E683;
  --gold-deep:  #A07B39;

  /* Teal (acento principal, texto sobre claro y degradados) */
  --emerald:    #0E7C99;
  --teal:       #1B9BB9;
  --teal-light: #4CB5CC;
  --teal-pale:  #CDEAF1;

  --copper:     #1B9BB9;
  --copper-soft:#4CB5CC;

  --paper:      #F4F9FB;
  --paper-2:    #E2EFF4;

  --txt-dark:   #062731;
  --txt-mute-d: #4A6771;
  --txt-light:  #E8F5F9;
  --txt-mute-l: #93B4BF;

  /* Tipografía */
  --font-head: "Sora", "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Escala fluida */
  --fs-display: clamp(2.4rem, 6.2vw, 4.6rem);
  --fs-h1:      clamp(2.1rem, 5vw, 3.4rem);
  --fs-h2:      clamp(1.75rem, 3.6vw, 2.7rem);
  --fs-h3:      clamp(1.15rem, 1.7vw, 1.4rem);
  --fs-lead:    clamp(1rem, 1.35vw, 1.18rem);

  /* Layout */
  --wrap: 1240px;
  --gap: clamp(1.1rem, 2.4vw, 2rem);
  --sec-y: clamp(4rem, 9vw, 7.5rem);
  --r-sm: 12px;
  --r-md: 20px;
  --r-lg: 28px;
  --r-xl: 36px;

  /* Sombras */
  --sh-1: 0 2px 10px rgba(6,39,49,.08);
  --sh-2: 0 14px 40px -14px rgba(6,39,49,.28);
  --sh-3: 0 30px 70px -24px rgba(6,39,49,.45);
  --glow: 0 0 0 1px rgba(230,182,75,.3), 0 18px 45px -18px rgba(230,182,75,.5);

  --ease: cubic-bezier(.22,1,.36,1);
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--font-body);
  background:var(--paper);
  color:var(--txt-dark);
  line-height:1.65;
  font-size:1rem;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img,svg{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
h1,h2,h3,h4{ font-family:var(--font-head); line-height:1.12; letter-spacing:-.02em; font-weight:800; }
h2{ font-size:var(--fs-h2); }
h3{ font-size:var(--fs-h3); }
:focus-visible{ outline:3px solid var(--lime); outline-offset:3px; border-radius:4px; }
::selection{ background:var(--lime); color:var(--ink); }

.container{ width:min(100% - 2.4rem, var(--wrap)); margin-inline:auto; }
section{ padding-block:var(--sec-y); position:relative; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ---------- 3. UTILIDADES DE SECCIÓN ---------- */
.kicker{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--font-head); font-size:.74rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--emerald);
  background:rgba(27,155,185,.1);
  border:1px solid rgba(27,155,185,.24);
  padding:.42rem .9rem; border-radius:999px;
}
.section-head{ max-width:760px; margin-bottom:clamp(2rem,4vw,3.2rem); }
.section-head.center{ margin-inline:auto; text-align:center; }
.section-head h2{ margin-top:1rem; }
.section-head p{ margin-top:1rem; color:var(--txt-mute-d); font-size:var(--fs-lead); }
.rule{ width:72px; height:4px; border-radius:99px; background:linear-gradient(90deg,var(--lime),var(--emerald)); margin-top:1.4rem; }
.section-head.center .rule{ margin-inline:auto; }

.sec-dark{ background:var(--ink); color:var(--txt-light); }
.sec-dark .section-head p{ color:var(--txt-mute-l); }
.sec-dark .kicker{ color:var(--lime); background:rgba(230,182,75,.09); border-color:rgba(230,182,75,.24); }
.sec-tint{ background:linear-gradient(180deg,var(--paper) 0%, var(--paper-2) 100%); }

/* ---------- 4. BOTONES ---------- */
.btn{
  --btn-bg:var(--lime); --btn-fg:var(--ink);
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-family:var(--font-head); font-weight:700; font-size:.95rem; letter-spacing:.01em;
  padding:.95rem 1.7rem; border-radius:999px; border:2px solid transparent;
  background:var(--btn-bg); color:var(--btn-fg); cursor:pointer;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s, color .3s;
  will-change:transform;
}
.btn:hover{ transform:translateY(-3px); box-shadow:var(--glow); }
.btn:active{ transform:translateY(-1px); }
/* Primario: degradado teal del logo, texto blanco (contraste AA en todo el degradado) */
.btn-primary{ background:linear-gradient(115deg,var(--teal),var(--emerald)); color:#FFFFFF; }
/* Oro: el acento de la marca, texto marrón oscuro para máximo contraste */
.btn-gold,
.btn-copper{ background:linear-gradient(115deg,var(--lime-soft),var(--lime) 55%,var(--gold-deep)); color:#33260A; }
.btn-outline{ background:transparent; color:var(--txt-light); border-color:rgba(232,245,249,.35); }
.btn-outline:hover{ background:rgba(232,245,249,.1); border-color:var(--lime); color:var(--lime); }
.btn-dark{ background:var(--ink); color:var(--txt-light); }
.btn-lg{ padding:1.1rem 2.1rem; font-size:1rem; }

/* ---------- 5. HEADER ---------- */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:80;
  padding-block:.85rem;
  transition:background .35s var(--ease), backdrop-filter .35s, box-shadow .35s, padding .35s;
}
.site-header.scrolled{
  background:rgba(6,39,49,.86);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  box-shadow:0 1px 0 var(--line), 0 20px 40px -30px #000;
  padding-block:.5rem;
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }

/* Logotipo oficial (PNG con transparencia) */
.brand{ display:flex; align-items:center; flex:none; }
.brand img{
  height:62px; width:auto;
  transition:transform .35s var(--ease), height .35s var(--ease), filter .35s;
  filter:drop-shadow(0 2px 12px rgba(0,0,0,.45));
}
.brand:hover img{ transform:scale(1.04); }
.site-header.scrolled .brand img{ height:52px; }
.site-footer .brand img{ height:76px; filter:none; }
/* Con menú hamburguesa sobra ancho: el logotipo puede respirar más */
@media (max-width:1080px){
  .brand img{ height:58px; }
  .site-header.scrolled .brand img{ height:50px; }
}
@media (max-width:560px){
  .brand img{ height:46px; }
  .site-header.scrolled .brand img{ height:42px; }
  .site-footer .brand img{ height:60px; }
}

.main-nav ul{ display:flex; align-items:center; gap:.35rem; }
.main-nav a{
  display:block; padding:.55rem .82rem; border-radius:999px;
  font-size:.9rem; font-weight:600; color:var(--txt-light);
  transition:color .25s, background .25s;
}
.main-nav a:hover, .main-nav a.active{ color:var(--lime); background:rgba(230,182,75,.1); }
.nav-cta{
  background:linear-gradient(115deg,var(--lime-soft),var(--lime) 60%,var(--gold-deep)) !important;
  color:#33260A !important; font-weight:800 !important;
  padding:.62rem 1.15rem !important; white-space:nowrap;
}
.nav-cta:hover{ box-shadow:var(--glow); }
.lang-switch{
  background:transparent; border:1px solid rgba(232,245,249,.28); color:var(--txt-light);
  border-radius:999px; padding:.45rem .8rem; font-size:.78rem; font-weight:700; cursor:pointer;
  transition:border-color .25s, color .25s;
}
.lang-switch:hover{ border-color:var(--lime); color:var(--lime); }
.nav-toggle{
  display:none; width:46px; height:46px; border:1px solid rgba(232,245,249,.25);
  background:rgba(6,39,49,.5); border-radius:12px; cursor:pointer;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.nav-toggle span{ width:20px; height:2px; background:var(--txt-light); border-radius:2px; transition:.3s var(--ease); }
.nav-toggle.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

@media (max-width:1080px){
  .nav-toggle{ display:flex; }
  .main-nav{
    position:absolute; top:calc(100% + .5rem); right:1.2rem; left:1.2rem;
    background:rgba(9,20,16,.97); backdrop-filter:blur(20px);
    border:1px solid var(--line); border-radius:var(--r-md); padding:1rem;
    opacity:0; visibility:hidden; transform:translateY(-12px);
    transition:.35s var(--ease);
  }
  .main-nav.open{ opacity:1; visibility:visible; transform:translateY(0); }
  .main-nav ul{ flex-direction:column; align-items:stretch; gap:.15rem; }
  .main-nav a{ padding:.8rem 1rem; }
  .nav-cta{ text-align:center; justify-content:center; margin-top:.5rem; }
}

/* ---------- 6. HERO PANORÁMICO ---------- */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:center;
  padding-block:9rem 4rem; overflow:hidden; background:var(--ink); color:var(--txt-light);
}
.hero-slides{ position:absolute; inset:0; }
.hero-slide{
  position:absolute; inset:0; background-size:cover; background-position:center;
  opacity:0; transform:scale(1.12);
  transition:opacity 1.5s var(--ease), transform 8s linear;
}
.hero-slide.is-active{ opacity:1; transform:scale(1); }
.hero::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg, rgba(6,39,49,.82) 0%, rgba(6,39,49,.7) 45%, rgba(6,39,49,.92) 100%),
    radial-gradient(75% 85% at 50% 40%, rgba(6,39,49,.55), rgba(6,39,49,.88) 75%),
    radial-gradient(60% 70% at 85% 12%, rgba(27,155,185,.24), transparent 62%);
}
.hero::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:140px; z-index:2;
  background:linear-gradient(180deg, transparent, var(--paper));
}
.hero .container{ position:relative; z-index:3; }

/* Contenido del hero centrado: el título es el ancla visual de cada diapositiva */
.hero-content{ max-width:940px; margin-inline:auto; text-align:center; }
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--font-head); font-size:.76rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--lime); background:rgba(230,182,75,.1); border:1px solid rgba(230,182,75,.3);
  padding:.5rem 1rem; border-radius:999px; backdrop-filter:blur(6px);
  animation:fadeUp .8s var(--ease) both;
}
.hero h1{
  font-size:var(--fs-display); margin-top:1.35rem; letter-spacing:-.035em;
  animation:fadeUp .8s .1s var(--ease) both;
}
.hero h1 em{
  font-style:normal;
  background:linear-gradient(115deg,var(--lime-soft),var(--lime) 45%,var(--teal-light));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero .lead{
  margin-top:1.4rem; max-width:640px; font-size:var(--fs-lead); color:#CBDCD4;
  animation:fadeUp .8s .2s var(--ease) both;
}
.hero .lead strong{ color:var(--txt-light); }
.hero-actions{ display:flex; flex-wrap:wrap; justify-content:center; gap:.85rem; margin-top:2.1rem; animation:fadeUp .8s .3s var(--ease) both; }

.hero-badges{ display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem; margin-top:1.9rem; animation:fadeUp .8s .4s var(--ease) both; }
.hero-badge{
  display:inline-flex; align-items:center; gap:.45rem;
  background:rgba(232,245,249,.07); border:1px solid rgba(232,245,249,.16);
  padding:.5rem .95rem; border-radius:999px; font-size:.83rem; font-weight:600;
  backdrop-filter:blur(8px);
}
.hero-badge b{ color:var(--lime); }

.hero-stats{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:.9rem; margin-top:2.6rem; max-width:820px; margin-inline:auto;
  animation:fadeUp .8s .5s var(--ease) both;
}
.hero-stat{
  background:rgba(232,245,249,.06); border:1px solid rgba(232,245,249,.14);
  border-radius:var(--r-md); padding:1.05rem 1.15rem; backdrop-filter:blur(10px);
  transition:transform .35s var(--ease), border-color .35s;
}
.hero-stat:hover{ transform:translateY(-5px); border-color:rgba(230,182,75,.45); }
.hero-stat strong{
  display:block; font-family:var(--font-head); font-size:1.6rem; font-weight:800; line-height:1;
  background:linear-gradient(115deg,var(--lime-soft),var(--lime));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-stat span{ display:block; margin-top:.35rem; font-size:.8rem; color:var(--txt-mute-l); line-height:1.35; }

.hero-dots{ position:absolute; bottom:2.6rem; right:clamp(1.2rem,5vw,4rem); z-index:4; display:flex; gap:.55rem; }
.hero-dots button{
  width:34px; height:4px; border:0; border-radius:99px; cursor:pointer;
  background:rgba(232,245,249,.3); transition:background .3s, width .3s;
}
.hero-dots button.is-active{ background:var(--lime); width:52px; }

.scroll-hint{
  position:absolute; bottom:2.4rem; left:50%; transform:translateX(-50%); z-index:4;
  font-size:.7rem; letter-spacing:.24em; text-transform:uppercase; color:var(--txt-mute-l);
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
}
.scroll-hint i{ width:1px; height:34px; background:linear-gradient(180deg,var(--lime),transparent); animation:scrollPulse 2s infinite; }
@media (max-width:900px){ .scroll-hint{ display:none; } }

@keyframes fadeUp{ from{ opacity:0; transform:translateY(26px);} to{ opacity:1; transform:none; } }
@keyframes scrollPulse{ 0%,100%{ opacity:.25; } 50%{ opacity:1; } }

/* ---------- 7. TICKER DE MATERIALES ---------- */
.ticker{
  background:var(--ink); border-block:1px solid var(--line);
  padding-block:.95rem; overflow:hidden; position:relative;
}
.ticker::before,.ticker::after{
  content:""; position:absolute; top:0; bottom:0; width:90px; z-index:2; pointer-events:none;
}
.ticker::before{ left:0; background:linear-gradient(90deg,var(--ink),transparent); }
.ticker::after{ right:0; background:linear-gradient(270deg,var(--ink),transparent); }
.ticker-track{ display:flex; gap:2.6rem; width:max-content; animation:marquee 34s linear infinite; }
.ticker:hover .ticker-track{ animation-play-state:paused; }
.ticker-track span{
  display:inline-flex; align-items:center; gap:.6rem; white-space:nowrap;
  font-family:var(--font-head); font-weight:700; font-size:.92rem; letter-spacing:.05em;
  color:var(--txt-mute-l); text-transform:uppercase;
}
.ticker-track span::before{ content:"♻"; color:var(--lime); font-size:1.05rem; }
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* ---------- 8. BENTO DE BENEFICIOS ---------- */
.bento{ display:grid; grid-template-columns:repeat(12,1fr); gap:var(--gap); }
.bcard{
  grid-column:span 3; position:relative; overflow:hidden;
  background:#fff; border:1px solid rgba(6,39,49,.07); border-radius:var(--r-lg);
  padding:1.9rem 1.7rem; box-shadow:var(--sh-1);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s;
}
.bcard::after{
  content:""; position:absolute; inset:auto -30% -60% auto; width:220px; height:220px; border-radius:50%;
  background:radial-gradient(circle,rgba(230,182,75,.28),transparent 68%);
  opacity:0; transition:opacity .5s var(--ease);
}
.bcard:hover{ transform:translateY(-8px); box-shadow:var(--sh-2); border-color:rgba(27,155,185,.35); }
.bcard:hover::after{ opacity:1; }
.bcard-ic{
  width:54px; height:54px; border-radius:16px; display:grid; place-items:center; font-size:1.5rem;
  background:linear-gradient(135deg,rgba(230,182,75,.2),rgba(27,155,185,.16));
  border:1px solid rgba(27,155,185,.24); margin-bottom:1.1rem;
}
.bcard h3{ margin-bottom:.55rem; }
.bcard p{ color:var(--txt-mute-d); font-size:.94rem; position:relative; z-index:1; }
.bcard.wide{ grid-column:span 6; }
.bcard.feature{
  grid-column:span 6; background:var(--ink); color:var(--txt-light);
  border-color:var(--line); display:flex; flex-direction:column; justify-content:center;
}
.bcard.feature h3{ font-size:clamp(1.35rem,2.4vw,1.9rem); }
.bcard.feature p{ color:var(--txt-mute-l); }
@media (max-width:980px){ .bcard{ grid-column:span 6; } .bcard.wide,.bcard.feature{ grid-column:span 12; } }
@media (max-width:600px){ .bcard{ grid-column:span 12; } }

/* ---------- 9. DRIVE-THRU (split) ---------- */
.split{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; }
@media (max-width:960px){ .split{ grid-template-columns:1fr; } }
.split-media{ position:relative; border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--sh-3); }
.split-media img{ width:100%; height:clamp(300px,44vw,520px); object-fit:cover; transition:transform 1.1s var(--ease); }
.split-media:hover img{ transform:scale(1.06); }
.split-media .float-tag{
  position:absolute; left:1.3rem; bottom:1.3rem; z-index:2;
  background:rgba(6,39,49,.82); backdrop-filter:blur(14px); border:1px solid var(--line);
  border-radius:var(--r-md); padding:.9rem 1.2rem; color:var(--txt-light);
  display:flex; align-items:center; gap:.85rem; max-width:82%;
}
.float-tag .ft-ic{ font-size:1.6rem; }
.float-tag strong{ display:block; font-family:var(--font-head); font-size:.98rem; }
.float-tag span{ font-size:.8rem; color:var(--txt-mute-l); }

.check-list{ display:grid; gap:.85rem; margin-top:1.8rem; }
.check-list li{ display:flex; gap:.8rem; align-items:flex-start; font-size:.98rem; }
.check-list li::before{
  content:"✓"; flex:none; width:26px; height:26px; border-radius:50%;
  background:linear-gradient(135deg,var(--lime),var(--emerald)); color:var(--ink);
  display:grid; place-items:center; font-weight:900; font-size:.82rem; margin-top:2px;
}
.sec-dark .check-list li{ color:#CBDCD4; }

/* ---------- 10. MATERIALES / SERVICIOS ---------- */
.grid-3{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:var(--gap); }
.mcard{
  background:#fff; border:1px solid rgba(6,39,49,.07); border-radius:var(--r-lg);
  overflow:hidden; box-shadow:var(--sh-1); display:flex; flex-direction:column;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.mcard:hover{ transform:translateY(-9px); box-shadow:var(--sh-2); }
.mcard-media{ position:relative; aspect-ratio:16/10; overflow:hidden; }
.mcard-media img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease); }
.mcard:hover .mcard-media img{ transform:scale(1.09); }
.mcard-media::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 45%,rgba(6,39,49,.55)); }
.mcard-price{
  position:absolute; z-index:2; top:.9rem; right:.9rem;
  background:rgba(6,39,49,.82); backdrop-filter:blur(10px); color:var(--lime);
  font-family:var(--font-head); font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  padding:.38rem .75rem; border-radius:999px; border:1px solid rgba(230,182,75,.3);
}
.mcard-body{ padding:1.5rem 1.5rem 1.7rem; flex:1; display:flex; flex-direction:column; }
.mcard-body h3{ margin-bottom:.5rem; }
.mcard-body p{ color:var(--txt-mute-d); font-size:.93rem; flex:1; }
.tags{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:1.1rem; }
.tag{
  font-size:.72rem; font-weight:700; letter-spacing:.04em;
  background:var(--paper-2); color:#2E4A3E; border-radius:999px; padding:.3rem .68rem;
}
.sec-dark .mcard{ background:var(--surface-2); border-color:var(--line); color:var(--txt-light); }
.sec-dark .mcard-body p{ color:var(--txt-mute-l); }
.sec-dark .tag{ background:rgba(230,182,75,.12); color:var(--lime-soft); }

/* ---------- 11. PROCESO ---------- */
.steps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:var(--gap); counter-reset:s; }
.step{ position:relative; padding-top:2.6rem; }
.step::before{
  counter-increment:s; content:counter(s,decimal-leading-zero);
  position:absolute; top:0; left:0;
  font-family:var(--font-head); font-size:2.6rem; font-weight:800; line-height:1;
  background:linear-gradient(115deg,var(--lime),var(--emerald));
  -webkit-background-clip:text; background-clip:text; color:transparent; opacity:.85;
}
.step h3{ margin-bottom:.5rem; }
.step p{ color:var(--txt-mute-l); font-size:.94rem; }
.step::after{
  content:""; position:absolute; top:1.15rem; left:3.4rem; right:-1rem; height:1px;
  background:linear-gradient(90deg,var(--line),transparent);
}
.step:last-child::after{ display:none; }
@media (max-width:760px){ .step::after{ display:none; } }

/* ---------- 12. ZONAS DE SERVICIO ---------- */
.zones{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.6rem; }
.zone{
  display:inline-flex; align-items:center; gap:.45rem;
  border:1px solid rgba(27,155,185,.3); background:rgba(27,155,185,.07);
  color:#1B6B4C; border-radius:999px; padding:.6rem 1.15rem; font-weight:700; font-size:.9rem;
  transition:transform .3s var(--ease), background .3s;
}
.zone:hover{ transform:translateY(-3px); background:rgba(27,155,185,.16); }
.sec-dark .zone{ color:var(--lime-soft); border-color:rgba(230,182,75,.28); background:rgba(230,182,75,.08); }

.map-frame{
  border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--sh-3);
  border:1px solid var(--line); min-height:340px; background:var(--surface-2);
}
.map-frame iframe{ width:100%; height:100%; min-height:400px; border:0; display:block; filter:grayscale(.2) contrast(1.05); }

/* ---------- 12b. UBICACIONES: banda bajo el hero ----------
   El área de servicio es el principal criterio de decisión de un cliente local,
   así que se muestra completa antes de cualquier otro contenido.
------------------------------------------------------------------ */
.areas-band{
  position:relative; z-index:4;
  background:linear-gradient(115deg, var(--surface) 0%, var(--surface-2) 55%, var(--surface) 100%);
  border-block:1px solid var(--line);
  padding-block:clamp(1.5rem,3vw,2.3rem);
  overflow:hidden;
}
.areas-band::before{
  content:""; position:absolute; inset:-60% 55% auto auto; width:420px; height:420px; border-radius:50%;
  background:radial-gradient(circle, rgba(230,182,75,.16), transparent 68%); pointer-events:none;
}
.areas-band-inner{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:clamp(.9rem,2vw,1.8rem); position:relative;
}
.areas-band-label{
  display:inline-flex; align-items:center; gap:.6rem; flex:none;
  font-family:var(--font-head); font-size:.78rem; font-weight:800;
  letter-spacing:.16em; text-transform:uppercase; color:var(--lime);
  padding-right:clamp(.9rem,2vw,1.6rem);
  border-right:1px solid rgba(230,182,75,.28);
}
.areas-band-label .ab-ic{ font-size:1.25rem; }
.areas-band-list{ display:flex; flex-wrap:wrap; justify-content:center; gap:.55rem; }

.area-pill{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.62rem 1.15rem; border-radius:999px;
  background:rgba(232,245,249,.06);
  border:1px solid rgba(230,182,75,.32);
  color:var(--txt-light);
  font-family:var(--font-head); font-weight:700; font-size:.92rem;
  white-space:nowrap;
  transition:transform .3s var(--ease), background .3s, border-color .3s, color .3s;
}
.area-pill::before{ content:"📍"; font-size:.95rem; }
.area-pill:hover{
  transform:translateY(-3px);
  background:linear-gradient(115deg,var(--lime-soft),var(--lime) 60%,var(--gold-deep));
  border-color:transparent; color:#33260A;
}
@media (max-width:760px){
  .areas-band-label{ border-right:0; border-bottom:1px solid rgba(230,182,75,.28); padding:0 0 .8rem; width:100%; justify-content:center; }
}

/* ---------- 12c. UBICACIONES: tarjetas de la sección Zonas ---------- */
.area-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(165px,1fr));
  gap:.9rem; margin-top:1.9rem;
}
.area-card{
  display:flex; flex-direction:column; gap:.3rem;
  padding:1.3rem 1.2rem; border-radius:var(--r-md);
  background:#fff; border:1px solid rgba(6,39,49,.08);
  box-shadow:var(--sh-1); text-align:left;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
}
.area-card:hover{
  transform:translateY(-6px); box-shadow:var(--sh-2); border-color:rgba(27,155,185,.45);
}
.area-card .ac-pin{
  width:38px; height:38px; border-radius:12px; display:grid; place-items:center;
  font-size:1.05rem; margin-bottom:.55rem;
  background:linear-gradient(135deg, rgba(230,182,75,.22), rgba(27,155,185,.16));
  border:1px solid rgba(27,155,185,.24);
}
.area-card strong{
  font-family:var(--font-head); font-size:1.02rem; letter-spacing:-.01em; line-height:1.2;
}
.area-card span{ font-size:.8rem; color:var(--txt-mute-d); }
.area-card .ac-go{
  margin-top:.6rem; font-family:var(--font-head); font-weight:700;
  font-size:.78rem; color:var(--emerald);
  opacity:0; transform:translateY(-4px);
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.area-card:hover .ac-go{ opacity:1; transform:none; }

.sec-dark .area-card{ background:var(--surface-2); border-color:var(--line); color:var(--txt-light); }
.sec-dark .area-card span{ color:var(--txt-mute-l); }
.sec-dark .area-card .ac-go{ color:var(--lime); }

/* Aviso destacado de cobertura */
.area-note{
  margin-top:1.6rem; padding:1rem 1.3rem; border-radius:var(--r-md);
  background:linear-gradient(115deg, rgba(230,182,75,.14), rgba(27,155,185,.1));
  border-left:4px solid var(--lime);
  font-size:.94rem; font-weight:600;
}
.sec-dark .area-note{ color:var(--txt-light); }

/* ---------- 13. GALERÍA ---------- */
.gallery{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:190px; gap:.9rem; }
.gitem{ position:relative; overflow:hidden; border-radius:var(--r-md); background:var(--surface-2); }
.gitem img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease); }
.gitem:hover img{ transform:scale(1.09); }
.gitem span{
  position:absolute; inset:auto 0 0 0; z-index:2; padding:1.6rem .95rem .85rem;
  background:linear-gradient(180deg,transparent,rgba(6,39,49,.88));
  color:#fff; font-size:.82rem; font-weight:600;
}
.gitem.tall{ grid-row:span 2; }
.gitem.wide{ grid-column:span 2; }
@media (max-width:900px){ .gallery{ grid-template-columns:repeat(2,1fr); grid-auto-rows:160px; } .gitem.wide{ grid-column:span 2; } }

/* ---------- 14. SECTORES / CLIENTES ---------- */
.sector-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:.9rem; }
.sector{
  text-align:center; padding:1.6rem 1rem; border-radius:var(--r-md);
  background:rgba(232,245,249,.05); border:1px solid rgba(232,245,249,.12);
  transition:transform .4s var(--ease), border-color .4s, background .4s;
}
.sector:hover{ transform:translateY(-6px); border-color:rgba(230,182,75,.4); background:rgba(230,182,75,.07); }
.sector .s-ic{ font-size:1.9rem; }
.sector strong{ display:block; margin-top:.6rem; font-family:var(--font-head); font-size:.95rem; }
.sector span{ font-size:.79rem; color:var(--txt-mute-l); }

/* ---------- 15. TESTIMONIOS ---------- */
.tgrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:var(--gap); }
.tcard{
  background:#fff; border:1px solid rgba(6,39,49,.07); border-radius:var(--r-lg);
  padding:2rem 1.8rem; box-shadow:var(--sh-1); position:relative;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.tcard::before{
  content:"”"; position:absolute; top:.4rem; right:1.4rem;
  font-family:Georgia,serif; font-size:5rem; line-height:1; color:rgba(27,155,185,.15);
}
.tcard:hover{ transform:translateY(-7px); box-shadow:var(--sh-2); }
.stars{ color:#F5B400; letter-spacing:.16em; font-size:1rem; }
.tcard blockquote{ margin:.9rem 0 1.4rem; font-size:.97rem; color:#2C3F37; font-style:italic; }
.tauthor{ display:flex; align-items:center; gap:.8rem; }
.avatar{
  width:44px; height:44px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--lime),var(--emerald)); color:var(--ink);
  font-family:var(--font-head); font-weight:800; font-size:.88rem;
}
.tauthor strong{ display:block; font-size:.92rem; }
.tauthor span{ font-size:.79rem; color:var(--txt-mute-d); }

/* ---------- 16. CTA BANNER ---------- */
.cta-banner{
  position:relative; overflow:hidden; border-radius:var(--r-xl);
  background:linear-gradient(115deg,var(--ink),#12251D 55%,#123A2A);
  color:var(--txt-light); padding:clamp(2.4rem,5vw,4rem); text-align:center;
  box-shadow:var(--sh-3);
}
.cta-banner::before{
  content:""; position:absolute; top:-40%; right:-10%; width:520px; height:520px; border-radius:50%;
  background:radial-gradient(circle,rgba(230,182,75,.22),transparent 65%);
}
.cta-banner::after{
  content:""; position:absolute; bottom:-45%; left:-8%; width:460px; height:460px; border-radius:50%;
  background:radial-gradient(circle,rgba(27,155,185,.18),transparent 65%);
}
.cta-banner > *{ position:relative; z-index:1; }
.cta-banner h2{ max-width:800px; margin-inline:auto; }
.cta-banner p{ max-width:620px; margin:1rem auto 2rem; color:#CBDCD4; font-size:var(--fs-lead); }
.cta-actions{ display:flex; flex-wrap:wrap; gap:.85rem; justify-content:center; }

/* ---------- 17. CONTACTO / FORM ---------- */
.contact-wrap{ display:grid; grid-template-columns:.92fr 1.08fr; gap:clamp(2rem,4.5vw,3.6rem); align-items:start; }
@media (max-width:980px){ .contact-wrap{ grid-template-columns:1fr; } }
.contact-list{ display:grid; gap:1.1rem; margin-top:1.8rem; }
.contact-list li{ display:flex; gap:1rem; align-items:flex-start; }
.contact-ic{
  width:44px; height:44px; flex:none; border-radius:14px; display:grid; place-items:center; font-size:1.15rem;
  background:linear-gradient(135deg,rgba(230,182,75,.18),rgba(27,155,185,.14));
  border:1px solid rgba(27,155,185,.25);
}
.contact-list strong{ display:block; font-family:var(--font-head); font-size:.95rem; margin-bottom:.15rem; }
.contact-list a, .contact-list span{ color:var(--txt-mute-d); font-size:.92rem; }
.contact-list a:hover{ color:var(--emerald); }
.sec-dark .contact-list a, .sec-dark .contact-list span{ color:var(--txt-mute-l); }
.sec-dark .contact-list a:hover{ color:var(--lime); }

.contact-form{
  background:#fff; border:1px solid rgba(6,39,49,.08); border-radius:var(--r-xl);
  padding:clamp(1.6rem,3vw,2.6rem); box-shadow:var(--sh-2);
}
.sec-dark .contact-form{ background:var(--surface-2); border-color:var(--line); }
.contact-form h3{ font-size:1.5rem; }
.contact-form > p{ color:var(--txt-mute-d); font-size:.92rem; margin-top:.4rem; margin-bottom:1.6rem; }
.sec-dark .contact-form > p{ color:var(--txt-mute-l); }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media (max-width:520px){ .form-row{ grid-template-columns:1fr; } }
.field{ margin-bottom:1rem; }
.field label{ display:block; font-size:.83rem; font-weight:700; margin-bottom:.4rem; }
.field input,.field select,.field textarea{
  width:100%; padding:.85rem 1rem; border-radius:14px;
  border:1.5px solid rgba(6,39,49,.14); background:var(--paper);
  font-size:.94rem; transition:border-color .25s, box-shadow .25s, background .25s;
}
.sec-dark .field input,.sec-dark .field select,.sec-dark .field textarea{
  background:rgba(6,39,49,.5); border-color:rgba(232,245,249,.16); color:var(--txt-light);
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--emerald); background:#fff;
  box-shadow:0 0 0 4px rgba(27,155,185,.14);
}
.sec-dark .field input:focus,.sec-dark .field select:focus,.sec-dark .field textarea:focus{ background:rgba(6,39,49,.75); }
.field textarea{ resize:vertical; min-height:110px; }
.form-submit{ width:100%; margin-top:.4rem; }
.form-note{ font-size:.78rem; color:var(--txt-mute-d); text-align:center; margin-top:.9rem; }
.sec-dark .form-note{ color:var(--txt-mute-l); }
.hp{ position:absolute; left:-9999px; opacity:0; height:0; width:0; }

/* ---------- 17b. RESUMEN DE CONTACTO (portada y Servicios) ----------
   Cuatro accesos directos en vez del formulario completo: la portada informa,
   la página de Contacto convierte.
------------------------------------------------------------------ */
.contact-quick{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:var(--gap);
}
.cq-card{
  display:flex; flex-direction:column; gap:.25rem;
  padding:1.6rem 1.5rem; border-radius:var(--r-lg);
  background:rgba(232,245,249,.05);
  border:1px solid rgba(232,245,249,.14);
  color:var(--txt-light);
  transition:transform .4s var(--ease), background .4s, border-color .4s;
}
a.cq-card:hover{
  transform:translateY(-6px);
  background:rgba(230,182,75,.09);
  border-color:rgba(230,182,75,.45);
}
.cq-ic{
  width:48px; height:48px; border-radius:14px; display:grid; place-items:center;
  font-size:1.3rem; margin-bottom:.7rem;
  background:linear-gradient(135deg, rgba(230,182,75,.2), rgba(27,155,185,.16));
  border:1px solid rgba(27,155,185,.26);
}
.cq-card strong{
  font-family:var(--font-head); font-size:.78rem; font-weight:800;
  letter-spacing:.14em; text-transform:uppercase; color:var(--lime);
}
.cq-value{ font-size:.98rem; font-weight:600; line-height:1.5; }

/* ---------- 18. FAQ ---------- */
.faq{ display:grid; gap:.8rem; max-width:900px; margin-inline:auto; }
.faq details{
  background:#fff; border:1px solid rgba(6,39,49,.08); border-radius:var(--r-md);
  padding:1.15rem 1.4rem; box-shadow:var(--sh-1); transition:border-color .3s;
}
.faq details[open]{ border-color:rgba(27,155,185,.4); }
.faq summary{
  cursor:pointer; list-style:none; font-family:var(--font-head); font-weight:700; font-size:1rem;
  display:flex; justify-content:space-between; gap:1rem; align-items:center;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; font-size:1.5rem; color:var(--emerald); line-height:1; transition:transform .3s var(--ease); }
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq p{ margin-top:.9rem; color:var(--txt-mute-d); font-size:.94rem; }

/* ---------- 19. PAGE HERO (subpáginas) ---------- */
.page-hero{
  position:relative; padding-block:10rem 4.5rem; background:var(--ink); color:var(--txt-light);
  background-size:cover; background-position:center; overflow:hidden;
}
.page-hero::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(105deg,rgba(6,39,49,.94),rgba(6,39,49,.62)),
             radial-gradient(60% 80% at 90% 10%,rgba(27,155,185,.28),transparent 65%);
}
.page-hero .container{ position:relative; z-index:1; }
.page-hero h1{ font-size:var(--fs-h1); margin-top:1rem; max-width:900px; }
.page-hero p{ margin-top:1rem; max-width:680px; color:#CBDCD4; font-size:var(--fs-lead); }
.crumbs{ font-size:.82rem; color:var(--txt-mute-l); }
.crumbs a:hover{ color:var(--lime); }

/* ---------- 20. BLOG ---------- */
.post-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(310px,1fr)); gap:var(--gap); }
.post-card{
  background:#fff; border:1px solid rgba(6,39,49,.07); border-radius:var(--r-lg); overflow:hidden;
  box-shadow:var(--sh-1); display:flex; flex-direction:column;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.post-card:hover{ transform:translateY(-8px); box-shadow:var(--sh-2); }
.post-card img{ aspect-ratio:16/9; object-fit:cover; width:100%; }
.post-body{ padding:1.5rem; display:flex; flex-direction:column; flex:1; }
.post-meta{ font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; color:var(--emerald); font-weight:700; }
.post-body h3{ margin:.6rem 0 .6rem; font-size:1.14rem; }
.post-body p{ color:var(--txt-mute-d); font-size:.92rem; flex:1; }
.post-link{ margin-top:1.1rem; font-weight:800; font-family:var(--font-head); font-size:.88rem; color:var(--emerald); }
.post-link:hover{ color:var(--copper); }

.article{ max-width:780px; margin-inline:auto; }
.article h2{ font-size:1.7rem; margin-top:2.4rem; }
.article h3{ margin-top:1.8rem; }
.article p{ margin-top:1rem; color:#33453C; }
.article ul{ margin-top:1rem; display:grid; gap:.6rem; }
.article ul li{ padding-left:1.5rem; position:relative; color:#33453C; }
.article ul li::before{ content:"▸"; position:absolute; left:0; color:var(--emerald); font-weight:900; }
.article img{ border-radius:var(--r-md); margin-top:1.8rem; }
.article .callout{
  margin-top:2rem; background:linear-gradient(115deg,rgba(230,182,75,.12),rgba(27,155,185,.08));
  border-left:4px solid var(--emerald); border-radius:0 var(--r-md) var(--r-md) 0; padding:1.3rem 1.5rem;
}

/* ---------- 21. FOOTER ---------- */
.site-footer{ background:var(--ink); color:var(--txt-light); padding-block:clamp(3rem,6vw,4.5rem) 2rem; }
.footer-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.3fr; gap:2.4rem; }
@media (max-width:900px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:540px){ .footer-grid{ grid-template-columns:1fr; } }
.footer-brand p{ margin-top:1.1rem; color:var(--txt-mute-l); font-size:.9rem; max-width:340px; }
.site-footer h4{ font-size:.8rem; letter-spacing:.16em; text-transform:uppercase; color:var(--lime); margin-bottom:1.1rem; }
.site-footer ul{ display:grid; gap:.65rem; }
.site-footer ul a{ color:var(--txt-mute-l); font-size:.9rem; transition:color .25s, padding-left .25s; }
.site-footer ul a:hover{ color:var(--lime); padding-left:5px; }
.social-row{ display:flex; gap:.6rem; margin-top:1.4rem; }
.social-row a{
  width:40px; height:40px; border-radius:12px; display:grid; place-items:center;
  border:1px solid rgba(232,245,249,.18); color:var(--txt-light);
  transition:background .3s, border-color .3s, transform .3s var(--ease), color .3s;
}
.social-row a:hover{ background:var(--lime); color:var(--ink); border-color:var(--lime); transform:translateY(-4px); }
.social-row svg{ width:18px; height:18px; }
.footer-bottom{
  margin-top:2.6rem; padding-top:1.6rem; border-top:1px solid rgba(232,245,249,.1);
  text-align:center; color:var(--txt-mute-l); font-size:.82rem;
}
.seo-line{ opacity:.5; font-size:.73rem; display:block; margin-top:.5rem; line-height:1.7; }

/* ---------- 22. FLOTANTES ---------- */
.fab-stack{ position:fixed; right:1.1rem; bottom:1.1rem; z-index:70; display:grid; gap:.7rem; }
.fab{
  width:56px; height:56px; border-radius:50%; display:grid; place-items:center;
  color:#fff; font-size:1.5rem; box-shadow:var(--sh-2); border:0; cursor:pointer;
  transition:transform .3s var(--ease), box-shadow .3s;
}
.fab:hover{ transform:scale(1.09) translateY(-2px); }
.fab-wa{ background:#25D366; position:relative; }
.fab-wa::after{
  content:""; position:absolute; inset:0; border-radius:50%; border:2px solid #25D366;
  animation:ping 2.4s cubic-bezier(0,0,.2,1) infinite;
}
.fab-tel{ background:linear-gradient(135deg,var(--lime),var(--emerald)); color:var(--ink); }
.fab svg{ width:28px; height:28px; }
@keyframes ping{ 75%,100%{ transform:scale(1.7); opacity:0; } }

/* Botón "volver al inicio" — píldora con etiqueta, se expande al pasar el cursor */
.back-to-top{
  position:fixed; left:1.1rem; bottom:1.1rem; z-index:70;
  display:inline-flex; align-items:center; gap:.5rem;
  height:50px; padding:0 1.05rem; border-radius:999px;
  border:1px solid rgba(230,182,75,.45);
  background:linear-gradient(115deg, rgba(6,39,49,.94), rgba(17,76,93,.94));
  color:var(--lime); cursor:pointer;
  font-family:var(--font-head); font-weight:700; font-size:.84rem;
  box-shadow:var(--sh-2); backdrop-filter:blur(10px);
  opacity:0; visibility:hidden; transform:translateY(14px);
  transition:opacity .35s var(--ease), transform .35s var(--ease), visibility .35s,
             background .3s, border-color .3s, color .3s;
}
.back-to-top.show{ opacity:1; visibility:visible; transform:none; }
.back-to-top:hover{
  background:linear-gradient(115deg,var(--lime-soft),var(--lime) 55%,var(--gold-deep));
  color:#33260A; border-color:transparent; transform:translateY(-3px);
}
.back-to-top .btt-arrow{
  font-size:1.05rem; line-height:1;
  animation:bttBounce 2.2s var(--ease) infinite;
}
.back-to-top:hover .btt-arrow{ animation:none; }
.back-to-top .btt-label{ white-space:nowrap; }
@keyframes bttBounce{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-4px);} }

/* En pantallas de una sola columna se reduce a un círculo para no tapar el texto */
@media (max-width:900px){
  .back-to-top{ padding:0; width:48px; height:48px; justify-content:center; }
  .back-to-top .btt-label{ display:none; }
}

/* ---------- 23. REVEAL ---------- */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.visible{ opacity:1; transform:none; }
.reveal:nth-child(2){ transition-delay:.08s; }
.reveal:nth-child(3){ transition-delay:.16s; }
.reveal:nth-child(4){ transition-delay:.24s; }
.reveal:nth-child(5){ transition-delay:.32s; }
.reveal:nth-child(6){ transition-delay:.4s; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1; transform:none; }
}

/* ---------- 24. PRINT ---------- */
@media print{
  .site-header,.fab-stack,.back-to-top,.hero-dots,.ticker{ display:none !important; }
  body{ background:#fff; color:#000; }
}

/* =========================================================
   25. CLASES PROPIAS DE WORDPRESS
   (paginación, buscador, avisos del formulario, bloques del editor)
   ========================================================= */

/* ---- Enlace de salto y lector de pantalla ---- */
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--lime); color:var(--ink); padding:.8rem 1.4rem;
  font-family:var(--font-head); font-weight:700; border-radius:0 0 12px 0;
}
.skip-link:focus{ left:0; width:auto; height:auto; clip:auto; white-space:normal; }
.screen-reader-text{
  position:absolute; width:1px; height:1px; padding:0; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---- Avisos del formulario ---- */
.form-alert{
  border-radius:14px; padding:.9rem 1.15rem; margin-bottom:1.4rem;
  font-size:.92rem; font-weight:600; line-height:1.5;
  border:1px solid transparent;
}
.form-alert--ok{
  background:rgba(27,155,185,.14); border-color:rgba(27,155,185,.45); color:#0B4C5E;
}
.form-alert--err{
  background:rgba(192,57,43,.1); border-color:rgba(192,57,43,.4); color:#8E2A20;
}
.sec-dark .form-alert--ok{ color:var(--teal-pale); }
.sec-dark .form-alert--err{ background:rgba(192,57,43,.18); color:#F3B4AD; }

/* ---- Buscador ---- */
.search-form{ display:flex; gap:.6rem; align-items:stretch; }
.search-form .search-field{
  flex:1; padding:.85rem 1.1rem; border-radius:999px;
  border:1.5px solid rgba(6,39,49,.16); background:#fff; font-size:.94rem;
  transition:border-color .25s, box-shadow .25s;
}
.search-form .search-field:focus{
  outline:none; border-color:var(--teal); box-shadow:0 0 0 4px rgba(27,155,185,.16);
}
.sec-dark .search-form .search-field{
  background:rgba(6,39,49,.55); border-color:rgba(232,245,249,.2); color:var(--txt-light);
}
.search-form .btn{ padding-inline:1.4rem; white-space:nowrap; }

/* ---- Paginación ---- */
.pagination{ margin-top:clamp(2.5rem,5vw,4rem); }
.pagination .nav-links{
  display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; align-items:center;
}
.pagination .page-numbers{
  display:grid; place-items:center; min-width:46px; height:46px; padding:0 .9rem;
  border-radius:999px; border:1px solid rgba(6,39,49,.14);
  font-family:var(--font-head); font-weight:700; font-size:.92rem;
  color:var(--txt-dark); background:#fff;
  transition:transform .3s var(--ease), background .3s, color .3s, border-color .3s;
}
.pagination .page-numbers:hover{
  transform:translateY(-3px); border-color:var(--teal); color:var(--emerald);
}
.pagination .page-numbers.current{
  background:linear-gradient(115deg,var(--teal),var(--emerald));
  border-color:transparent; color:#fff;
}
.pagination .page-numbers.dots{ border:0; background:transparent; }

/* Enlaces entre páginas de una misma entrada */
.page-links{
  margin-top:2rem; display:flex; gap:.5rem; flex-wrap:wrap; align-items:center;
  font-family:var(--font-head); font-weight:700; font-size:.9rem;
}
.page-links a{ color:var(--emerald); }
.page-links a:hover{ color:var(--copper); }

/* ---- Bloques del editor dentro de .article ---- */
.article .alignwide{ width:min(100%, 1100px); margin-inline:auto; }
.article .alignfull{ width:100vw; margin-left:calc(50% - 50vw); }
.article .alignleft{ float:left; margin:.5rem 1.6rem 1rem 0; max-width:45%; }
.article .alignright{ float:right; margin:.5rem 0 1rem 1.6rem; max-width:45%; }
.article .aligncenter{ margin-inline:auto; }
.article figure{ margin-top:1.8rem; }
.article figcaption{
  margin-top:.6rem; font-size:.83rem; color:var(--txt-mute-d); text-align:center;
}
.article blockquote{
  margin-top:2rem; padding:1.3rem 1.6rem;
  background:linear-gradient(115deg,rgba(230,182,75,.12),rgba(27,155,185,.08));
  border-left:4px solid var(--teal); border-radius:0 var(--r-md) var(--r-md) 0;
  font-style:italic; color:#233F48;
}
.article blockquote cite{ display:block; margin-top:.7rem; font-style:normal; font-size:.86rem; font-weight:700; }
.article ol{ margin-top:1rem; padding-left:1.4rem; list-style:decimal; }
.article ol li{ margin-bottom:.5rem; color:#33453C; }
.article table{ width:100%; border-collapse:collapse; margin-top:1.8rem; font-size:.93rem; }
.article th, .article td{ padding:.75rem 1rem; border:1px solid rgba(6,39,49,.12); text-align:left; }
.article th{ background:var(--paper-2); font-family:var(--font-head); }
.article pre{
  margin-top:1.8rem; padding:1.2rem; border-radius:var(--r-md); overflow-x:auto;
  background:var(--ink); color:var(--teal-pale); font-size:.86rem;
}
.article code{ background:var(--paper-2); padding:.15em .45em; border-radius:6px; font-size:.9em; }
.article pre code{ background:none; padding:0; }
.article a:not(.btn){ color:var(--emerald); text-decoration:underline; text-underline-offset:3px; }
.article a:not(.btn):hover{ color:var(--copper); }

/* Título del post dentro de la tarjeta */
.post-body h3 a{ transition:color .25s; }
.post-body h3 a:hover{ color:var(--emerald); }

/* Barra de administración: evita que tape la cabecera fija */
body.admin-bar .site-header{ top:32px; }
@media (max-width:782px){ body.admin-bar .site-header{ top:46px; } }