/* ===================== VARIABLES GLOBALES ===================== */
:root{
  /* Paleta y layout base */
  --ink:#333; --ink-soft:#666;
  --paper:#fff; --paper-2:#f5f7f4;
  --faq-bg:#f5faf4;
  --sidenav-w:240px;

  /* Marca y botones */
  --pca-dark:#4b5842; --pca-light:#dcedc8; --pca-light-hover:#aedb76; --pca-light-border:#9fbd86;
  --btn-radius:0; --btn-ring:rgba(139,195,74,.40);

  /* Logo sidenav */
  --logo-max-h:265px; --logo-min-h:230px; --logo-min-scale:0.9;

  /* Verdes comunes */
  --verde-comun:#2e7d32; --verde-comun-osc:#33691e;

  /* Mini-footer */
  --brand-green:#7cb342; --green-700:#5b8f2f;

  /* Hero con fondo (puedes sobrescribir --hero-bg inline) */
  --hero-bg:none;
}

/* ===================== BASE LAYOUT ===================== */
.home-index{ color:var(--ink); }
.section{ padding:4rem 0; }
.section--tight{ padding:3rem 0; }
.container{ max-width:1080px; margin:0 auto; padding:0 1rem; }
.center{ text-align:center; }

/* ===================== HERO (minimal + impacto) ===================== */
.hero-impact{ padding:2.75rem 0 2rem; }
.hero-title{
  font-family:"Lora",serif; font-weight:700;
  font-size:clamp(1.8rem,3.8vw,3rem); line-height:1.15;
  color:#2b3326; margin:0 0 .6rem;
}
/* Rotador simple (solo CSS) */
.hero-rotator{ display:inline-block; height:1em; overflow:hidden; vertical-align:baseline; }
.hero-rotator b{ display:block; animation:heroSlide 9s infinite; }
.hero-rotator b:nth-child(2){ animation-delay:3s; }
.hero-rotator b:nth-child(3){ animation-delay:6s; }
@keyframes heroSlide{
  0%{transform:translateY(0);opacity:1} 28%{transform:translateY(0);opacity:1}
  33%{opacity:0} 34%{transform:translateY(-100%);opacity:0}
  38%{opacity:1} 100%{transform:translateY(-100%);opacity:1}
}
.hero-sub{ max-width:70ch; margin:0 auto 1rem; font-size:clamp(1rem,2.1vw,1.2rem); color:#4b5842; }

/* Chips */
.hero-chips{ list-style:none; display:flex; flex-wrap:wrap; gap:.5rem .6rem; justify-content:center; margin:.4rem 0 1.25rem; padding:0; }
.hero-chips li{ background:#eef6e8; border:1px solid #d0e4c2; color:#2b3326; padding:.45rem .75rem; border-radius:999px; font-weight:600; font-size:.95rem; }

/* Scroll hint */
.hero-scroll{ font-size:.9rem; color:#7a8a73; opacity:.9; position:relative; display:inline-block; }
.hero-scroll::after{
  content:""; display:block; width:1px; height:18px; margin:.25rem auto 0; background:#a8b7a2; animation:pulseDown 1.4s infinite ease-in-out;
}
@keyframes pulseDown{ 0%{transform:scaleY(1);opacity:.6} 50%{transform:scaleY(1.6);opacity:1} 100%{transform:scaleY(1);opacity:.6} }

@media (max-width:640px){
  .hero-impact{ padding:2.2rem 0 1.6rem; }
  .hero-chips li{ font-size:.92rem; }
}

/* Hero minimal */
.hero-minimal{ padding:4.5rem 0 2.5rem; }
.hero-minimal__inner{ max-width:980px; margin:0 auto; text-align:center; position:relative; z-index:2; }
.hero-minimal__title{
  font-family:"Lora",serif; font-weight:700; line-height:1.15; letter-spacing:.2px;
  font-size:clamp(1.9rem,4.2vw,3.1rem); color:#2b3326; margin:0 0 .8rem;
}
.hero-minimal__lead{ color:#4b5842; font-size:clamp(1.02rem,1.8vw,1.22rem); max-width:64ch; margin:.25rem auto 1.1rem; }
.hero-tags{ display:flex; flex-wrap:wrap; gap:.5rem .6rem; justify-content:center; list-style:none; padding:0; margin:.4rem 0 1.2rem; }
.hero-tags li a{
  display:inline-block; padding:.45rem .75rem; border-radius:999px; border:1px solid #d4e8bc; background:#f0f6ec; color:#2b3326; text-decoration:none; font-weight:600;
}
.hero-tags li a:hover{ background:#e8f2e1; }
.hero-minimal__scroll{
  display:inline-block; margin-top:.2rem; color:#6a7b5f; text-decoration:none; font-weight:600; font-size:.95rem; border-bottom:2px solid rgba(106,123,95,.25);
}
.hero-minimal__scroll:hover{ border-color:rgba(106,123,95,.5); }
@media (max-width:640px){ .hero-minimal{ padding:3rem 0 1.5rem; } }

/* Hero con fondo */
.hero-minimal--bg{ position:relative; color:#1e2719; }
.hero-minimal--bg::before{
  content:""; position:absolute; inset:0; z-index:0; background:var(--hero-bg) center/cover no-repeat; filter:saturate(.9) contrast(.95);
}
.hero-minimal--bg::after{
  content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(#ffffff36,#ffffff57);
}
/* Pantalla completa en home */
.home-index .hero-minimal.hero-minimal--bg{
  min-height:100vh; min-height:100svh; display:grid; align-items:center; padding:clamp(16px,4vw,40px) 1rem;
}
@media (min-width:1200px){ .hero-minimal__inner{ max-width:1100px; } }

/* ===================== GATES / QUOTE / VALUES ===================== */
.gates__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; }
.gate{ background:var(--paper); border-radius:16px; overflow:hidden; box-shadow:0 6px 20px rgba(0,0,0,.06); transition:transform .3s ease, box-shadow .3s ease; }
.gate:hover{ transform:translateY(-3px); box-shadow:0 12px 28px rgba(0,0,0,.10); }
.gate__img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.gate__body{ padding:1rem 1rem 1.25rem; }
.gate__title{ margin:.25rem 0 .25rem; font-weight:700; color:var(--verde-comun); }
.gate__cta{ font-weight:600; text-decoration:none; color:var(--ink); position:relative; display:inline-block; transition:transform .4s,font-weight .4s; }
.gate__cta:hover{ font-weight:700; transform:translateY(-2px); }

.quote{ position:relative; z-index:2; max-width:840px; margin:0 1rem; text-align:center; }
.quote p{ font-size:clamp(1.1rem,2.5vw,1.6rem); line-height:1.45; }
.quote cite{ display:block; margin-top:.5rem; opacity:.9; }

.values__grid{ list-style:none; margin:1rem 0 0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
.value{ background:var(--paper-2); border-radius:16px; padding:1rem 1rem 1.25rem; text-align:center; }
.value i{ font-size:2rem; color:var(--verde-comun); }
.value h3{ margin:.5rem 0 .25rem; }

/* ===================== SPLIT TEASERS ===================== */
.split__inner{ display:grid; grid-template-columns:1.1fr .9fr; gap:1.5rem; align-items:stretch; }
.split--img-right .split__inner{ grid-template-columns:.9fr 1.1fr; }
.split__media{ display:grid; }
.split__media img{ width:100%; height:100%; object-fit:cover; border-radius:18px; display:block; }
.split__body h2{ color:var(--verde-comun); margin-top:0; }

/* Stack en móvil */
@media (max-width:800px){
  .split--stack-mobile .split__inner{
    grid-template-columns:1fr;
    grid-template-areas:"media" "body";
  }
  .split--stack-mobile .split__media{ grid-area:media; }
  .split--stack-mobile .split__body{ grid-area:body; }
  .split--stack-mobile .split__media img{ height:auto; object-fit:cover; }
}

/* ===================== AMIGOS (grid) ===================== */
.friends__grid{
  list-style:none; display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
  gap:1.25rem 2rem; margin:1rem 0 1.5rem; padding:0; align-items:center;
}
.friend a{ display:block; }
.friend img{ display:block; margin:0 auto; max-height:70px; width:auto; filter:grayscale(100%); opacity:.9; transition:filter .25s, opacity .25s; }
.friend img:hover{ filter:none; opacity:1; }
@media (min-width:1024px){
  .friends__grid{ grid-template-columns:repeat(6,1fr); gap:1rem 1.25rem; }
}

/* ===================== FAQ (banda verde) ===================== */
.full-bleed.faq-band{ background:var(--faq-bg); }
.full-bleed.faq-band .section{ padding:2.5rem 0; }
.faq-list{ display:grid; gap:.75rem; }
.faq-list details{ background:rgba(255,255,255,.6); border:1.5px solid #cfe3c0; border-radius:12px; overflow:hidden; }
.faq-list summary{
  cursor:pointer; padding:.85rem 1rem; font-weight:700; color:var(--verde-comun);
  display:flex; align-items:center; gap:.6rem; list-style:none;
}
.faq-list summary::-webkit-details-marker{ display:none; }
.faq-list summary::marker{ content:""; }
.faq-list summary::before{
  content:"+"; display:inline-flex; width:1.25rem; height:1.25rem; align-items:center; justify-content:center;
  border:1.5px solid var(--verde-comun); border-radius:4px; font-weight:700; line-height:1;
}
.faq-list details[open] summary::before{ content:"–"; }
.faq-list details>div{ padding:0 1rem 1rem; color:#444; }

/* FAQ centrada más estrecha */
.faq-band .faq--narrow{ max-width:clamp(560px,64vw,720px); margin:0 auto; }
@media (max-width:640px){ .faq-band .faq--narrow{ max-width:100%; } }

/* ===================== NEWSLETTER ===================== */
.newsletter__box{ background:var(--paper-2); border-radius:18px; padding:1.25rem; }
.newsletter__form{ display:flex; gap:.5rem; flex-wrap:wrap; }
.newsletter__form input[type=email]{ flex:1; min-width:220px; padding:.8rem .9rem; border:2px solid #e1e6df; border-radius:999px; }
.newsletter__note{ display:block; font-size:.85rem; color:#666; margin-top:.4rem; }
.newsletter__note a{ text-decoration:underline; }

/* ===================== H2 con logo ===================== */
.h2-with-logo{ display:grid; grid-template-columns:auto 1fr; align-items:stretch; column-gap:.75rem; }
.h2-with-logo .h2-text{ display:block; }
.h2-with-logo .h2-logo{ height:100%; width:auto; max-height:8rem; }
@media (max-width:600px){ .h2-with-logo .h2-logo{ max-height:5rem; } }

/* ===================== REVEAL on scroll ===================== */
.reveal{ opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease; }
.reveal.is-visible{ opacity:1; transform:translateY(0); }

/* ===================== RESPONSIVE GRIDS ===================== */
@media (max-width:960px){
  .gates__grid{ grid-template-columns:1fr 1fr; }
  .split__inner{ grid-template-columns:1fr; }
}
@media (max-width:600px){
  .gates__grid{ grid-template-columns:1fr; }
  .values__grid{ grid-template-columns:1fr 1fr; }
}

/* ===================== SEPARADORES / AIR-GAP ===================== */
#main-content .section.hero-strap + .section,
#main-content .full-bleed + .section,
#main-content .section.values + .section,
#main-content .section.split + .section,
#main-content .section.no-divider{
  border-top:0 !important; padding-top:0 !important;
}
.air-gap{ height:clamp(14px,2.4vw,28px); display:block; width:100%; }
#main-content .air-gap{ max-width:none !important; margin:0 !important; padding:0 !important; border:0 !important; }
#main-content .air-gap + .section{ padding-top:0 !important; border-top:0 !important; }

/* ===================== PÁGINAS “PERMACULTURA” (contenido en main) ===================== */
body{ margin:0 !important; padding:0 !important; }
#main-content, main{ margin:0 !important; padding:0 !important; width:100% !important; box-sizing:border-box; }
#main-content{
  display:block; position:relative; background:transparent; box-shadow:none; color:inherit; min-height:100vh;
  margin-left:265px !important; width:calc(100% - 265px) !important;
}
@media (max-width:992px){ #main-content{ margin-left:0 !important; width:100% !important; } }

/* Secciones internas del main (reemplaza el antiguo `section.section`) */
#main-content section{
  padding:2.5rem 2rem; margin:0 auto; max-width:1100px; box-sizing:border-box; background:transparent;
  color:#333; line-height:1.8;
}
#main-content section + section{ margin-top:2rem; border-top:1px solid #e4e4e4; padding-top:2.5rem; }
@media (max-width:768px){ #main-content section{ padding:1.5rem 1rem; } }

/* Títulos dentro de secciones */
.section h2{
  font-family:"Lora",serif; font-size:2.4rem; font-weight:600; color:#4b5842;
  margin:3rem 0 1.5rem; display:flex; align-items:center; justify-content:center; text-align:center;
}
.section h2 i.material-icons{ font-size:2rem; color:#558b2f; margin-right:8px; }
.section h3{
  font-size:1.6rem; font-weight:500; color:#33691e; margin-top:2rem; display:flex; align-items:center;
}
.section h3 i.material-icons{ font-size:1.4rem; color:#689f38; margin-right:8px; }
.section p{ font-size:1.05rem; margin-bottom:1rem; text-align:left; }

/* Listas numeradas */
.section ol{ counter-reset:list; margin-top:2rem; padding-left:1.5rem; list-style:none; }
.section ol li{ margin-bottom:.8rem; font-size:1.05rem; position:relative; padding-left:1.4rem; }
.section ol li::before{ counter-increment:list; content:counter(list) ". "; position:absolute; left:0; color:#558b2f; font-weight:bold; }

/* Divider decorativo */
.divider{
  margin:2rem auto; height:2px; width:60%;
  background:linear-gradient(to right, transparent, #81c784, transparent);
  border-radius:4px;
}

/* Tipografía responsive */
@media (max-width:600px){
  .section h2{ font-size:1.8rem; }
  .section h3{ font-size:1.3rem; }
  .section p{ font-size:1rem; }
}

/* ===================== MENÚ LATERAL / TOGGLE ===================== */
.side-nav a.active, .sidenav a.active, .side-nav li.active > a, .sidenav li.active > a{
  background-color:#dcedc8; color:#33691e !important; font-weight:600; border-left:4px solid #8bc34a;
}
.side-nav a.active i, .sidenav a.active i{ color:#558b2f !important; }

.menu-toggle{
  position:fixed; top:15px; left:15px; z-index:9999; background-color:#4b5842; color:#fff; border:none; border-radius:50%;
  padding:10px; width:48px; height:48px; display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 5px rgba(0,0,0,.25); cursor:pointer; transition:background-color .3s ease, transform .2s ease;
}
.menu-toggle:hover{ background-color:#6b7d5a; transform:scale(1.05); }
.menu-toggle i.material-icons{ color:#fff; font-size:28px; }
@media (min-width:993px){ .menu-toggle{ display:none; } }

#side-nav.side-nav.fixed{
  position:fixed; top:0; left:0; width:265px; height:100vh; overflow-y:auto; z-index:1000; box-shadow:2px 0 6px rgba(0,0,0,.15); padding-top:0;
}
@media (max-width:992px){
  #side-nav.side-nav.fixed{ transform:translateX(-100%) !important; transition:transform .35s ease-in-out !important; position:fixed !important; z-index:1000 !important; }
  #side-nav.side-nav.fixed.open{ transform:translateX(0) !important; }
}

/* Sidenav logo animable + strip social */
.side-nav, .sidenav, #side-nav{ background-color:#fff !important; opacity:1 !important; backdrop-filter:none !important; box-shadow:none !important; border-right:1px solid #7ab224; }
.side-nav .userView, .sidenav .userView{
  position:relative; height:var(--logo-max-h); min-height:0 !important; overflow:hidden;
  transition:height .35s cubic-bezier(.22,.61,.36,1); will-change:height;
}
.side-nav .userView .logo-bg, .side-nav .userView .logo-fg,
.sidenav .userView .logo-bg, .sidenav .userView .logo-fg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:contain; display:block;
  transform-origin:center top; transition:transform .35s cubic-bezier(.22,.61,.36,1), opacity .35s linear; will-change:transform, opacity;
}
.side-nav .userView .logo-bg, .sidenav .userView .logo-bg{ z-index:0; }
.side-nav .userView .logo-fg, .sidenav .userView .logo-fg{ z-index:1; opacity:1; transform:scale(1); }
@media (max-width:992px){
  .side-nav .userView, .sidenav .userView{ height:var(--logo-max-h) !important; }
  .side-nav .userView .logo-bg, .side-nav .userView .logo-fg, .sidenav .userView .logo-bg, .sidenav .userView .logo-fg{ transform:scale(1); opacity:1; }
}
.sidenav li.social-strip{
  display:flex !important; justify-content:center; align-items:center; gap:16px;
  padding:12px 14px !important; background:#4b5842 !important; border-top:1px solid #9fbd86; list-style:none; min-height:56px;
}
.sidenav li.social-strip a{ display:inline-flex !important; width:36px; height:36px; align-items:center; justify-content:center; border-radius:50%; transition:transform .15s ease, opacity .15s ease; }
.sidenav li.social-strip a:hover{ transform:translateY(-1px); opacity:.9; }
.sidenav li.social-strip img{ width:20px; height:20px; display:block; }

/* ===================== BOTONES ===================== */
a.btn, button.btn, .btn, input[type="submit"], .btn-verde, .btn-pca{
  -webkit-appearance:none; appearance:none; display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:.7rem 1.1rem; font-weight:600; font-size:1rem; line-height:1.1;
  color:var(--pca-dark) !important; background:var(--pca-light) !important; border-radius:var(--btn-radius) !important;
  text-decoration:none !important; text-transform:none !important; box-shadow:none !important; cursor:pointer;
  transition:background-color .15s ease, border-color .15s ease;
}
a.btn:hover, button.btn:hover, .btn:hover, input[type="submit"]:hover{ background:var(--pca-light-hover) !important; border-color:var(--pca-light-border) !important; }
a.btn:active, button.btn:active, .btn:active, input[type="submit"]:active{ background:var(--pca-light) !important; }
a.btn:focus, button.btn:focus, .btn:focus, input[type="submit"]:focus{ outline:0; box-shadow:0 0 0 3px var(--btn-ring) !important; }
a.btn[aria-disabled="true"], .btn[disabled], button.btn:disabled, input[type="submit"]:disabled{ opacity:.6; pointer-events:none; }
.btn i.material-icons, a.btn i.material-icons, button.btn i.material-icons{ font-size:1.2em; line-height:1; transform:translateY(1px); }
.btn-group{ display:inline-flex; gap:.6rem; flex-wrap:wrap; }
@media (max-width:520px){ .btn-group{ flex-direction:column; align-items:stretch; } .btn-group .btn{ width:100%; } }

/* ===================== HERO CON TÍTULO (imagen) ===================== */
.hero{ position:relative; margin:0; }
.hero .hero-img{ display:block; width:100%; height:280px; object-fit:cover; margin:0; padding:0; border-radius:0; }
@media (min-width:992px){ .hero .hero-img{ height:265px; } }
.hero::after{ content:""; position:absolute; inset:0; background:linear-gradient(to bottom, rgba(0,0,0,0) 30%, rgba(0,0,0,.35) 100%); z-index:1; pointer-events:none; }
.hero h1.hero-title{
  position:absolute; z-index:2; left:clamp(14px,4vw,30px); bottom:clamp(16px,4vw,25px);
  margin:0; color:#fff; font-family:"Lora",serif; font-weight:700; font-size:clamp(2.6rem,5.2vw,4rem);
  line-height:1.05; text-shadow:0 2px 6px rgba(0,0,0,.35);
}
/* Reveal izquierda→derecha */
.hero .hero-title{ clip-path:inset(-0.25em 100% -0.3em 0); -webkit-clip-path:inset(-0.25em 100% -0.3em 0); will-change:clip-path; }
.hero.is-ready .hero-title{ animation:hero-reveal-lr 700ms cubic-bezier(.22,.61,.36,1) forwards 120ms; }
@keyframes hero-reveal-lr{ from{clip-path:inset(-0.25em 100% -0.3em 0)} to{clip-path:inset(-0.25em 0% -0.3em 0)} }
@media (prefers-reduced-motion:reduce){ .hero .hero-title{ clip-path:inset(0 0 0 0); -webkit-clip-path:inset(0 0 0 0); animation:none; } }

/* ===================== FULL-BLEED + PARALLAX ===================== */
/* Sección a todo el ancho del main */
#main-content section.full-bleed{ max-width:none !important; padding:0 !important; margin:0 !important; border:0 !important; }
#main-content section.full-bleed + section,
#main-content section + section.full-bleed{ border-top:0 !important; margin-top:0 !important; padding-top:0 !important; }

/* Banda parallax */
.slice-parallax{ position:relative; overflow:hidden; width:100%; height:var(--slice-h, clamp(220px,32vw,380px)); margin:0; padding:0; background:#111; }
.slice-parallax > img{
  position:absolute; left:0; top:50%; width:100%;
  height:calc(100% + var(--overscan,30%) + 2px);
  object-fit:cover; object-position:center;
  transform:translateY(calc(-50% + var(--y,0px)));
  will-change:transform; z-index:0;
}
@media (prefers-reduced-motion:reduce){ .slice-parallax > img{ transform:none !important; } }
/* Velo / overlay */
.slice-parallax::before{ content:""; position:absolute; inset:0; background:var(--overlay, linear-gradient(to bottom, rgba(0,0,0,.20), rgba(0,0,0,.38))); z-index:1; pointer-events:none; }
/* Contenido centrado */
.slice-content{
  position:absolute; inset:0; z-index:2; display:flex; align-items:center; justify-content:center; text-align:center;
  padding:clamp(16px,4vw,56px); color:var(--slice-color,#fff); pointer-events:none;
}
.slice-content > *{ pointer-events:auto; }
.slice-content .wrap{ max-width:min(920px,92vw); margin:0 auto; }
/* Títulos */
.slice-title{
  font-family:"Lora",serif; font-weight:700; font-size:clamp(1.8rem,4vw,3rem);
  line-height:1.15; margin:0 0 .5rem;
}
.slice-subtitle{ font-size:clamp(1rem,2vw,1.25rem); margin:0 0 1.1rem; }
/* Acciones */
.slice-actions{ display:flex; gap:.8rem; justify-content:center; }

/* Botones en parallax: variantes */
.slice-parallax .btn{ color:#fff !important; background:transparent !important; border:1.5px solid rgba(255,255,255,.95) !important; box-shadow:none !important; }
.slice-parallax .btn:hover{ background:rgba(255,255,255,.12) !important; }
.slice-parallax .btn.is-solid{ background:#fff !important; border-color:#fff !important; color:#2b3326 !important; }
.slice-parallax .btn.is-solid:hover{ filter:brightness(.96); }

/* ===================== UTILIDADES ===================== */
.sr-only{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Imagen cabecera a todo ancho */
.imagen-ancha{ display:block; width:100%; height:280px; object-fit:cover; margin:0; padding:0; border-radius:0; }
@media (min-width:992px){ .imagen-ancha{ height:265px; } }

/* Ocultar top-nav heredado de Materialize */
nav.top-nav{ display:none !important; }

/* ===================== COMPONENTES ESPECÍFICOS ===================== */
/* Título “Diseño” */
.titulo-diseno{
  font-family:"Lora",serif; font-style:italic; font-weight:700;
  font-size:clamp(2rem,3.2vw,3rem); color:var(--verde-comun); text-align:center; margin:1.2rem 0 .8rem;
}
/* Título con icono */
.section h2.heading-with-icon{ display:inline-flex; align-items:center; gap:8px; margin:0 auto 1rem; text-align:left; }
.section h2.heading-with-icon .material-icons{ font-size:1.8rem; line-height:1; }

/* “Principios de diseño” (cards horizontales) */
.principios-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:1.5rem; margin-top:2rem; }
.principle-card{
  display:flex; align-items:center; background:#fff; border-radius:12px;
  box-shadow:0 2px 6px rgba(0,0,0,.1); overflow:hidden; transition:transform .25s ease, box-shadow .25s ease;
}
.principle-card:hover{ transform:translateY(-4px); box-shadow:0 4px 10px rgba(0,0,0,.15); }
.principle-card .card-image{ flex:0 0 100px; display:flex; align-items:center; justify-content:center; padding:1rem; }
.principle-card .card-image img{ width:80px; height:80px; object-fit:cover; border-radius:50%; }
.principle-card .card-content{ flex:1; padding:1rem 1.2rem; text-align:left; }
.principle-card .card-title{ font-family:'Lora',serif; font-weight:700; color:var(--verde-comun); font-size:1.05rem; margin-bottom:.4rem; }
.principle-card p{ font-style:italic; font-weight:300; font-size:.95rem; line-height:1.5; color:#555; }
@media (max-width:600px){
  .principle-card{ flex-direction:column; text-align:center; }
  .principle-card .card-image{ padding:.5rem; }
  .principle-card .card-image img{ width:90px; height:90px; }
  .principle-card .card-content{ padding:1rem; }
}

/* Las 3 éticas */
.eticas-container{
  display:grid !important; grid-template-columns:repeat(3,1fr) !important; gap:2rem !important;
  justify-items:center !important; align-items:stretch !important; width:100% !important; margin:2rem auto !important; grid-auto-rows:1fr;
}
.etica-box{
  background:#fff; border-radius:12px; box-shadow:0 2px 6px rgba(0,0,0,.1);
  text-align:center; padding:1.5rem 1.2rem; max-width:340px; height:100%;
  display:flex; flex-direction:column; justify-content:flex-start; align-items:center;
  transition:transform .25s ease, box-shadow .25s ease;
}
.etica-box:hover{ transform:translateY(-4px); box-shadow:0 4px 10px rgba(0,0,0,.15); }
.etica-box img{ width:120px; height:120px; object-fit:contain; border-radius:50%; margin:1rem auto; display:block; flex-shrink:0; }
.etica-box h3{ font-family:"Lora",serif; font-style:italic; font-weight:700; font-size:1.15rem; color:#33691e; margin:.8rem 0 .6rem; }
.etica-box p{ font-size:1rem; color:#444; line-height:1.6; margin-top:auto; text-align:justify; }
@media (max-width:992px){ .eticas-container{ grid-template-columns:repeat(2,1fr) !important; } }
@media (max-width:600px){ .eticas-container{ grid-template-columns:1fr !important; } }

/* ===================== MINI-FOOTER ===================== */
.mini-footer{ background:var(--brand-green); color:#fff; border-top:1px solid rgba(255,255,255,.15); }
.mini-footer a{ color:inherit; text-decoration:none; opacity:.95; }
.mini-footer a:hover{ opacity:1; text-decoration:underline; }
.mini-footer__inner{
  min-height:56px; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.5rem 0;
}
.mini-footer__brand{ display:inline-flex; align-items:center; gap:.5rem; font-weight:600; letter-spacing:.2px; }
.mini-footer__brand img{ display:block; width:28px; height:28px; }
.mini-footer__nav{ display:flex; gap:1rem; flex-wrap:wrap; font-size:.95rem; }
.mini-footer__social{ display:flex; gap:.5rem; }
.mini-footer__social a{ display:inline-flex; width:28px; height:28px; align-items:center; justify-content:center; border-radius:999px; background:rgba(255,255,255,.12); }
.mini-footer__social a:hover{ background:rgba(255,255,255,.2); }
.mini-footer__social img{ width:18px; height:18px; display:block; }
.mini-footer__legal{ border-top:1px solid rgba(255,255,255,.12); padding:.4rem 0 .6rem; text-align:center; font-size:.85rem; opacity:.9; }
.mini-footer__legal a{ text-decoration:underline; }
@media (max-width:720px){
  .mini-footer__inner{ flex-direction:column; align-items:center; gap:.6rem; text-align:center; padding:.8rem 0; }
  .mini-footer__nav{ justify-content:center; }
}

/* ===================== SUBRAYADOS VIVOS ===================== */
.hl{
  background:linear-gradient(180deg, rgba(255, 255, 255, 0.322) 85%, #c8f0adab 0) no-repeat;
  padding:0 .05em;
}
.hl-alt{
  background:linear-gradient(180deg, rgba(205,224,194,0) 20%, #c8f0adab 0) no-repeat;
  padding:0 .08em; border-radius:2px;
}

.hl-alt2{
  background:linear-gradient(180deg, rgba(205,224,194,0) 35%, #ffffff85 0) no-repeat;
  padding:0 .08em; border-radius:2px;
}


/* Para títulos con resaltado y buen spacing entre palabras */
.section__title .hl{
  background:linear-gradient(180deg, transparent 65%, #dcefd3 0);
  padding:0 .08em .06em; margin:0 .22em;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
}


/* ===================== Herramientas ===================== */
.metodo-tools{
  --chip-bg:#eef6e8;
  --chip-bg-hover:#e7f1e0;
  --chip-border:#d0e4c2;
  --chip-ink:#2b3326;

  margin-top:.5rem;
}
.metodo-tools h4{
  margin:.2rem 0 .4rem;
  font-weight:700;
  color:#2e7d32;
  font-size:1rem;
  letter-spacing:.2px;
}
.metodo-tools .meta{ color:#444; margin:.2rem 0 0; }
.metodo-cta{ margin-top:.8rem; }

/* Lista de chips */
.metodo-tools .chips{
  list-style:none;
  margin:.5rem 0 1rem;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:.5rem .6rem;
  border:0 !important;
  box-shadow:none !important;
}
.metodo-tools .chips::before,
.metodo-tools .chips::after{
  content:none !important;
}

/* 1) Chips como <li> (pilas por defecto) */
.metodo-tools .chips > li{
  display:inline-block;
  padding:.55rem .9rem;
  border-radius:999px;
  background:var(--chip-bg);
  border:1px solid var(--chip-border);
  color:var(--chip-ink);
  font-weight:600;
  line-height:1.1;
}

/* 2) Si el <li> contiene un botón .chip-btn, resetea el <li> para evitar doble “pill” */
.metodo-tools .chips > li:has(.chip-btn){
  padding:0;
  background:transparent;
  border:0;
}

/* Botón pill */
.metodo-tools .chip-btn{
  -webkit-appearance:none; appearance:none;
  display:inline-block; cursor:pointer;
  padding:.55rem .9rem; border-radius:999px;
  background:var(--chip-bg);
  border:1px solid var(--chip-border);
  color:var(--chip-ink); font-weight:600; line-height:1.1;
  transition:transform .12s ease, background .12s ease, box-shadow .12s ease;
}
.metodo-tools .chip-btn:hover{ background:var(--chip-bg-hover); transform:translateY(-1px); }
.metodo-tools .chip-btn:active{ transform:translateY(0); }
.metodo-tools .chip-btn:focus{ outline:0; box-shadow:0 0 0 3px rgba(139,195,74,.35); }


/* === Sección Qué Hacemos === */
.qh{
  /* Paleta */
  --dark-bg:#437527;                 /* cards oscuras (1,3,5) */
  --dark-ink:#ffffff;
  --dark-sub:rgba(255,255,255,.88);

  --light-bg:var(--paper-2, #f5f7f4);/* cards claras (2,4,6) */
  --light-ink:#23382c;
  --light-sub:#4b5842;

  --radius-card:14px;
  --radius-logo:12px;

  font-family:"Lora", serif;
}

/* ===== Grid ===== */
.qh__grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:1rem;
}

/* 2 columnas (pantallas medianas) */
@media (max-width:1100px){
  .qh__grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}

/* 1 columna (móvil) */
@media (max-width:700px){
  .qh__grid{ grid-template-columns:1fr; }
}

/* ===== Tarjeta ===== */
.qh__card{
  display:grid;
  grid-template-rows:auto 1fr;       /* fila superior + texto */
  gap:.75rem;

  padding:1rem 1.1rem 1.1rem;
  border-radius:var(--radius-card);
  text-decoration:none;

  background-color:var(--light-bg);
  color:var(--light-ink);
  box-shadow:0 1px 0 rgba(0,0,0,.08) inset;

  transition:transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.qh__card:hover,
.qh__card:focus-visible{
  outline:0;
  transform:translateY(-1px);
  box-shadow:0 0 0 5px rgba(139, 195, 74, 0.404), 0 1px 0 rgba(0,0,0,.08) inset;
}

/* ===== Top: logo + título ===== */
.qh__top{
  display:grid;
  grid-template-columns:84px 1fr;    /* logo | h3 */
  gap:.85rem;
  align-items:center;
}
@media (max-width:1100px){ .qh__top{ grid-template-columns:72px 1fr; } }
@media (max-width:700px){  .qh__top{ grid-template-columns:64px 1fr; } }

/* Logo */
.qh__logo{
  width:84px; height:84px;
  border-radius:var(--radius-logo);
  background:#fff;
  display:grid; place-items:center;
  box-shadow:0 1px 0 rgba(0,0,0,.04) inset;
}
.qh__logo img{ max-width:86%; max-height:86%; display:block; object-fit:contain; }

/* Título (sin subrayados) */
.qh__heading{
  margin:0;
  font-weight:700;
  font-size:clamp(1rem,1.6vw,1.35rem);
  line-height:1.2;
  color:inherit;            /* hereda del tema */
  min-width:0;              /* evita desbordes en grid */
  overflow-wrap:anywhere;   /* partir palabras largas */
  hyphens:auto;
}

/* ===== Texto ===== */
.qh__text{
  padding-left:.9rem;
  border-left:3px solid #dbead2;
}
.qh__text p{
  margin:0;
  font-size:clamp(.95rem,1.3vw,1.05rem);
  line-height:1.45;
  color:var(--light-sub);
}

/* ===== Temas: 1,3,5 oscuras; 2,4,6 claras ===== */
.qh__grid > .qh__card:nth-child(odd){
  background-color:var(--dark-bg);
  color:var(--dark-ink);
}
.qh__grid > .qh__card:nth-child(odd) .qh__text{
  border-left-color:rgba(255,255,255,.35);
}
.qh__grid > .qh__card:nth-child(odd) .qh__text p{
  color:var(--dark-sub);
}

/* ===== Animación solo en pantallas grandes ===== */
@media (min-width:1101px){
  @supports (animation-timeline: --t){
    .qh{ view-timeline-name: --qh; view-timeline-axis: block; }

    .qh__card{
      animation: qh-slide 1 linear both;
      animation-timeline: --qh;
      animation-range: entry 0% exit 100%;
      will-change: transform, opacity;
    }
    /* Fila 1 (items 1–3): derecha -> izquierda */
    .qh__card:nth-child(-n+3){ --from: 8vw; --to: -8vw; }
    /* Fila 2 (items 4–6): izquierda -> derecha */
    .qh__card:nth-child(n+4) { --from:-8vw; --to:  8vw; }

    @keyframes qh-slide{
      0%   { transform:translateX(var(--from)); opacity:.75; }
      50%  { transform:translateX(0);          opacity:1;    }
      100% { transform:translateX(var(--to));  opacity:.75; }
    }
  }
}

/* Accesibilidad: sin movimiento si el usuario lo pide */
@media (prefers-reduced-motion: reduce){
  .qh__card{ animation:none !important; transform:none !important; opacity:1 !important; }
}


/* Que el título herede el color de la tarjeta */
.qh .qh__heading{ color: inherit; }

/* En las oscuras (1,3,5) fuerza blanco */
.qh__grid > .qh__card:nth-child(odd) .qh__heading{ color: var(--dark-ink); }

/* 0) que nada se escape del borde redondeado de la card */
.qh__card{ overflow:hidden; }

/* 1) en móviles pequeños reduce el logo y el padding */
@media (max-width:520px){
  .qh__card{ padding:.85rem 1rem; }
  .qh__top{ grid-template-columns:56px 1fr; gap:.6rem; }
  .qh__logo{ width:56px; height:56px; border-radius:10px; }
  .qh__logo img{ max-width:88%; max-height:88%; }
}

/* 2) en muy pequeñas, apila logo arriba y título debajo */
@media (max-width:360px){
  .qh__top{
    grid-template-columns:1fr;
    grid-template-rows:auto auto;   /* logo + h3 en dos líneas */
  }
  .qh__logo{ justify-self:start; }   /* o center si lo prefieres centrado */
}


/* LOGO responsivo: que baje en los mismos breakpoints del grid */
@media (max-width:1100px){
  .qh__top{ grid-template-columns:72px 1fr; }
  .qh__logo{ width:72px; height:72px; }
}

@media (max-width:700px){
  .qh__top{ grid-template-columns:64px 1fr; }
  .qh__logo{ width:64px; height:64px; }
}

/* Ya tenías este; lo mantengo para pantallas muy pequeñas */
@media (max-width:520px){
  .qh__card{ padding:.85rem 1rem; }
  .qh__top{ grid-template-columns:56px 1fr; gap:.6rem; }
  .qh__logo{ width:56px; height:56px; border-radius:10px; }
  .qh__logo img{ max-width:88%; max-height:88%; }
}

/* Seguridad extra: que nada se escape del borde redondeado */
.qh__card{ overflow:hidden; }



/* ===================== BIO (foto circular + texto) ===================== */
.bio .bio__grid{
  display:grid;
  grid-template-columns: 1fr 2fr;            /* ~ 1/3 - 2/3 */
  gap:clamp(16px,3vw,28px);
  align-items:center;
}
.bio .bio__media{
  display:flex; align-items:center; justify-content:center;
}
.bio .bio__photo{
  width:clamp(180px,28vw,280px);
  aspect-ratio:1 / 1;
  border-radius:50%;
  object-fit:cover; object-position:center;
  border:6px solid var(--paper-2);
  box-shadow:0 6px 20px rgba(0,0,0,.08);
  display:block;
}
.bio .bio__body h2{
  margin-top:0;
   /* tu .section h2 centra; aquí lo alineamos a la izquierda */
  justify-content:flex-start; text-align:left;
}

/* Stack en móvil */
@media (max-width:800px){
  .bio .bio__grid{ grid-template-columns:1fr; }
  .bio .bio__media{ order:-1; margin-bottom:.5rem; }
  .bio .bio__photo{ width:clamp(160px,44vw,240px); }
}


/* ======== PORTFOLIO: lista media (sin tarjetas) ======== */
.portfolio .media-list{
  list-style:none; margin:1.2rem 0 0; padding:0;
  display:grid; grid-template-columns:repeat(2,1fr); gap:1rem 1.25rem;
}
@media (max-width:800px){ .portfolio .media-list{ grid-template-columns:1fr; } }

.portfolio .media{
  display:grid; grid-template-columns:auto 1fr; align-items:flex-start; column-gap:.75rem;
  padding:.55rem .2rem .55rem .6rem; border-left:3px solid #d0e4c2; border-radius:6px;
  transition:transform .15s ease, background-color .15s ease, border-color .15s ease;
}
.portfolio .media:hover{ transform:translateX(2px); background:rgba(240,245,237,.55); border-left-color:#b9d6a6; }

.portfolio .media__icon{
  display:inline-flex; width:38px; height:38px; align-items:center; justify-content:center;
  border:1.6px solid var(--verde-comun); border-radius:999px; flex-shrink:0;
}
.portfolio .media__icon i{ font-size:1.15rem; color:var(--verde-comun); }

.portfolio .media__title{
  margin:.05rem 0 .15rem; font-family:"Lora",serif; font-weight:700; color:var(--verde-comun);
  font-size:1.12rem; line-height:1.2;
}
.portfolio .media p{ margin:.1rem 0 0; color:#445045; }

/* Mini acordeón dentro de la sección (reusa tu .faq-list) */
.portfolio-accordion{ margin-top:1rem; }

/* CTA alineada en línea */
.portfolio .cta-inline{
  display:flex; align-items:center; gap:.6rem; justify-content:center; margin-top:1rem;
}
.portfolio .cta-inline .cta-note{ color:#666; }


/* Anchura coherente para contenido */
:root{
  --mw-narrow: clamp(640px, 92vw, 860px);
  --mw-medium: clamp(760px, 92vw, 980px);   /* <- recomendado */
  --mw-wide: clamp(900px, 94vw, 1100px);
}

.u-mw{ width:100%; max-width:var(--mw-medium); margin:0 auto; }
.u-mw--narrow{ max-width:var(--mw-narrow); }
.u-mw--wide{ max-width:var(--mw-wide); }

/* Mantén los full-bleed intactos */
#main-content section.full-bleed{ max-width:none !important; }


/* ===================== DISEÑOS (páginas de proyecto) ===================== */
.diseno .diseno-title{
  font-family:"Lora",serif;
  font-weight:700;
  color:var(--verde-comun);
  font-size:clamp(1.9rem,3.2vw,2.6rem);
  line-height:1.15;
  margin:.9rem 0 .35rem;
  text-wrap:balance;
}
.diseno .diseno-subtitle{
  color:#4b5842;
  font-size:clamp(1rem,1.8vw,1.15rem);
  margin:0 0 1rem;
}
.diseno .btn{ margin:.6rem 0 1.4rem; }

/* Galería de láminas A4 (5 imágenes) */
.diseno-gallery{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.9rem;
  margin:1.4rem 0 0;
}
@media (max-width:900px){ .diseno-gallery{ grid-template-columns:1fr; } }

/* A4 ratio: usa el modificador en el contenedor */
.diseno-gallery.is-landscape .frame{ aspect-ratio: 297 / 210; } /* ~1.414 */
.diseno-gallery.is-portrait  .frame{ aspect-ratio: 210 / 297; } /* ~0.707 */

.diseno-gallery .frame{
  position:relative;
  overflow:hidden;
  border-radius:10px;
  background:#fff;
  border:1px solid #e3e7e0;
  box-shadow:0 6px 16px rgba(0,0,0,.06);
  display:block;
}
.diseno-gallery .frame img{
  width:100%;
  height:100%;
  object-fit:contain;        /* que se vea la lámina completa */
  display:block;
  background:#fff;
}

/* Texto del contenido con anchura cómoda */
.diseno .content{ max-width:var(--mw-medium); }
.diseno .content h2{ color:#33691e; } /* subtítulos del markdown, si los hay */


/* ===== Carrusel con “peek” (láminas A4) ===== */
.carousel-peek{
  --peek: clamp(12px, 4vw, 64px);
  --gap: clamp(10px, 2vw, 16px);
  position:relative;
  margin:1.2rem auto 0;
  max-width:var(--mw-wide);
}
.carousel-peek .caro-track{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:calc(100% - var(--peek)*2); /* deja hueco para ver vecinas */
  gap:var(--gap);
  overflow-x:auto;
  padding:0 var(--peek);
  scroll-snap-type:x mandatory;
  scroll-padding:var(--peek);
  -webkit-overflow-scrolling:touch;
}
.carousel-peek .caro-slide{
  scroll-snap-align:center;
  position:relative;
  border-radius:12px;
  background:#fff;
  border:1px solid #e3e7e0;
  box-shadow:0 6px 16px rgba(0,0,0,.06);
  overflow:hidden;
  transition:transform .35s ease, box-shadow .35s ease, filter .35s ease, opacity .35s ease;
  aspect-ratio:297/210; /* landscape por defecto */
}
.carousel-peek.is-portrait .caro-slide{ aspect-ratio:210/297; }

.carousel-peek .caro-slide img{
  width:100%; height:100%; object-fit:contain; display:block; background:#fff;
}

/* énfasis al activo */
.carousel-peek .caro-slide{ transform:scale(.94); opacity:.85; filter:saturate(.9); }
.carousel-peek .caro-slide.is-active{ transform:scale(1); opacity:1; filter:none; box-shadow:0 10px 24px rgba(0,0,0,.10); }

/* flechas */
.carousel-peek .caro-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  background:rgba(255,255,255,.9);
  border:1px solid #cfd8c3;
  width:42px; height:42px; border-radius:999px;
  display:grid; place-items:center;
  font-size:28px; line-height:1; color:#2b3326;
  cursor:pointer; z-index:5;
  transition:background .2s ease, transform .15s ease, box-shadow .2s ease;
}
.carousel-peek .caro-arrow:hover{ background:#fff; box-shadow:0 4px 10px rgba(0,0,0,.12); transform:translateY(-50%) scale(1.04); }
.carousel-peek .caro-arrow.prev{ left:6px; }
.carousel-peek .caro-arrow.next{ right:6px; }

@media (max-width:680px){
  .carousel-peek{ --peek:10px; }
  .carousel-peek .caro-track{ grid-auto-columns:100%; }
  .carousel-peek .caro-arrow{ display:none; }

}

/* ==== Fade lateral para el carrusel con “peek” ==== */
.carousel-peek{ --fade: clamp(24px, 8vw, 120px); }

/* 1) Máscara moderna (Chrome/Firefox/Safari) */
.carousel-peek .caro-track{
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--fade),
    #000 calc(100% - var(--fade)),
    transparent 100%
  );
          mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--fade),
    #000 calc(100% - var(--fade)),
    transparent 100%
  );
}

/* 2) Fallback visual con overlays (por si alguna versión pasa de mask) */
.carousel-peek::before,
.carousel-peek::after{
  content:"";
  position:absolute; top:0; bottom:0; width:var(--fade);
  pointer-events:none; z-index:4;
}
.carousel-peek::before{
  left:0;
  background:linear-gradient(to right, var(--paper,#fff) 0%, rgba(255,255,255,0) 100%);
}
.carousel-peek::after{
  right:0;
  background:linear-gradient(to left, var(--paper,#fff) 0%, rgba(255,255,255,0) 100%);
}

/* Opcional: ocultar la barrita de scroll horizontal del track */
.carousel-peek .caro-track{ scrollbar-width:none; }
.carousel-peek .caro-track::-webkit-scrollbar{ height:0; }


/* ==== Contraste fuerte para láminas del carrusel ==== */
.carousel-peek .caro-slide{
  /* Borde más visible */
  border:1.5px solid #c0ccb8;               /* sube/baja el tono para más/menos borde */

  /* Sombra más marcada (ajusta los últimos números .14/.18) */
  box-shadow:0 10px 26px rgba(0,0,0,.14);
  background:#fff;
}

/* “Aro” perimetral que siempre se ve, incluso con fondos blancos */
.carousel-peek .caro-slide::after{
  content:""; position:absolute; inset:0; border-radius:12px;
  box-shadow:inset 0 0 0 2px rgba(43,51,38,.10);  /* sube a .14 o .18 si quieres más */
  pointer-events:none;
}

/* Activa aún más la central */
.carousel-peek .caro-slide.is-active{
  box-shadow:0 16px 36px rgba(0,0,0,.18),
             inset 0 0 0 1px rgba(0,0,0,.06);
}

/* Laterales menos desvanecidos (opcional): hazlas un poco menos transparentes */
.carousel-peek .caro-slide{ opacity:.92; }      /* antes .85 */
.carousel-peek .caro-slide.is-active{ opacity:1; }

/* Herramientas usadas (dentro de páginas de diseño) */
.diseno .diseno-tools{ margin:.6rem 0 1rem; }
.metodo-heading{
  margin:.1rem 0 .35rem;
  font-weight:700;
  color:#2e7d32;
  font-size:.95rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  opacity:.95;
}
.diseno .diseno-tools .chips{ justify-content:flex-start; }

/* Centrar verticalmente el texto dentro de los chips */
.metodo-tools .chips{ align-items:center; }           /* por si algún chip tiene otra altura */

.metodo-tools .chips > li,
.metodo-tools .chip-btn{
  display:inline-flex;             /* antes inline-block */
  align-items:center;              /* centra vertical */
  justify-content:center;
  line-height:1;                   /* elimina el extra del baseline */
  padding:.55rem .9rem;            /* mantén tu padding */
}

/* Si aún lo ves 1px “alto/bajo”, microajuste opcional: */
/* .metodo-tools .chips > li{ padding-top:.58rem; padding-bottom:.58rem; } */


/* Páginas de diseño: títulos a la izquierda */

.diseno .content h3,
.diseno .content h4{
  display:block !important;          /* anula el flex centrado global */
  text-align:left !important;
  justify-content:flex-start !important;
  align-items:normal !important;
  margin:2rem 0 1rem;                /* opcional: margen cómodo */

}

.diseno .content h2{
  font-size: 1.5rem;
  display:block !important;          /* anula el flex centrado global */
  text-align:left !important;
  justify-content:flex-start !important;
  align-items:normal !important;
  margin:2rem 0 1rem;   
}

/* Por si el H1 del diseño se centra en algún caso */
.diseno .diseno-title,
.diseno .diseno-subtitle{
  text-align:left;
}

/* Chips de herramientas ya los dejamos a la izquierda,
   pero por si acaso: */
.diseno .diseno-tools .chips{ justify-content:flex-start; }


/* Mostrar flechas también en pantallas pequeñas y encima del fade */
.carousel-peek .caro-arrow{ z-index:20; } /* por si acaso, encima del overlay */

@media (max-width:680px){
  .carousel-peek{ --peek:10px; --fade:38px; } /* un poco de margen y fade menor */
  .carousel-peek .caro-track{ grid-auto-columns:100%; }
  .carousel-peek .caro-arrow{
    display:grid !important;        /* forzar visible */
    width:36px; height:36px;         /* flecha más compacta */
    font-size:22px;
  }
  .carousel-peek .caro-arrow.prev{ left:4px; }
  .carousel-peek .caro-arrow.next{ right:4px; }
}


/* ===== Subrayados unificados ===== */
:root{
  --hl-bg:#dcefd3;                 /* subrayado H2 */
  --hl-hero-bg:rgba(214,233,201,.85);/* subrayado hero más visible */
}

/* Subrayado base para cualquier texto */
.hl{
  background:linear-gradient(180deg, transparent 62%, var(--hl-bg) 0) no-repeat;
  padding:0 .08em .06em;           /* da “aire” sin depender de espacios en HTML */
  border-radius:2px;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
  margin:0 .12ch;                  /* simula el espacio alrededor del resaltado */
}


/* Subrayado fuerte para H1 del hero (o donde lo necesites) */
.hl-hero{
  box-shadow:inset 0 -0.5em var(--hl-hero-bg);
  padding:0 .16em; border-radius:3px;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
  margin:0 .10ch;
}

/* Títulos: aseguran consistencia del layout */
.section__title{ align-items:center; gap:.5rem; justify-content:center; text-align:center; }
.section__title .h2-text{ display:inline; }
.heading-with-icon i.material-icons{ font-size:1.8rem; color:#558b2f; transform:translateY(2px); }


/* Si las pone el layout entre secciones */
.section, .section + .section{ border-top:0 !important; }