*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --dark:    #24332F;
      --dark2:   #1E2B27;
      --green:   #3A9E72;
      --green-l: #6DC49A;
      --ocre:    #CFA56E;
      --white:   #FFFFFF;
      --off:     #F2F2EE;
      --border:  #E0DDD6;
      --ink:     #18201E;
      --mid:     #3F524D;
      --light:   #6E827B;
      --ez:      cubic-bezier(0.16, 1, 0.3, 1);
      --fd: 'Cinzel', Georgia, serif;
      --fb: 'Montserrat', sans-serif;
      --charcoal: #0E1814;   /* fondo del Método: grafito profundo, distinto del --dark */
    }

    html { scroll-behavior: smooth; }
    body { font-family: var(--fb); background: var(--dark); color: #F2EFE8; overflow-x: hidden; }

    .grain-overlay {
      position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.036;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.78' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
      background-size: 200px 200px;
    }

    /* ── TRANSITIONS ── */
    .sect-t { display: block; position: relative; pointer-events: none; }

    /* Hero → Servicios: solo desktop — en mobile el hero no es full-bleed oscuro */
    .sect-t--hero2srv { display: none; }
    @media (min-width: 861px) {
      .sect-t--hero2srv {
        display: block;
        height: 72px;
        background: linear-gradient(to bottom, #080F0B 0%, var(--white) 100%);
      }
    }

    .sect-t--doff {
      height: 112px;
      /* Ahora transiciona desde charcoal (Método) hacia off-white (Casos) */
      background: linear-gradient(to bottom,
        #0E1814 0%, rgba(14,24,20,0.88) 12%,
        rgba(14,24,20,0.62) 28%, rgba(14,24,20,0.36) 46%,
        rgba(14,24,20,0.14) 64%, rgba(14,24,20,0.03) 82%, #F2F2EE 100%);
    }

    /* FAQ → CTA: ambas secciones son oscuras, la transición es un respiro intencional */
    .sect-t--d2cta {
      height: 72px;
      background: linear-gradient(to bottom, #1E2B27 0%, #0F1E19 100%);
      position: relative;
      pointer-events: none;
    }
    .sect-t--d2cta::before {
      content: '';
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      width: 52px; height: 1px;
      background: linear-gradient(to right, transparent, rgba(207,165,110,0.28), transparent);
    }

    /* ── NAV ── */
    nav {
      position: fixed; top: 0; left: 0; right: 0; z-index: 100;
      padding: 0 64px; height: 76px;
      display: flex; align-items: center; justify-content: space-between;
      background: linear-gradient(to bottom, rgba(18,28,24,0.72) 0%, rgba(18,28,24,0.00) 100%);
      transition: height 0.38s var(--ez), background 0.22s ease, box-shadow 0.28s ease, backdrop-filter 0.28s ease;
    }
    nav.sc {
      height: 60px; background: rgba(15,22,19,0.96);
      backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%);
      box-shadow: 0 1px 0 rgba(109,196,154,0.07), 0 2px 0 rgba(255,255,255,0.03), 0 6px 32px rgba(0,0,0,0.32);
    }
    .nav-brand { display: flex; flex-direction: column; gap: 3px; text-decoration: none; }
    .nav-brand-name { font-family: var(--fd); font-size: 15px; font-weight: 600; color: #F2EFE8; letter-spacing: 0.05em; line-height: 1; transition: font-size 0.28s var(--ez); }
    nav.sc .nav-brand-name { font-size: 14px; }
    .nav-brand-tag { font-size: 11px; font-weight: 500; letter-spacing: 0.13em; color: rgba(242,239,232,0.72); text-transform: uppercase; line-height: 1; transition: opacity 0.28s; }
    nav.sc .nav-brand-tag { opacity: 1; }
    .nav-links { display: flex; gap: 2px; align-items: center; }
    .nav-links a.nav-link { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.68); text-decoration: none; font-weight: 500; padding: 8px 13px; border-radius: 3px; position: relative; transition: color 0.2s var(--ez); }
    .nav-links a.nav-link::after { content: ''; position: absolute; bottom: 4px; left: 13px; right: 13px; height: 1px; background: var(--ocre); transform: scaleX(0); transform-origin: left; transition: transform 0.32s var(--ez); }
    .nav-links a.nav-link:hover { color: rgba(255,255,255,0.9); }
    .nav-links a.nav-link:hover::after { transform: scaleX(1); }
    .nav-links a.nav-link.active { color: rgba(255,255,255,0.92); }
    .nav-links a.nav-link.active::after { transform: scaleX(1); background: var(--green-l); }
    .nav-cta { margin-left: 14px; padding: 10px 24px; background: var(--green); color: var(--dark); font-family: var(--fb); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; border-radius: 100px; transition: background 0.3s var(--ez), transform 0.22s var(--ez), box-shadow 0.3s var(--ez); box-shadow: 0 2px 10px rgba(58,158,114,0.16); }
    .nav-cta:hover { background: #3DB87A; transform: translateY(-2px); box-shadow: 0 5px 18px rgba(58,158,114,0.35); }
    .nav-cta:active { transform: translateY(0); box-shadow: none; }
    .nav-hamburger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; cursor: pointer; background: none; border: none; padding: 6px; }
    .nav-hamburger span { display: block; height: 1.5px; background: rgba(255,255,255,0.85); border-radius: 1px; width: 100%; transition: transform 0.2s var(--ez), opacity 0.2s var(--ez); }
    .nav-hamburger span:nth-child(2) { width: 68%; }
    .nav-hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
    .nav-hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
    .nav-hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
    .nav-drawer { display: none; position: fixed; top: 60px; left: 0; right: 0; background: rgba(18,26,23,0.99); backdrop-filter: blur(18px); border-bottom: 1px solid rgba(255,255,255,0.09); flex-direction: column; padding: 8px 20px 24px; gap: 2px; transform: translateY(-6px); opacity: 0; transition: transform 0.15s ease, opacity 0.15s ease; pointer-events: none; z-index: 99; }
    .nav-drawer.open { transform: translateY(0); opacity: 1; pointer-events: all; }
    .nav-drawer a { font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.88); text-decoration: none; font-weight: 500; padding: 15px 12px; border-bottom: 1px solid rgba(255,255,255,0.07); border-left: 2px solid transparent; border-radius: 4px; transition: color 0.15s ease, background-color 0.15s ease, border-left-color 0.15s ease; }
    .nav-drawer a:last-child { border-bottom: none; }
    .nav-drawer a:hover, .nav-drawer a:active { color: #fff; background-color: rgba(255,255,255,0.07); border-left-color: var(--green-l); }
    .nav-drawer .nav-cta { margin-top: 12px; padding: 15px 22px; text-align: center; display: block; border-bottom: none; border-left: none; border-radius: 100px; background: var(--green); color: var(--dark); }
    .nav-drawer .nav-cta:hover { background: #3DB87A; border-left-color: transparent; box-shadow: 0 4px 18px rgba(58,158,114,0.38); }
    section[id], div[id] { scroll-margin-top: 80px; }

    /* ── HERO ── */
    /* Base (mobile-first): stack vertical, sin imagen de fondo */
    .hero {
      margin-top: 76px;
      display: flex;
      flex-direction: column;
      position: relative;
      overflow: hidden;
      background:
        radial-gradient(ellipse 88% 62% at 50% 38%, #2D3E38 0%, #17231C 100%);
    }
    /* hero-inner: en mobile solo hereda el flex del padre */
    .hero-inner {
      display: contents;  /* transparente en mobile, los hijos se comportan como hijos directos del hero */
    }
    /* Zona 3 del hero: solo visible en desktop */
    .hero-cta-block { display: none; }
    /* Indicador de scroll: solo desktop */
    .hero-scroll { display: none; }
    /* Imagen del hero: base mobile (dentro del photo-ph con aspect-ratio) */
    .hero-photo-img {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      object-fit: cover;
      object-position: center 20%;
      filter: saturate(0.7) brightness(0.82);
      display: block;
    }
    /* Bloque de texto — base mobile */
    .hero-text-block {
      position: relative;
      z-index: 2;
      padding: 56px 28px 48px;
      display: flex;
      flex-direction: column;
    }
    /* Bloque de imagen — base mobile: debajo del texto, ancho completo */
    .hero-photo-ph {
      position: relative;
      width: 100%;
      aspect-ratio: 4 / 3;
      flex-shrink: 0;
      overflow: hidden;
    }
    .hero-photo-ph-inner {
      position: absolute; inset: 0;
      background: linear-gradient(160deg, #1A2E28 0%, #0D1A14 100%);
      display: flex; align-items: center; justify-content: center;
    }
    .hero-photo-ph-lbl {
      font-size: 11px; letter-spacing: 0.12em; color: rgba(255,255,255,0.18);
      font-style: italic; text-align: center; padding: 24px; max-width: 280px; line-height: 1.7;
    }
    /* Overlay: no se usa en mobile (no hay imagen de fondo) */
    .hero-overlay { display: none; }
    /* Efectos atmosféricos — solo en el texto block */
    .hero-radial  { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse 70% 55% at 30% 80%, rgba(58,158,114,0.10) 0%, transparent 68%); }
    .hero-breath  { position: absolute; inset: -6%; z-index: 0; pointer-events: none; background: radial-gradient(ellipse 56% 48% at 35% 70%, rgba(109,196,154,0.06) 0%, transparent 62%); animation: breathe 9s ease-in-out infinite; }
    @keyframes breathe { 0%,100%{opacity:.55;transform:scale(1)} 50%{opacity:1;transform:scale(1.025)} }
    .hero .grain-overlay { opacity: 0.03; z-index: 1; position: absolute; inset: 0; pointer-events: none; }

    /* Elementos de contenido */
    .hero-tag {
      font-size: 11px; letter-spacing: 0.36em; text-transform: uppercase;
      color: var(--ocre); margin-bottom: 22px; font-weight: 600;
      text-shadow: 0 0 22px rgba(207,165,110,0.28);
      opacity: 0; animation:
        hero-tag-in 0.9s 0.05s var(--ez) forwards,
        hero-tag-glow 3.8s 1.1s ease-in-out infinite;
    }
    .hero-title {
      font-family: var(--fd); font-size: clamp(38px, 9vw, 92px); font-weight: 400;
      line-height: 1.12; color: #F2EFE8; margin-bottom: 0.18em; letter-spacing: -0.01em;
      text-shadow: 0 4px 40px rgba(0,0,0,0.30);
    }
    .hero-title-line1 {
      display: block;
      opacity: 0; animation: hero-from-left 0.85s 0.22s var(--ez) forwards;
    }
    .hero-title-line2 {
      display: block;
      opacity: 0; animation: hero-from-left 0.85s 0.38s var(--ez) forwards;
    }
    .hero-title em { font-style: italic; font-weight: inherit; color: var(--green-l); text-shadow: 0 0 28px rgba(109,196,154,0.22); }

    /* Subtítulo: fluye directamente desde el título, sin separación visual */
    .hero-subtitle {
      font-size: 1.05em; line-height: 1.35; color: rgba(242,239,232,0.62);
      font-weight: 400; max-width: 38ch;
      margin-top: 0.18em; margin-bottom: 0;
      letter-spacing: 0.01em;
      opacity: 0; animation: hero-fade 0.85s 0.52s var(--ez) forwards;
    }
    .hero-subtitle strong {
      font-weight: 500;
      color: rgba(242,239,232,0.82);
    }
    /* Frase clave: protagonismo visual, entre subtítulo y CTA */
    .hero-phrase {
      font-family: var(--fd);
      font-size: clamp(18px, 2.2vw, 22px);
      font-style: italic;
      font-weight: 400;
      line-height: 1.55;
      color: rgba(242,239,232,0.88);
      max-width: 40ch;
      margin-bottom: 48px;
      padding-left: 16px;
      border-left: 2px solid var(--ocre);
      opacity: 0; animation: hero-fade 0.85s 0.66s var(--ez) forwards;
    }
    .hero-phrase em { color: var(--green-l); font-style: italic; }
    /* CTA */
    .hero-actions {
      display: flex; gap: 14px; flex-wrap: wrap;
      opacity: 0; animation: hero-from-left 0.85s 0.82s var(--ez) forwards;
    }

    /* Botón único hero-cta-block: centrado, elegante, ocre/dorado */
    .hero-cta-actions {
      display: flex;
      justify-content: flex-start;
      margin-top: 4px;
    }
    .btn-casos-hero {
      background: transparent;
      color: var(--ocre);
      border: 1.5px solid rgba(207,165,110,0.45);
      letter-spacing: 0.14em;
      font-size: 10.5px;
      padding: 14px 32px;
      border-radius: 100px;
      position: relative;
      overflow: hidden;
      transition:
        color 0.3s var(--ez),
        border-color 0.3s var(--ez),
        background 0.3s var(--ez),
        transform 0.22s var(--ez),
        box-shadow 0.3s var(--ez);
    }
    .btn-casos-hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background: rgba(207,165,110,0.08);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.4s var(--ez);
      border-radius: inherit;
    }
    .btn-casos-hero:hover {
      color: #F2EFE8;
      border-color: var(--ocre);
      box-shadow: 0 4px 20px rgba(207,165,110,0.22);
      transform: translateY(-2px);
    }
    .btn-casos-hero:hover::before { transform: scaleX(1); }
    @keyframes hero-from-left {
      from { opacity: 0; transform: translateX(-18px); }
      to   { opacity: 1; transform: translateX(0); }
    }
    @keyframes hero-from-right {
      from { opacity: 0; transform: translateX(20px); }
      to   { opacity: 1; transform: translateX(0); }
    }
    @keyframes hero-fade {
      from { opacity: 0; }
      to   { opacity: 1; }
    }
    @keyframes hero-tag-in {
      from { opacity: 0; transform: translateY(10px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes hero-tag-glow {
      0%,  100% { text-shadow: 0 0 18px rgba(207,165,110,0.18); }
      50%        { text-shadow: 0 0 36px rgba(207,165,110,0.50); }
    }
    /* ── BUTTONS — sistema único ── */
    .btn {
      display: inline-flex; align-items: center; justify-content: center;
      padding: 15px 36px;
      border-radius: 100px;               /* pill — carácter propio */
      font-family: var(--fb);
      font-size: 11.5px;
      font-weight: 600;
      letter-spacing: 0.16em;
      text-decoration: none;
      text-transform: uppercase;
      cursor: pointer;
      border: none;
      /* transición granular: no usar "all" para evitar conflictos */
      transition:
        background  0.3s var(--ez),
        color       0.3s var(--ez),
        border-color 0.3s var(--ez),
        box-shadow  0.3s var(--ez),
        transform   0.22s var(--ez);
    }
    .btn:active { transform: translateY(0) !important; box-shadow: none !important; }

    /* Verde sólido — CTA principal */
    .btn-green {
      background: var(--green);
      color: var(--dark);
      box-shadow: 0 2px 12px rgba(58,158,114,0.18);
    }
    .btn-green:hover {
      background: #3DB87A;
      color: #0D1A15;
      transform: translateY(-2px);
      box-shadow: 0 6px 24px rgba(58,158,114,0.38);
    }

    /* Ghost sobre fondo oscuro */
    .btn-ghost-light {
      background: transparent;
      color: rgba(242,239,232,0.65);
      border: 1.5px solid rgba(255,255,255,0.35);
    }
    .btn-ghost-light:hover {
      border-color: var(--green-l);
      color: var(--green-l);
      transform: translateY(-2px);
      box-shadow: 0 4px 16px rgba(109,196,154,0.15);
    }

    /* Ghost sobre fondo claro */
    .btn-ghost-dark {
      background: transparent;
      color: var(--mid);
      border: 1.5px solid var(--border);
    }
    .btn-ghost-dark:hover {
      border-color: var(--green);
      color: var(--green);
      transform: translateY(-2px);
    }

    /* ── SECTION LABELS ── */
    .sec-lbl { font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--green); margin-bottom: 14px; font-weight: 600; }
    .sec-h2 { font-family: var(--fd); font-size: clamp(30px, 4vw, 50px); font-weight: 400; color: var(--ink); line-height: 1.12; margin-bottom: 24px; }
    .sec-p { font-size: 16px; line-height: 1.85; color: var(--mid); font-weight: 300; max-width: 540px; }

    /* ── TIPOGRAFÍA DESKTOP — legibilidad +40 años ── */
    @media (min-width: 1024px) {
      body { font-size: 18px; }
      p { font-size: 18px; line-height: 1.7; }
      .sec-p { font-size: 18px; }
      .srv-strip-p { font-size: 16px; }
      .faq-text { font-size: 18px; line-height: 2.05; }
      .faq-lead { font-size: 20px; }
      .faq-q { font-size: 22px; padding: 30px 0; }
      .bio-p { font-size: 17px; }
    }

    /* ── INTRO BLOCK (nuevo, reemplaza intro-strip) ── */
    .intro-block {
      background: var(--dark2);
      padding: 92px 80px;
      position: relative; overflow: hidden;
    }
    .intro-block .grain-overlay { opacity: 0.028; }
    .intro-block-inner { position: relative; z-index: 1; max-width: 860px; margin: 0 auto; text-align: center; }
    .intro-block-text {
      font-family: var(--fd);
      font-size: clamp(22px, 3vw, 36px);
      font-weight: 400; line-height: 1.45;
      color: #F2EFE8;
    }
    .intro-block-text em { font-style: italic; color: var(--green-l); }
    .intro-block-line { width: 40px; height: 2px; background: var(--ocre); margin: 0 auto 32px; }
    .intro-block-cta {
      margin-top: 44px;
      display: flex;
      justify-content: center;
    }

    /* ── SERVICIOS ── */
    .services-wrap { background: var(--white); padding: 96px 0 0; position: relative; }
    .services-wrap::before { content:''; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:0.024; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E"); background-size:200px 200px; }
    .srv-intro { padding: 0 80px 56px; position: relative; z-index: 1; max-width: 1200px; }
    .srv-intro-text { max-width: 760px; }
    .services-wrap .sec-lbl { color: var(--mid); }
    .services-wrap .sec-h2 { color: var(--ink); margin-bottom: 24px; }
    .services-wrap .sec-p { margin-bottom: 24px; }
    .srv-intro .sec-p { max-width: 640px; }
    .srv-intro-footer { margin-top: 32px; display: flex; align-items: center; gap: 32px; flex-wrap: wrap; }
    .srv-footer-wrap { max-width: 1200px; margin: 0 auto; padding: 40px 80px 64px; position: relative; z-index: 1; border-top: 1px solid var(--border); }

    .srv-strips { display: flex; flex-direction: column; position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; }
    .srv-strip { display: grid; grid-template-columns: 100px 1fr; border-top: 1px solid var(--border); cursor: pointer; position: relative; transition: background 0.55s var(--ez), box-shadow 0.55s var(--ez); overflow: hidden; }
    .srv-strip:last-child { border-bottom: 1px solid var(--border); }
    .srv-strip:hover { background: #FAFAF8; }
    /* Abierto: tinta muy suave — arena/grafito liviano, legible sobre blanco, sin confusión con la columna verde */
    .srv-strip.on {
      background: #F0EDE8;
      box-shadow: inset 0 0 0 1px rgba(36,51,47,0.07), inset 4px 0 0 var(--green);
    }
    .srv-strip-bar { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: transparent; transition: background 0.3s; }
    .srv-strip:hover .srv-strip-bar { background: var(--border); }
    .srv-strip.on .srv-strip-bar { background: var(--green); }
    .srv-strip-left { display: flex; align-items: flex-start; justify-content: center; padding: 32px 0 32px 24px; }
    .srv-big-num { font-family: var(--fd); font-size: 72px; font-weight: 400; font-style: italic; line-height: 1; color: #E0DDD6; transition: color 0.35s var(--ez); user-select: none; }
    .srv-strip:hover .srv-big-num { color: #D0CCC4; }
    .srv-strip.on .srv-big-num { color: rgba(36,51,47,0.10); }
    .srv-strip-right { padding: 32px 80px 32px 28px; }
    .srv-strip-title { font-family: var(--fd); font-size: 25px; font-weight: 400; color: var(--ink); line-height: 1.2; transition: color 0.3s var(--ez); margin-bottom: 4px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
    /* Abierto: título en tinta oscura (sobre fondo arena) */
    .srv-strip.on .srv-strip-title { color: var(--ink); }
    .srv-strip-chevron { flex-shrink: 0; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; opacity: 0.35; transition: transform 0.28s ease, opacity 0.22s ease; }
    .srv-strip-chevron::after { content: ''; display: block; width: 9px; height: 9px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); }
    .srv-strip:hover .srv-strip-chevron { opacity: 0.6; }
    .srv-strip.on .srv-strip-chevron { transform: rotate(-180deg); opacity: 0.9; }
    .srv-strip.on .srv-strip-chevron::after { border-color: var(--green); }
    .srv-strip-hint { font-size: 14px; color: var(--mid); font-style: italic; font-weight: 300; transition: opacity 0.2s; display: flex; align-items: center; gap: 6px; }
    .srv-strip-hint::after { content: '↓'; color: var(--ocre); font-style: normal; font-weight: 600; font-size: 13px; line-height: 1; }
    .srv-strip.on .srv-strip-hint { opacity: 0; height: 0; overflow: hidden; }
    .srv-strip-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.72s var(--ez), opacity 0.55s 0.08s var(--ez); opacity: 0; }
    .srv-strip.on .srv-strip-body { grid-template-rows: 1fr; opacity: 1; }
    .srv-strip-body-inner { overflow: hidden; }
    .srv-strip-inner { padding: 16px 80px 36px 16px; transform: translateY(14px); transition: transform 0.68s 0.08s var(--ez); }
    .srv-strip.on .srv-strip-inner { transform: translateY(0); }
    /* Texto del cuerpo expandido: sobre fondo arena, usamos tinta oscura */
    .srv-strip-lead { font-family: var(--fd); font-size: 18px; font-style: italic; color: var(--green); line-height: 1.5; margin-bottom: 16px; }
    .srv-strip-p { font-size: 15px; line-height: 1.85; color: var(--mid); font-weight: 300; margin-bottom: 10px; max-width: 640px; }
    .srv-strip-cta { display: inline-block; margin-top: 22px; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--green); text-decoration: none; border-bottom: 1px solid rgba(58,158,114,0.35); padding-bottom: 2px; transition: border-color 0.2s; font-weight: 500; }
    .srv-strip-cta:hover { border-color: var(--green); }

    @media (min-width: 1024px) {
      /* Alinear el contenido expandido al mismo eje que el título (col derecha del grid) */
      .srv-strip-inner {
        max-width: 720px;
        margin: 0;            /* no centrar: quedar alineado bajo el título */
        padding-left: 0;
        padding-right: 80px;
      }
      .srv-strip-p {
        max-width: 640px;
      }
    }

    /* ── RESULTADOS ── */
    .resultados-wrap {
      background: var(--dark);
      padding: 88px 28px 80px;
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }
    .resultados-wrap .grain-overlay { opacity: 0.03; }
    .resultados-wrap .sec-lbl { color: var(--green-l); opacity: 0.7; position: relative; z-index: 1; }
    .resultados-wrap .sec-h2 { color: #F2EFE8; font-size: clamp(36px, 3.8vw, 56px); margin-bottom: 24px; line-height: 1.06; position: relative; z-index: 1; letter-spacing: -0.02em; }
    .enfoque-divider { width: 56px; height: 2px; background: var(--ocre); margin-bottom: 44px; position: relative; z-index: 1; }
    .elist { list-style: none; margin-bottom: 52px; position: relative; z-index: 1; }
    .elist li { display: flex; gap: 20px; padding: 28px 0; border-bottom: 1px solid rgba(255,255,255,0.09); align-items: flex-start; }
    .elist li::before { content:"—"; color: var(--ocre); flex-shrink:0; font-family: var(--fd); font-size: 15px; margin-top: 4px; }
    .elist li:first-child { padding-top: 0; }
    .elist-content { display: flex; flex-direction: column; gap: 7px; flex: 1; }
    .elist-title {
      font-family: var(--fd); font-size: clamp(17px, 1.6vw, 20px);
      font-weight: 400; font-style: italic; color: #F2EFE8;
      line-height: 1.32; display: block;
    }
    .elist-title strong { color: var(--ocre); font-weight: 600; font-style: normal; }
    .elist-body {
      font-size: 14px; color: rgba(242,239,232,0.58);
      line-height: 1.72; font-weight: 300; display: block;
    }
    .enfoque-cta { align-self: flex-start !important; margin-top: 8px; position: relative; z-index: 1; }

    /* ── TWO-COLUMN WRAPPER: Servicios + Resultados ── */
    /* Mobile-first: columna única, cada sección full-width */
    .srv-res-wrapper {
      display: flex;
      flex-direction: column;
    }
    .srv-res-wrapper .services-wrap {
      width: 100%;
    }
    .srv-res-wrapper .resultados-wrap {
      width: 100%;
    }
    /* Desktop: dos columnas 50/50, stretch para igualar alturas */
    @media (min-width: 1024px) {
      .srv-res-wrapper {
        flex-direction: row;
        align-items: stretch;
      }
      .srv-res-wrapper .services-wrap {
        width: 50%;
        flex-shrink: 0;
        padding-bottom: 96px;
      }
      .srv-res-wrapper .resultados-wrap {
        width: 50%;
        flex-shrink: 0;
        padding: 88px 72px 80px 80px;
        /* Separación visual: línea fina en el borde izquierdo (lado del corte) */
        border-left: 1px solid rgba(109,196,154,0.12);
      }
      /* Dentro de la columna verde: botón centrado, más presencia */
      .srv-res-wrapper .resultados-wrap .enfoque-cta {
        align-self: center !important;
        margin-top: 44px;
      }
    }

    /* ── PUENTE CONCEPTUAL (entre Resultados y Método) ── */
    .bridge-block {
      /* Degradado de transición: dark (Resultados) → charcoal (Método) */
      background: linear-gradient(to bottom, var(--dark) 0%, var(--charcoal) 100%);
      padding: 80px 80px 88px;
      position: relative;
      overflow: hidden;
      /* Sin border-top: el degradé mismo comunica la transición */
    }
    .bridge-block .grain-overlay { opacity: 0.025; }
    .bridge-block-inner {
      max-width: 760px;
      margin: 0 auto;
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }
    .bridge-ornament {
      width: 1px;
      height: 52px;
      background: linear-gradient(to bottom, transparent, rgba(207,165,110,0.5), transparent);
      margin-bottom: 36px;
    }
    .bridge-text {
      font-family: var(--fd);
      font-size: clamp(20px, 2.2vw, 28px);
      font-weight: 400;
      font-style: italic;
      line-height: 1.65;
      color: rgba(242,239,232,0.72);
      letter-spacing: 0.01em;
    }
    .bridge-text strong {
      color: #F2EFE8;
      font-style: normal;
      font-weight: 600;
    }
    .bridge-text em {
      color: var(--ocre);
      font-style: italic;
    }
    .bridge-arrow {
      margin-top: 44px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      opacity: 0.35;
    }
    .bridge-arrow span { font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--green-l); font-weight: 500; }
    .bridge-arrow-line { width: 1px; height: 36px; background: linear-gradient(to bottom, var(--green-l), transparent); }

    /* ── ENTRADA AL MÉTODO ── */
    .metodo-intro {
      padding: 96px 80px 72px;
      position: relative;
      z-index: 1;
      background: var(--charcoal);
    }
    .metodo-intro-inner {
      max-width: 860px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }
    .metodo-intro-label {
      font-size: 10px;
      letter-spacing: 0.32em;
      text-transform: uppercase;
      color: var(--green-l);
      font-weight: 600;
      margin-bottom: 28px;
    }
    .metodo-intro-label.in { opacity: 0.75 !important; }
    .metodo-intro-title {
      font-family: var(--fd);
      font-size: clamp(22px, 3vw, 36px);
      font-weight: 400;
      font-style: italic;
      line-height: 1.45;
      color: #F2EFE8;
      margin: 0 0 40px;
      letter-spacing: -0.01em;
    }
    .metodo-intro-line1,
    .metodo-intro-line2,
    .metodo-intro-line3 {
      display: block;
      opacity: 0;
      transform: translateY(24px);
      transition: opacity 0.9s var(--ez), transform 0.9s var(--ez);
    }
    .metodo-intro-title.in .metodo-intro-line1 { opacity: 1; transform: none; transition-delay: 0s; }
    .metodo-intro-title.in .metodo-intro-line2 { opacity: 1; transform: none; transition-delay: 0.14s; }
    .metodo-intro-title.in .metodo-intro-line3 { opacity: 1; transform: none; transition-delay: 0.28s; }
    .metodo-intro-rule {
      width: 0;
      height: 2px;
      background: var(--ocre);
      transition: width 1.1s 0.4s var(--ez), opacity 0.5s 0.4s var(--ez);
      opacity: 0;
    }
    .metodo-intro-rule.in { width: 56px; opacity: 1; }

    /* Desktop: más padding lateral y margen inferior mayor */
    @media (min-width: 861px) {
      .metodo-intro { padding: 96px 100px 64px; }
    }

    /* Mobile */
    @media (max-width: 860px) {
      .metodo-intro { padding: 64px 28px 48px; }
      .metodo-intro-title { margin-bottom: 32px; }
    }

    /* ── 6 EJES ── */
    .ejes-wrap { background: var(--charcoal); padding: 0 0 80px; position: relative; overflow: hidden; }
    .ejes-wrap .grain-overlay { opacity: 0.03; }

    /* Micro-animación de rebote para indicar que el carrusel es deslizable */
    @keyframes eje-bounce-hint {
      0%   { transform: translateX(0); }
      15%  { transform: translateX(-18px); }
      35%  { transform: translateX(8px); }
      55%  { transform: translateX(-5px); }
      70%  { transform: translateX(2px); }
      85%  { transform: translateX(-1px); }
      100% { transform: translateX(0); }
    }
    .ejes-track.bounce-hint {
      animation: eje-bounce-hint 0.9s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
    }
    .ejes-header { display: none; padding: 0 80px 52px; position: relative; z-index: 1; max-width: 1200px; width: 100%; }
    .ejes-header .sec-lbl { color: var(--green-l); opacity: 0.7; }
    .ejes-header .sec-h2 { color: #F2EFE8; margin-bottom: 0; }
    .ejes-track-outer { overflow: hidden; position: relative; z-index: 1; }
    .ejes-track { display: flex; gap: 0; padding: 0 8% 0 0; overflow-x: scroll; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; cursor: grab; }
    .ejes-track:active { cursor: grabbing; }
    .ejes-track::-webkit-scrollbar { display: none; }

    /* Card color tokens — 6 identidades distintas, una por eje */
    .eje-card           { --ac: var(--ocre);    --ac-rgb: 207,165,110; --bg-tint: rgba(207,165,110,0.08); } /* fallback */
    .eje-card.c-amber   { --ac: #E0952E;        --ac-rgb: 224,149,46;  --bg-tint: rgba(224,149,46,0.11); }  /* Eje 1 · Pulso interno */
    .eje-card.c-green   { --ac: var(--green-l); --ac-rgb: 109,196,154; --bg-tint: rgba(109,196,154,0.10); } /* Eje 2 · Marcación / Eje 5 · Instrumentos */
    .eje-card.c-sage    { --ac: #9FB3AA;        --ac-rgb: 159,179,170; --bg-tint: rgba(159,179,170,0.09); } /* Eje 3 · Elasticidad temporal */
    .eje-card.c-teal    { --ac: #5BA8A0;        --ac-rgb: 91,168,160;  --bg-tint: rgba(91,168,160,0.11); }  /* Eje 4 · Mapa musical */
    .eje-card.c-rose    { --ac: #C4785A;        --ac-rgb: 196,120,90;  --bg-tint: rgba(196,120,90,0.11); }  /* Eje 6 · Bailar la voz */

    .eje-card {
      flex: 0 0 92%; scroll-snap-align: start;
      background: var(--bg-tint);
      border: none;
      border-left: none;
      padding: 0;
      position: relative; overflow: hidden; min-height: 420px;
      display: flex; align-items: stretch;
      transition: background 0.5s var(--ez);
    }
    .eje-card.active {
      background: rgba(var(--ac-rgb), 0.17);
    }
    /* Bottom accent line */
    .eje-card::before { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: var(--ac); transform: scaleX(0); transform-origin: left; transition: transform 0.7s var(--ez); }
    .eje-card.active::before { transform: scaleX(1); }
    /* Glow sutil: centrado en la mitad derecha (zona de contenido) */
    .eje-card::after { content: ''; position: absolute; bottom: 0; right: 0; width: 70%; height: 100%; background: radial-gradient(ellipse 80% 60% at 60% 80%, rgba(var(--ac-rgb), 0.10) 0%, transparent 70%); pointer-events: none; z-index: 0; }

    .eje-card-inner { position: relative; z-index: 1; max-width: 820px; flex: 1; padding: 52px 60px 52px 48px; }
    /* ── Franja izquierda: número como identidad visual por eje ── */
    .eje-num {
      font-family: var(--fd);
      font-size: clamp(56px, 9vw, 108px);
      font-weight: 400; font-style: italic; line-height: 1;
      color: rgba(var(--ac-rgb), 0.52);
      position: relative;
      flex: 0 0 18%;
      display: flex; align-items: center; justify-content: center;
      background: rgba(var(--ac-rgb), 0.13);
      border-right: 1px solid rgba(var(--ac-rgb), 0.18);
      transition: color 0.5s var(--ez), background 0.5s var(--ez);
      user-select: none; z-index: 1; pointer-events: none;
    }
    .eje-card.active .eje-num {
      color: rgba(var(--ac-rgb), 0.82);
      background: rgba(var(--ac-rgb), 0.22);
      border-right-color: rgba(var(--ac-rgb), 0.30);
    }
    .eje-tag { font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(var(--ac-rgb), 0.55); margin-bottom: 16px; font-weight: 500; display: block; }
    .eje-title { font-family: var(--fd); font-size: clamp(30px, 4.5vw, 52px); font-weight: 400; color: #F2EFE8; line-height: 1.15; margin-bottom: 0; }
    .eje-desc { font-size: 19px; line-height: 1.85; color: rgba(242,239,232,0.88); font-weight: 400; max-width: 680px; }
    .eje-divider { width: 32px; height: 2px; background: var(--ac); opacity: 0.6; margin: 28px 0; }

    /* ── EJES NAVIGATION (prominente, accesible) ── */
    .ejes-nav-bar {
      display: flex; align-items: center; justify-content: space-between;
      padding: 0 80px; margin-top: 0; position: relative; z-index: 2;
      background: rgba(0,0,0,0.18);
      border-top: 1px solid rgba(255,255,255,0.06);
    }
    .ejes-nav-btn {
      display: flex; align-items: center; gap: 10px;
      padding: 20px 0;
      background: transparent; border: none;
      color: rgba(255,255,255,0.55); cursor: pointer;
      font-family: var(--fb); font-size: 11px; font-weight: 600;
      letter-spacing: 0.12em; text-transform: uppercase;
      transition: color 0.22s var(--ez); flex-shrink: 0;
    }
    .ejes-nav-btn:hover { color: var(--ocre); }
    .ejes-nav-btn:disabled { opacity: 0.2; cursor: default; }
    .ejes-nav-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
    .ejes-counter {
      font-family: var(--fd); font-size: 13px; font-style: italic;
      color: rgba(255,255,255,0.28); letter-spacing: 0.08em;
    }
    .ejes-counter strong { color: rgba(255,255,255,0.65); font-style: normal; font-weight: 400; }

    .ejes-dots { display: flex; gap: 8px; justify-content: center; padding: 28px 80px 0; position: relative; z-index: 1; }
    .ejes-dot { width: 24px; height: 3px; background: rgba(255,255,255,0.12); border-radius: 2px; transition: all 0.4s var(--ez); cursor: pointer; }
    .ejes-dot:hover { background: rgba(255,255,255,0.3); }
    .ejes-dot.active { width: 48px; background: var(--ocre); }
    .ejes-dot.active.c-amber { background: #E0952E; }
    .ejes-dot.active.c-green { background: var(--green-l); }
    .ejes-dot.active.c-sage  { background: #9FB3AA; }
    .ejes-dot.active.c-teal  { background: #5BA8A0; }
    .ejes-dot.active.c-rose  { background: #C4785A; }

    .ejes-cierre {
      position: relative; z-index: 1;
      margin: 36px 80px 0;
      padding: 52px 48px;
      display: flex; flex-direction: column; align-items: center; text-align: center;
      background: rgba(207,165,110,0.06);
      border: 1px solid rgba(207,165,110,0.15);
      border-radius: 4px;
    }
    .ejes-cierre-line { width: 40px; height: 2px; background: var(--ocre); opacity: 0.7; margin-bottom: 28px; }
    .ejes-cierre-text {
      font-family: var(--fd);
      font-size: clamp(20px, 2.2vw, 28px);
      font-style: italic;
      font-weight: 400;
      color: rgba(242,239,232,0.92);
      line-height: 1.6;
      max-width: 680px;
    }

    /* ── CASOS ── */
    .casos-wrap { background: var(--off); padding: 120px 80px 112px; position: relative; }
    .casos-wrap::before { content:''; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:0.024; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E"); background-size:200px 200px; }
    .casos-wrap > * { position: relative; z-index: 1; }
    .casos-wrap .sec-lbl { color: var(--mid); }
    .casos-wrap .sec-h2 { color: var(--ink); margin-bottom: 12px; }
    .casos-intro { font-size: 15px; color: var(--mid); font-weight: 300; margin-bottom: 52px; font-style: italic; }
    .casos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
    .case-card { min-height: 380px; perspective: 1400px; cursor: pointer; }
    .case-card-inner { display: grid; width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform 1.05s cubic-bezier(0.45, 0.05, 0.55, 0.95); will-change: transform; }
    .case-card:hover .case-card-inner, .case-card.flipped .case-card-inner { transform: rotateY(180deg); }
    .case-front, .case-back { grid-area: 1 / 1; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 4px; padding: 36px 32px; display: flex; flex-direction: column; justify-content: space-between; }
    .case-front { background: var(--white); border: 1px solid var(--border); }
    .case-front-tag { font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--light); font-weight: 500; margin-bottom: 20px; display: block; }
    .case-problem { font-family: var(--fd); font-size: 24px; font-weight: 600; color: var(--ink); line-height: 1.3; font-style: italic; flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 6px; }
    .case-front-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border); }
    .case-profile { font-size: 11px; color: var(--light); font-weight: 400; }
    .case-hint { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ocre); display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: rgba(207,165,110,0.10); border: 1px solid rgba(207,165,110,0.25); border-radius: 100px; font-weight: 600; transition: background 0.2s, border-color 0.2s; }
    .case-hint svg { width: 12px; height: 12px; transition: transform 0.2s; }
    .case-front:hover .case-hint, .case-card.flipped ~ * .case-hint { background: rgba(207,165,110,0.18); border-color: rgba(207,165,110,0.45); }
    .case-front:hover .case-hint svg { transform: translateX(2px); }
    .case-back { background: var(--dark); border: 1px solid rgba(207,165,110,0.2); transform: rotateY(180deg); }
    .case-back::before { content: ''; position: absolute; top: 0; left: 32px; right: 32px; height: 2px; background: var(--ocre); }
    .case-back-tag { font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ocre); font-weight: 500; margin-bottom: 20px; display: block; opacity: 0.8; }
    .case-solution { font-size: 15px; line-height: 1.8; color: rgba(242,239,232,0.82); font-weight: 300; flex: 1; display: flex; align-items: center; }
    .case-back-footer { margin-top: 20px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.07); display: flex; align-items: center; gap: 10px; }
    .case-back-icon { width: 8px; height: 8px; border-radius: 50%; background: var(--green-l); flex-shrink: 0; }
    .case-result { font-size: 12px; color: var(--green-l); font-weight: 500; }

    /* ── BIO ── */
    .bio-wrap {
      background: var(--white);
      padding: 112px 80px 96px;
      display: grid;
      grid-template-columns: 1fr;   /* mobile: stack */
      gap: 48px;
      align-items: start;
      position: relative;
    }
    .bio-wrap::before { content:''; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:0.024; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E"); background-size:200px 200px; }
    .bio-wrap > * { position: relative; z-index: 1; }
    .bio-wrap .sec-lbl { color: var(--mid); }
    .bio-wrap .sec-h2 { color: var(--ink); }
    /* Columna izquierda: foto + credenciales apiladas */
    .bio-left-col { display: flex; flex-direction: column; gap: 32px; width: 100%; position: relative; z-index: 1; }
    /* Photo col: portrait placeholder toma el aspect-ratio de la imagen */
    .bio-photo-col { width: 100%; }
    .bio-main-col { min-width: 0; }
    .bio-p { font-size: 17px; line-height: 2.0; color: var(--mid); font-weight: 300; margin-bottom: 20px; }
    .bio-aside { display: flex; flex-direction: column; }
    .bfact { padding: 20px 0; border-bottom: 1px solid var(--border); }
    .bfact:first-child { border-top: 1px solid var(--border); }
    .bfact-l { font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--green); margin-bottom: 6px; font-weight: 500; }
    .bfact-v { font-family: var(--fd); font-size: 15px; color: var(--ink); font-weight: 400; line-height: 1.4; }
    .bfact-v a { color: var(--green); text-decoration: none; }


    /* ── FAQ ── */
    .faq-wrap {
      background: var(--dark2);
      padding: 96px 40px;
      position: relative; overflow: hidden;
    }
    .faq-wrap .sec-lbl { font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--green-l); opacity: 0.7; margin-bottom: 12px; font-weight: 500; position: relative; z-index: 1; max-width: 900px; margin-left: auto; margin-right: auto; }
    .faq-wrap .sec-h2 { font-family: var(--fd); font-size: clamp(30px, 4vw, 50px); font-weight: 400; color: #F2EFE8; line-height: 1.12; margin-bottom: 52px; position: relative; z-index: 1; max-width: 900px; margin-left: auto; margin-right: auto; }
    .faq-list { width: 100%; display: flex; flex-direction: column; position: relative; z-index: 1; }
    .faq-item {
      border-top: 1px solid rgba(255,255,255,0.07);
      max-width: 900px; margin: 0 auto; width: 100%;
      padding: 0 18px;
      border-left: 2px solid transparent;
      transition: background 0.45s var(--ez), border-left-color 0.45s var(--ez);
    }
    .faq-item:last-child { border-bottom: 1px solid rgba(255,255,255,0.07); }
    .faq-item:has(.faq-q.open) {
      background: rgba(109,196,154,0.055);
      border-left-color: rgba(109,196,154,0.55);
    }
    .faq-q {
      width: 100%; background: none; border: none; text-align: left;
      padding: 28px 0; cursor: pointer;
      display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
      font-family: var(--fd); font-size: 21px; font-weight: 400;
      color: #E8E4DC; line-height: 1.35;
      transition: color 0.2s var(--ez);
    }
    .faq-q:hover { color: var(--green-l); }
    .faq-q.open  { color: var(--green-l); }
    .faq-icon {
      flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
      border: 1.5px solid rgba(255,255,255,0.18);
      display: flex; align-items: center; justify-content: center;
      transition: border-color 0.3s var(--ez), transform 0.5s var(--ez), background 0.35s var(--ez);
      margin-top: 3px;
    }
    .faq-q:hover .faq-icon { border-color: rgba(109,196,154,0.45); }
    .faq-q.open .faq-icon {
      border-color: var(--green-l);
      transform: rotate(45deg);
      background: rgba(109,196,154,0.14);
    }
    .faq-icon svg { width: 11px; height: 11px; }

    /* Answer panel: expand + fade + slide-up del contenido interior */
    .faq-a {
      display: grid; grid-template-rows: 0fr;
      transition: grid-template-rows 0.58s var(--ez), opacity 0.45s var(--ez);
      opacity: 0;
    }
    .faq-a.open { grid-template-rows: 1fr; opacity: 1; }
    .faq-a-inner { overflow: hidden; position: relative; }

    /* Línea decorativa que se extiende al abrir */
    .faq-a-inner::before {
      content: ''; position: absolute; top: 0; left: 0; height: 1.5px;
      background: linear-gradient(to right, var(--green-l), transparent);
      opacity: 0.45; width: 0;
      transition: width 0.7s 0.14s var(--ez);
    }
    .faq-a.open .faq-a-inner::before { width: 180px; }

    /* Lead: desliza desde abajo al aparecer */
    .faq-lead {
      font-family: var(--fd); font-size: 19px; font-style: italic;
      color: var(--green-l); margin-bottom: 14px; line-height: 1.5; padding-top: 22px;
      transform: translateY(10px);
      transition: transform 0.52s 0.10s var(--ez), opacity 0.45s 0.10s var(--ez);
      opacity: 0;
    }
    .faq-a.open .faq-lead { transform: translateY(0); opacity: 1; }

    /* Texto de respuesta: más grande, más contraste, también desliza */
    .faq-text {
      font-size: 17px; line-height: 2.0;
      color: rgba(242,239,232,0.88); font-weight: 300; padding-bottom: 32px;
      transform: translateY(14px);
      transition: transform 0.52s 0.18s var(--ez), opacity 0.45s 0.18s var(--ez);
      opacity: 0;
    }
    .faq-a.open .faq-text { transform: translateY(0); opacity: 1; }
    .faq-text p { margin-bottom: 12px; }
    .faq-text p:last-child { margin-bottom: 0; }

    /* ── CTA FINAL ── */
    .cta-wrap {
      background: #0F1E19;            /* más oscuro que --dark para marcar diferencia */
      padding: 160px 80px 152px;      /* más respiración vertical */
      text-align: center; position: relative; overflow: hidden;
    }
    .cta-wrap::before { content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:800px; height:800px; border-radius:50%; background:radial-gradient(circle, rgba(58,158,114,0.09) 0%, transparent 68%); pointer-events:none; }
    .cta-wrap::after { content:''; position:absolute; right:7%; top:50%; transform:translateY(-50%) rotate(-16deg); width:220px; height:480px; border:1px solid rgba(207,165,110,0.06); border-radius:50%; pointer-events:none; z-index:0; }
    .cta-ellipse2 { position:absolute; left:6%; top:50%; transform:translateY(-40%) rotate(12deg); width:160px; height:340px; border:1px solid rgba(109,196,154,0.05); border-radius:50%; pointer-events:none; z-index:0; }
    .cta-wrap .grain-overlay { opacity: 0.035; }
    .cta-tag { font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ocre); margin-bottom: 28px; font-weight: 500; position: relative; z-index: 1; opacity: 0.8; }
    .cta-title { font-family: var(--fd); font-size: clamp(40px, 6vw, 76px); font-weight: 300; color: #F2EFE8; line-height: 1.1; margin-bottom: 24px; position: relative; z-index: 1; letter-spacing: -0.01em; }
    .cta-subhead { font-family: var(--fd); font-size: clamp(20px, 2.6vw, 30px); font-weight: 400; font-style: italic; color: var(--green-l); line-height: 1.4; margin-bottom: 32px; position: relative; z-index: 1; }
    .cta-desc { font-size: 17px; color: rgba(242,239,232,0.65); font-weight: 300; line-height: 1.85; margin-bottom: 16px; max-width: 580px; margin-left: auto; margin-right: auto; position: relative; z-index: 1; }
    .cta-closing { font-size: 16px; color: rgba(242,239,232,0.65); font-weight: 400; font-style: italic; line-height: 1.6; margin-bottom: 52px; position: relative; z-index: 1; }
    .cta-btns { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; position: relative; z-index: 1; }
    .cta-portrait { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: clamp(180px, 22vw, 300px); height: clamp(280px, 38vw, 480px); overflow: hidden; z-index: 1; clip-path: inset(0 0 0 18%); }
    .cta-portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; filter: saturate(0.5) brightness(0.75); display: block; }
    .cta-portrait::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to right, #0F1E19 0%, rgba(15,30,25,0.65) 35%, transparent 70%); z-index: 1; pointer-events: none; }
    .cta-portrait::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, #0F1E19 0%, transparent 20%, transparent 80%, #0F1E19 100%); z-index: 1; pointer-events: none; }
    .cta-wrap .btn-green { padding: 19px 52px; font-size: 12.5px; letter-spacing: 0.18em; box-shadow: 0 4px 32px rgba(58,158,114,0.30); }
    .cta-wrap .btn-green:hover { box-shadow: 0 8px 40px rgba(58,158,114,0.48); }
    .cta-wrap .btn-ghost-light { padding: 19px 36px; font-size: 11px; opacity: 0.65; }
    .cta-wrap .btn-ghost-light:hover { opacity: 1; }

    /* ── FOOTER ── */
    footer {
      background: #0D1A15;
      padding: 22px 80px;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      border-top: 1px solid rgba(255,255,255,0.04);
    }
    .foot-main {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
      gap: 28px;
      flex: 1;
    }
    .foot-left { display: flex; flex-direction: row; align-items: center; gap: 0; }
    .foot-brand { font-family: var(--fd); font-size: 13px; color: rgba(242,239,232,0.50); letter-spacing: 0.02em; }
    .foot-brand::after { content: ' ·'; color: rgba(255,255,255,0.18); margin-right: 8px; }
    .foot-tagline { font-size: 11px; color: rgba(255,255,255,0.25); letter-spacing: 0.04em; font-weight: 300; }
    .foot-icons { display: flex; gap: 14px; align-items: center; }
    .foot-icons a {
      display: flex; align-items: center; justify-content: center;
      width: 28px; height: 28px;
      color: rgba(255,255,255,0.22);
      text-decoration: none;
      transition: color 0.2s;
    }
    .foot-icons a:hover { color: rgba(255,255,255,0.60); }
    .foot-icons svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
    .foot-divider { display: none; }
    .foot-copy { font-size: 10px; color: rgba(255,255,255,0.16); flex-shrink: 0; }
    @media (max-width: 860px) {
      footer { padding: 28px 24px 24px; flex-direction: column; align-items: flex-start; gap: 0; }
      .foot-main { flex-direction: column; gap: 14px; margin-bottom: 18px; }
      .foot-left { flex-direction: column; gap: 4px; align-items: flex-start; }
      .foot-brand::after { display: none; }
      .foot-icons { margin-top: 2px; gap: 16px; }
      .foot-divider { display: block; height: 1px; background: rgba(255,255,255,0.05); margin-bottom: 14px; width: 100%; }
      .foot-copy { font-size: 11px; }
    }

    /* ── SCROLL REVEAL ── */
    .reveal { opacity: 0; transform: translateY(22px); filter: blur(6px); transition: opacity 0.75s var(--ez), transform 0.75s var(--ez), filter 0.75s var(--ez); }
    .reveal.in,
    .reveal.is-visible { opacity: 1; transform: translateY(0); filter: blur(0); }
    .reveal:nth-child(2) { transition-delay: 0.08s; }
    .reveal:nth-child(3) { transition-delay: 0.16s; }
    .reveal:nth-child(4) { transition-delay: 0.24s; }
    .reveal:nth-child(5) { transition-delay: 0.32s; }

    /* ── CRÉDITOS FOTOGRÁFICOS ── */
    /* Hero: overlay sobre la imagen, esquina inferior derecha */
    .photo-credit {
      position: absolute;
      bottom: 14px;
      right: 16px;
      z-index: 4;
      font-family: var(--fb);
      font-size: 10px;
      font-weight: 400;
      letter-spacing: 0.08em;
      color: rgba(255,255,255,0.62);
      line-height: 1;
      pointer-events: none;
      /* Pequeña sombra de texto para legibilidad sobre cualquier zona de la foto */
      text-shadow: 0 1px 4px rgba(0,0,0,0.55);
    }
    /* Bio: debajo de la imagen, alineado a la izquierda con la foto */
    .bio-photo-credit {
      font-family: var(--fb);
      font-size: 10px;
      font-weight: 400;
      letter-spacing: 0.07em;
      color: rgba(36,51,47,0.38);
      line-height: 1;
      margin-top: 10px;
      text-align: left;
    }

    /* ── FOTO PLACEHOLDERS ── */
    .photo-ph { position: relative; background: repeating-linear-gradient(-45deg, rgba(255,255,255,0.015) 0px, rgba(255,255,255,0.015) 1px, transparent 1px, transparent 12px), var(--dark2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; overflow: hidden; }
    .photo-ph::before { content: ''; position: absolute; inset: 12px; border: 1px dashed rgba(207,165,110,0.22); border-radius: 2px; pointer-events: none; }
    .photo-ph-icon { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(207,165,110,0.3); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .photo-ph-icon svg { opacity: 0.35; }
    .photo-ph-lbl { font-family: var(--fb); font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(207,165,110,0.45); font-weight: 500; text-align: center; line-height: 1.6; }
    .hero-photo-ph { position: absolute; inset: 0; z-index: 0; display: flex; align-items: center; justify-content: center; }
    .hero-photo-ph-inner { position: absolute; inset: 32px; border: 1px dashed rgba(207,165,110,0.15); border-radius: 2px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 40px; gap: 10px; }
    .hero-photo-ph-lbl { font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(207,165,110,0.3); font-weight: 500; }
    .hero.has-photo .hero-photo-ph { display: none; }
    .hero.has-photo { background-size: cover; background-position: center 20%; }
    .hero.has-photo .hero-overlay { background: linear-gradient(to top, rgba(36,51,47,0.98) 0%, rgba(36,51,47,0.65) 48%, rgba(36,51,47,0.28) 100%); }
    .bio-portrait { width: 100%; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 2px; position: relative; margin-bottom: 40px; }
    .bio-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center top; filter: saturate(0.72) brightness(0.96); transition: filter 0.7s var(--ez), transform 0.7s var(--ez); display: block; }
    .bio-portrait:hover img { filter: saturate(0.88) brightness(1.0); transform: scale(1.02); }
    .bio-portrait::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 35%; background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.55)); pointer-events: none; }
    .bio-portrait::before { content: ''; position: absolute; left: 0; top: 15%; bottom: 15%; width: 2px; background: var(--ocre); opacity: 0.55; z-index: 1; }
    .cta-portrait-ph { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: clamp(180px, 22vw, 300px); height: clamp(280px, 38vw, 480px); overflow: hidden; z-index: 1; clip-path: inset(0 0 0 18%); }

    /* ── MOBILE ── */
    @media (max-width: 860px) {
      nav { padding: 0 24px; height: 64px; }
      nav.sc { height: 58px; }
      .nav-links { display: none; }
      .nav-hamburger { display: flex; }
      .nav-drawer { display: flex; }
      /* Mobile hero: stack vertical limpio, sin imagen de fondo */
      .hero { margin-top: 64px; }
      .hero-text-block { padding: 52px 28px 44px; }
      .hero-title { font-size: clamp(34px, 9vw, 52px); margin-bottom: 0.35em; }
      /* ↑ Tamaño cuerpo: 17px mínimo para legibilidad +40 años */
      .hero-subtitle { font-size: 1.05em; line-height: 1.35; margin-bottom: 1.2em; max-width: none; margin-top: 0.15em; }
      .hero-photo-ph { aspect-ratio: 3 / 2; }
      /* Mobile: animaciones simplificadas */
      .hero-tag {
        animation: hero-tag-in 0.7s 0.1s var(--ez) forwards,
                   hero-tag-glow 3.8s 0.9s ease-in-out infinite;
        opacity: 0;
      }
      .hero-title-line1, .hero-title-line2, .hero-subtitle {
        animation: hero-fade 0.6s 0.1s var(--ez) forwards;
        opacity: 0;
      }
      .scroll-bar { display: none; }
      /* intro-block: ya no se necesita en mobile — el hero tiene CTA */
      .intro-block { display: none; }
      .sect-t--doff { height: 56px; }
      .services-wrap { padding: 80px 0 0; }
      .srv-intro { padding: 0 28px 48px; max-width: none; }
      .srv-intro-footer { flex-direction: column; align-items: flex-start; gap: 16px; }
      .srv-footer-wrap { padding: 32px 28px 52px; }
      .srv-strip { grid-template-columns: 80px 1fr; }
      .srv-big-num { font-size: 56px; }
      .srv-strip-right { padding: 28px 28px 28px 16px; }
      /* Títulos desplegables: 22px para que se lean sin esfuerzo */
      .srv-strip-title { font-size: 22px; line-height: 1.25; }
      .srv-strip-hint { font-size: 15px; }
      .srv-strip-inner { padding: 16px 28px 32px 16px; }
      /* Cuerpo de servicio desplegado: 16px mínimo legible */
      .srv-strip-lead { font-size: 17px; }
      .srv-strip-p { font-size: 16px; line-height: 1.9; }
      .ejes-track { padding: 0 10% 0 0; }
      .eje-card { flex: 0 0 90%; padding: 0; min-height: 300px; }
      /* Descripción de eje: 17px en lugar de 15px */
      .eje-desc { font-size: 17px; line-height: 1.8; }
      .eje-num { flex: 0 0 16%; font-size: clamp(36px, 10vw, 52px); }
      .eje-card-inner { padding: 36px 28px 36px 24px; }
      .ejes-nav-bar { padding: 0 28px; }
      .ejes-dots { padding: 20px 28px 0; }
      /* Corte Servicios → Resultados en mobile: separador mínimo */
      .resultados-wrap { border-top: 1px solid rgba(109,196,154,0.14); }
      .ejes-cierre { margin: 48px 20px 0; padding: 36px 28px; }
      .ejes-cierre-text { font-size: 19px; }
      /* Lista de resultados: ítems en dos niveles */
      .elist li { gap: 16px; padding: 22px 0; }
      .elist li::before { font-size: 14px; margin-top: 3px; }
      .elist-title { font-size: 18px; line-height: 1.35; }
      .elist-body { font-size: 14px; line-height: 1.7; color: rgba(242,239,232,0.65); }
      .casos-wrap { padding: 80px 28px 96px; }
      .casos-grid { grid-template-columns: 1fr; }
      .case-card { min-height: 0; }
      .bio-wrap { padding: 80px 28px; grid-template-columns: 1fr; gap: 36px; }
      .bio-left-col { gap: 28px; }
      .bio-photo-col .bio-portrait { aspect-ratio: 3 / 2; margin-bottom: 0; }
      /* Texto bio: 17px, mismo criterio */
      .bio-p { font-size: 17px; line-height: 1.85; }
      /* Credenciales: valor más grande y legible */
      .bfact-v { font-size: 15px; }
      .bfact-l { font-size: 10px; letter-spacing: 0.2em; }
      /* FAQ mobile */
      .faq-wrap { padding: 72px 20px 80px; }
      .faq-item { padding: 0 12px; }
      .faq-q { font-size: 18px; padding: 22px 0; }
      .faq-lead { font-size: 17px; }
      .faq-text { font-size: 16px; line-height: 1.95; }
      .cta-wrap { padding: 80px 28px; }
      .cta-wrap::after,.cta-ellipse2,.cta-portrait-ph { display: none; }
      .cta-btns { flex-direction: column; align-items: stretch; gap: 10px; max-width: 320px; margin: 0 auto; }
      /* Botones CTA: texto más grande y área táctil generosa */
      .cta-wrap .btn-green { text-align: center; padding: 20px 24px; font-size: 13px; }
      .cta-wrap .btn-ghost-light { text-align: center; padding: 18px 24px; opacity: 0.55; font-size: 12px; }
      footer { padding: 40px 28px; flex-direction: column; align-items: center; text-align: center; gap: 20px; }

      /* ── MOBILE UX: legibilidad para audiencia 40+ ──────────────── */

      /* Nav drawer: tap targets amplios, feedback inmediato */
      .nav-drawer a { padding: 18px 12px; }
      .nav-drawer .nav-cta { font-size: 13px; padding: 16px 22px; }

      /* Etiquetas de sección: 12px, más respirable */
      .sec-lbl { font-size: 12px; letter-spacing: 0.22em; }

      /* Hero tag: de 10px a 13px */
      .hero-tag { font-size: 13px; letter-spacing: 0.28em; }

      /* Hero body: más contraste (0.55 → 0.76 sobre fondo oscuro) */
      .hero-subtitle { color: rgba(242,239,232,0.76); }

      /* Hero phrase: mínimo 18px */
      .hero-phrase { font-size: 18px; }

      /* Botones: base 13px en lugar de 11.5px */
      .btn { font-size: 13px; }

      /* Etiqueta de eje (EJE 1, EJE 2…): de 9px a 13px */
      .eje-tag { font-size: 13px; letter-spacing: 0.18em; }

      /* Navegación del carousel */
      .ejes-nav-btn { font-size: 13px; }
      .ejes-counter { font-size: 15px; }

      /* Dots del carousel: más altura para tocar con mayor facilidad */
      .ejes-dot { height: 8px; width: 28px; border-radius: 3px; }
      .ejes-dot.active { width: 56px; }

      /* Cards de casos — todos los textos secundarios suben */
      .case-front-tag { font-size: 11px; letter-spacing: 0.18em; }
      .case-back-tag  { font-size: 11px; letter-spacing: 0.18em; }
      .case-profile   { font-size: 13px; }
      .case-hint      { font-size: 12px; padding: 7px 14px; }
      .case-problem   { font-size: 20px; }
      .case-solution  { font-size: 16px; line-height: 1.82; color: rgba(242,239,232,0.86); }
      .case-result    { font-size: 13px; }

      /* Bio / credenciales */
      .bfact-l { font-size: 12px; letter-spacing: 0.18em; }
      .bfact-v { font-size: 16px; }

      /* Cuerpo de servicio expandido: contraste unificado */

      /* CTA final — contraste y legibilidad */
      .cta-tag { font-size: 12px; letter-spacing: 0.22em; }
      .cta-desc { color: rgba(242,239,232,0.84); }
      .cta-closing { color: rgba(242,239,232,0.66); }
      .cta-wrap .btn-ghost-light { opacity: 0.82; font-size: 13px; padding: 18px 24px; }

      /* Footer */
      .foot-links a { font-size: 13px; color: rgba(255,255,255,0.54); }
      .foot-copy { font-size: 13px; }
    }
    @media (hover: none) {
      .case-card:hover .case-card-inner { transform: none; }
      .case-card.flipped .case-card-inner { transform: rotateY(180deg); }
    }

    /* ══════════════════════════════════════════════════
       HERO — CORRECCIÓN MÓVIL (max-width: 768px)
       Solo afecta la sección Hero en celular.
       El layout desktop permanece intacto fuera de
       esta media query.
    ══════════════════════════════════════════════════ */
    @media (max-width: 768px) {

      /* 1. Estructura: flex columna, texto arriba / foto abajo */
      .hero {
        display: flex;
        flex-direction: column;
        height: auto;           /* crece según contenido, sin superposición */
      }

      /* 2. Bloque de texto: flujo normal, sin posicionamiento absoluto */
      .hero-text-block {
        position: relative;     /* anula cualquier position: absolute heredado */
        top: auto;
        left: auto;
        order: 1;               /* texto primero */
        width: 100%;
        text-align: center;     /* centrado para pantallas angostas */
        padding: 52px 20px 0;   /* padding lateral 20px para no pegar en bordes */
        z-index: 2;
      }

      /* Centrar elementos de texto internos */
      .hero-phrase {
        margin-left: auto;
        margin-right: auto;
        text-align: left;       /* la frase con borde lateral queda mejor en left */
      }

      .hero-actions {
        justify-content: center;
      }

      /* 3. Bloque de foto: debajo del texto, sin position absolute */
      .hero-photo-ph {
        position: relative;     /* sale del stacking context absoluto */
        inset: auto;            /* resetea el inset: 0 del CSS base */
        order: 2;               /* foto después del texto */
        width: 100%;
        max-width: 100%;
        height: auto;
        aspect-ratio: 4 / 3;
        margin-top: 30px;       /* 30px de separación entre texto y foto */
        padding: 0 20px;        /* padding lateral para que no pegue en bordes */
        box-sizing: border-box;
        flex-shrink: 0;
      }

      /* Inner de la foto: relativo al contenedor, no al viewport */
      .hero-photo-ph-inner {
        position: relative;
        inset: auto;
        width: 100%;
        height: 100%;
      }
    }

    /* ═══════════════════════════════════════════════════
       DESKTOP REFINEMENTS  (min-width: 861px)
       Tipografía, layout y balance visual para pantallas
       grandes. Mobile intacto arriba del breakpoint.
    ═══════════════════════════════════════════════════ */
    @media (min-width: 861px) {

      /* ── Variables de escala desktop ── */
      :root {
        --dt-body:    18px;
        --dt-lh:      1.95;
        --dt-body-sm: 17px;
        --dt-lh-sm:   1.85;
      }

      /* ══════════════════════════════════════
         HERO DESKTOP — full-bleed background
         Foto como fondo, texto izquierdo,
         overlay gradiente texto→sujeto
         ══════════════════════════════════════ */

      /* Contenedor: full viewport, foto como fondo */
      .hero {
        margin-top: 0;
        padding-top: 0;
        padding-bottom: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        min-height: 100vh;
        overflow: hidden;
        position: relative;
        background: #080F0B;
      }

      /* hero-inner: capa de contenido sobre la foto */
      .hero-inner {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        width: 100%;
        max-width: 1200px;
        padding: calc(76px + 52px) 80px 80px;
        position: relative;
        z-index: 3;
      }

      /* Texto: izquierdo, max ~50% del viewport */
      .hero-text-block {
        position: relative;
        z-index: 3;
        flex: unset;
        width: 100%;
        max-width: 580px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
        padding: 0;
        order: 1;
      }
      .hero-radial { display: none; }
      .hero-breath { display: none; }

      /* Foto como fondo absoluto full-bleed */
      .hero-photo-ph {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        aspect-ratio: unset !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        order: unset;
        z-index: 0 !important;
        overflow: hidden;
        opacity: 1 !important;
        animation: none !important;
        flex: unset;
      }
      .hero-photo-ph::before { display: none; }

      /* Overlay: oscuro en el lado del texto, se abre hacia el sujeto
         La foto ya es B&W — no se necesita saturate() */
      .hero-photo-ph::after {
        content: '';
        position: absolute; inset: 0; z-index: 1;
        pointer-events: none;
        background:
          linear-gradient(to right,
            rgba(8,15,11,0.96) 0%,
            rgba(8,15,11,0.90) 22%,
            rgba(8,15,11,0.70) 45%,
            rgba(8,15,11,0.38) 68%,
            rgba(8,15,11,0.16) 85%,
            rgba(8,15,11,0.06) 100%
          ),
          linear-gradient(to top,
            rgba(8,15,11,0.72) 0%,
            rgba(8,15,11,0.28) 22%,
            transparent 44%
          ),
          linear-gradient(to bottom,
            rgba(8,15,11,0.55) 0%,
            transparent 18%
          );
      }

      /* Foto: ancla al sujeto (cara en sector derecho-central) */
      .hero-photo-img {
        position: absolute; inset: 0;
        width: 100%; height: 100%;
        object-fit: cover;
        object-position: 64% 22%;
        filter: brightness(0.82);
        display: block;
        transition: none;
      }
      .hero-photo-ph:hover .hero-photo-img {
        filter: brightness(0.82);
        transform: none;
      }

      /* Zona 3: oculta — el CTA ya está en el bloque de texto */
      .hero-cta-block { display: none !important; }
      /* Indicador de scroll: visible en desktop */
      .hero-scroll { display: block; }

      /* ── Tipografía ── */
      .hero-tag {
        font-size: 11px;
        letter-spacing: 0.36em;
        margin-bottom: 22px;
        text-align: left;
      }
      .hero-title {
        font-size: clamp(48px, 5.4vw, 80px);
        line-height: 1.10;
        margin-bottom: 0.18em;
        max-width: none;
        text-align: left;
      }
      .hero-subtitle {
        font-size: 17px;
        line-height: 1.55;
        max-width: 44ch;
        white-space: normal;
        margin-top: 0.15em;
        margin-bottom: 0;
        text-align: left;
        color: rgba(242,239,232,0.80);
      }
      /* hero-phrase: visible en desktop — ancla emocional antes del CTA */
      .hero-phrase {
        display: block;
        font-size: clamp(15px, 1.45vw, 18px);
        text-align: left;
        margin-top: 22px;
        margin-bottom: 36px;
        max-width: 38ch;
      }

      /* Ocultar intro-block en desktop */
      .intro-block   { display: none; }

      /* ── Indicador de scroll: línea ocre animada, centro inferior ── */
      .hero-scroll {
        position: absolute;
        bottom: 28px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 4;
        width: 1px;
        height: 48px;
        overflow: hidden;
        opacity: 0;
        animation: hero-fade 0.6s 1.5s var(--ez) forwards;
        pointer-events: none;
      }
      .hero-scroll::before {
        content: '';
        position: absolute;
        top: -100%;
        left: 0;
        width: 1px;
        height: 100%;
        background: linear-gradient(to bottom,
          transparent 0%,
          rgba(207,165,110,0.65) 50%,
          transparent 100%
        );
        animation: scroll-drop 2.4s 1.8s ease-in-out infinite;
      }
      @keyframes scroll-drop {
        0%   { top: -100%; opacity: 0; }
        15%  { opacity: 1; }
        85%  { opacity: 1; }
        100% { top: 100%;  opacity: 0; }
      }

      /* ── INTRO BLOCK — centrado en desktop, presencia editorial ── */
      .intro-block {
        text-align: center;
        padding: 108px 80px;
      }
      .intro-block-inner {
        max-width: 900px;
        margin: 0 auto;           /* centra el bloque dentro del container */
      }
      .intro-block-line {
        margin: 0 auto 32px;      /* centrar la línea decorativa */
      }
      .intro-block-text {
        font-size: clamp(24px, 2.8vw, 40px);
        line-height: 1.5;
      }

      /* ── SECTION LABELS & HEADINGS (global desktop) ── */
      .sec-lbl {
        font-size: 11px;
        letter-spacing: 0.3em;
        margin-bottom: 18px;
      }
      .sec-h2 {
        font-size: clamp(34px, 4vw, 56px);
        line-height: 1.1;
        margin-bottom: 28px;
      }
      .sec-p {
        font-size: var(--dt-body);
        line-height: var(--dt-lh);
      }

      /* ── SERVICIOS ── */
      .services-wrap {
        padding-top: 96px;
      }
      .srv-intro {
        padding: 0 64px 56px;
        max-width: 100%;
        margin: 0;
        text-align: left;
      }
      .srv-intro .sec-lbl,
      .srv-intro .sec-h2,
      .srv-intro .sec-p {
        text-align: left;
        margin-left: 0;
        margin-right: 0;
      }
      .srv-intro .sec-h2 {
        font-size: clamp(30px, 3.2vw, 48px);
      }
      .srv-intro .sec-p {
        font-size: var(--dt-body);
        line-height: var(--dt-lh);
        max-width: 540px;
      }
      .srv-intro-footer {
        justify-content: flex-start;
      }
      /* Strips: padding right reducido para que no se corten en la columna */
      .srv-strip-right {
        padding-right: 40px;
      }
      .srv-strip-inner {
        padding-right: 40px;
      }
      /* Títulos de servicio más grandes y legibles */
      .srv-strip-title {
        font-size: 26px;
        line-height: 1.2;
      }
      .srv-strip-hint {
        font-size: 14px;
      }
      /* Cuerpo desplegado del servicio */
      .srv-strip-lead {
        font-size: 19px;
        line-height: 1.55;
        margin-bottom: 20px;
      }
      .srv-strip-p {
        font-size: var(--dt-body-sm);
        line-height: var(--dt-lh-sm);
        max-width: 720px;
      }

      /* ── MÉTODO / EJES: header más ancho ── */
      .bridge-block {
        padding: 96px 80px 108px;
      }
      .ejes-wrap {
        padding: 0 0 96px;
      }
      .ejes-header {
        padding: 0 100px 60px;
      }
      .ejes-header .sec-h2 {
        font-size: clamp(36px, 4.2vw, 58px);
        line-height: 1.08;
      }

      /* Cards de eje: franja + contenido */
      .eje-card {
        padding: 0;
        min-height: 460px;
        align-items: stretch;
      }
      .eje-num {
        flex: 0 0 20%;
        font-size: clamp(72px, 9vw, 120px);
      }
      .eje-card-inner {
        padding: 72px 80px 72px 60px;
        max-width: none;
      }
      .eje-tag {
        font-size: 10px;
        letter-spacing: 0.3em;
        margin-bottom: 28px;
      }
      .eje-title {
        font-size: clamp(34px, 4.8vw, 58px);
        line-height: 1.12;
      }
      .eje-divider {
        margin: 32px 0;
        width: 40px;
      }
      .eje-desc {
        font-size: 19px;
        line-height: 2.0;
        max-width: 720px;
        color: rgba(242,239,232,0.78);
      }

      /* Nav de ejes */
      .ejes-nav-bar {
        padding: 0 100px;
      }
      .ejes-nav-btn {
        font-size: 12px;
        letter-spacing: 0.14em;
      }
      .ejes-cierre {
        margin: 80px 100px 0;
      }
      .ejes-cierre-text {
        font-size: clamp(18px, 1.8vw, 24px);
        line-height: 1.7;
      }

      /* ── RESULTADOS ── */
      .resultados-wrap {
        padding: 96px 80px 88px;
        max-width: none;
      }
      .elist li {
        padding: 32px 0;
      }
      .elist-title {
        font-size: clamp(18px, 1.75vw, 21px);
        line-height: 1.3;
      }
      .elist-body {
        font-size: 15px;
        line-height: 1.78;
      }

      /* ── SOBRE MÍ — 2 columnas desktop ── */
      .bio-wrap {
        padding: 120px 80px 112px;
        grid-template-columns: 300px 1fr;  /* izq: foto+credenciales · der: texto */
        gap: 72px;
        align-items: start;
      }
      /* Columna izquierda: foto + credenciales como bloque vertical */
      .bio-left-col {
        display: flex;
        flex-direction: column;
        gap: 36px;
        position: sticky;
        top: 96px;          /* se ancla mientras se scrollea el texto */
      }
      .bio-photo-col .bio-portrait {
        aspect-ratio: 3 / 4;
        margin-bottom: 0;
      }
      /* Credenciales: tipografía compacta, bien proporcional a la columna */
      .bio-aside { gap: 0; }
      .bfact { padding: 16px 0; }
      .bfact-v { font-size: 13px; line-height: 1.45; }
      /* Columna derecha: texto con más protagonismo */
      .bio-wrap .sec-h2 {
        font-size: clamp(32px, 3.6vw, 50px);
        margin-bottom: 32px;
        line-height: 1.1;
      }
      .bio-p {
        font-size: 18px;
        line-height: 1.95;
        margin-bottom: 22px;
        color: #3A4D48;
        max-width: 68ch;   /* ancho de línea óptimo para lectura */
      }

      /* ── CTA FINAL — desktop overrides ── */
      /* (los valores ya están en el bloque base, no hace falta sobreescribir) */
    }

    /* Inline style removal: last credential row */
    .bio-aside .bfact:last-child { border-bottom: none; }

/* ══════════════════════════════════════════════════
   SECCIÓN RECURSOS — Biblioteca de materiales
══════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────
   RECURSOS — ÍNDICE
   Header oscuro · lista editorial asimétrica · cierre
───────────────────────────────────────────────────────── */

/* ── Header del índice ── */

.rec-header {
  background: var(--dark);
  position: relative;
  overflow: hidden;
}
.rec-header::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--ocre) 35%, transparent 100%);
  opacity: 0.25;
}
.rec-header::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(207,165,110,0.18), transparent);
}
.rec-header-glow {
  position: absolute;
  top: -60px; left: -80px;
  width: 480px; height: 320px;
  background: radial-gradient(ellipse at 30% 40%, rgba(207,165,110,0.07) 0%, transparent 65%);
  pointer-events: none;
}
.rec-header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 112px 64px 48px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0 48px;
}
.rec-header-text { flex: 1; }
.rec-sec-lbl {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.26em;
  color: rgba(207,165,110,0.7);
  margin-bottom: 16px;
  display: block;
}
.rec-header h1 {
  font-family: var(--fd);
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 400;
  color: #F2EFE8;
  line-height: 1.12;
  margin-bottom: 14px;
  letter-spacing: 0.03em;
}
.rec-header-desc {
  font-size: 15px;
  font-weight: 300;
  color: rgba(242,239,232,0.65);
  line-height: 1.72;
  max-width: 440px;
}

/* ── Lista de recursos — layout editorial ── */

.rec-list-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 64px;
}
.rec-list { list-style: none; }

.rec-item {
  display: grid;
  grid-template-columns: 2fr 1.15fr;
  gap: 0 56px;
  padding: 52px 0;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: inherit;
  position: relative;
  transition:
    background  0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform   0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    box-shadow  0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    padding-left 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  align-items: start;
  border-radius: 0;
}
.rec-item:hover {
  background: linear-gradient(135deg, rgba(58,158,114,0.025) 0%, rgba(207,165,110,0.03) 100%);
  transform: translateY(-3px);
  box-shadow: 0 6px 28px rgba(15,30,25,0.06), 0 1px 0 rgba(207,165,110,0.06) inset;
  padding-left: 12px;
  border-radius: 3px;
}
.rec-item::before {
  content: '';
  position: absolute;
  left: -2px; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(to bottom, var(--green), rgba(207,165,110,0.5));
  opacity: 0;
  transition: opacity 0.5s ease;
}
.rec-item:hover::before { opacity: 1; }

.rec-item-main { display: flex; flex-direction: column; gap: 0; }
.rec-item-meta { display: flex; align-items: baseline; gap: 16px; margin-bottom: 16px; }

.rec-item-num {
  font-family: var(--fd);
  font-size: 28px;
  font-weight: 400;
  color: rgba(207,165,110,0.28);
  line-height: 1;
  letter-spacing: 0.06em;
  flex-shrink: 0;
  align-self: center;
  transition: color 0.5s ease;
}
.rec-item:hover .rec-item-num { color: rgba(207,165,110,0.62); }

.rec-category-tag {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--green);
  transition: color 0.5s ease;
}
.rec-item:hover .rec-category-tag { color: rgba(207,165,110,0.75); }

.rec-item-title {
  font-family: var(--fd);
  font-size: clamp(20px, 2.2vw, 27px);
  font-weight: 400;
  color: var(--ink);
  line-height: 1.38;
  transition: color 0.5s ease;
}
.rec-item:hover .rec-item-title { color: var(--green); }

.rec-item-aside {
  border-left: 1px solid var(--border);
  padding-left: 40px;
  padding-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-self: start;
}
.rec-aside-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--light);
  margin-bottom: -8px;
}
.rec-item-desc {
  font-size: 16px;
  font-weight: 300;
  color: var(--mid);
  line-height: 1.82;
}
.rec-item-arrow {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--green);
  display: inline-block;
  transform: translateX(0);
  transition: transform 0.2s, color 0.2s;
}
.rec-item:hover .rec-item-arrow { transform: translateX(8px); color: var(--ocre); }

/* ── Cierre editorial del índice ── */

.rec-cierre {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 64px;
}
.rec-cierre-inner {
  padding: 80px 0 100px;
  border-top: 1px solid var(--border);
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 0 80px;
  align-items: start;
}
.rec-cierre-label {
  display: block;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: rgba(207,165,110,0.55);
  margin-bottom: 20px;
}
.rec-cierre-titulo {
  font-family: var(--fd);
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 400;
  color: var(--ink);
  letter-spacing: 0.02em;
  line-height: 1.3;
}
.rec-cierre-rule {
  width: 32px; height: 1px;
  background: var(--ocre);
  opacity: 0.35;
  margin-top: 28px;
}
.rec-cierre-right {
  border-left: 1px solid var(--border);
  padding-left: 56px;
  padding-top: 2px;
}
.rec-cierre-body {
  font-size: 15.5px;
  font-weight: 300;
  color: var(--mid);
  line-height: 1.85;
  margin-bottom: 20px;
}
.rec-cierre-body:last-of-type { margin-bottom: 32px; }
.rec-cierre-links { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rec-cierre-link {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--light);
  text-decoration: none;
  transition: color 0.3s ease;
}
.rec-cierre-link:hover { color: var(--green); }
.rec-cierre-sep { font-size: 10px; color: var(--border); user-select: none; }

/* ── Responsive: índice de recursos ── */

@media (max-width: 900px) {
  .rec-header-inner {
    padding: 96px 28px 40px;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }
  .rec-header h1 { font-size: clamp(26px, 6vw, 36px); }
  .rec-header-desc { font-size: 15px; max-width: 100%; }
  .rec-list-section { padding: 0 28px; }
  .rec-item { grid-template-columns: 1fr; gap: 0; padding: 40px 0; }
  .rec-item:hover { transform: none; padding-left: 0; box-shadow: none; }
  .rec-item-aside {
    border-left: none; padding-left: 0;
    margin-top: 20px; padding-top: 20px;
    border-top: 1px solid var(--border); gap: 14px;
  }
  .rec-aside-label { display: none; }
  .rec-item-desc { font-size: 16px; }
  .rec-cierre { padding-left: 28px; padding-right: 28px; }
  .rec-cierre-inner { padding: 56px 0 72px; grid-template-columns: 1fr; gap: 0; }
  .rec-cierre-rule { margin-bottom: 36px; }
  .rec-cierre-right {
    border-left: none; padding-left: 0;
    border-top: 1px solid var(--border); padding-top: 36px;
  }
}
@media (max-width: 600px) {
  .rec-header-inner { padding: 88px 20px 36px; }
  .rec-header h1 { font-size: clamp(24px, 8vw, 32px); }
  .rec-header-desc { font-size: 14.5px; }
  .rec-list-section { padding: 0 20px; }
  .rec-item { padding: 36px 0; }
  .rec-item-title { font-size: clamp(18px, 4.5vw, 22px); }
  .rec-cierre { padding-left: 20px; padding-right: 20px; }
  .rec-cierre-inner { padding: 48px 0 64px; }
}
@media (min-width: 1400px) {
  .rec-header-inner, .rec-list-section, .rec-cierre { max-width: 1280px; }
}

/* ── Breadcrumb ── */

.breadcrumb-wrap { margin-bottom: 28px; }
.breadcrumb-list {
  list-style: none;
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}
.breadcrumb-list li { display: flex; align-items: center; gap: 6px; }
.breadcrumb-list li + li::before {
  content: '/';
  color: var(--light);
  font-size: 11px;
}
.breadcrumb-list a {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--light);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s var(--ez);
}
.breadcrumb-list a:hover { color: var(--green); }
.bc-current {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mid);
  font-weight: 500;
}

/* ── Recurso individual: cabecera ── */

.recurso-breadcrumb {
  display: block;
  font-family: var(--fb);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--light);
  text-decoration: none;
  margin-bottom: 14px;
  transition: color 0.2s ease;
}
.recurso-breadcrumb:hover { color: var(--green); }

.recurso-page-header {
  background: var(--off);
  padding: 96px 80px 64px;
  border-bottom: 1px solid var(--border);
}
.recurso-page-header .sec-lbl { margin-bottom: 20px; }
.recurso-page-header h1 {
  font-family: var(--fd);
  font-size: clamp(28px, 4.5vw, 54px);
  font-weight: 400;
  color: var(--ink);
  line-height: 1.1;
  margin-bottom: 24px;
  margin-top: 14px;
}
.recurso-intro {
  font-size: 18px;
  line-height: 1.8;
  color: var(--mid);
  max-width: 620px;
  font-weight: 300;
}

/* ── Recurso individual: cuerpo de lectura ── */

.recurso-body {
  background: var(--white);
  padding: 72px 80px 96px;
}
.recurso-content { max-width: 720px; }

.recurso-section { margin-top: 72px; }
.recurso-section:first-child { margin-top: 0; }

.recurso-section h2 {
  font-family: var(--fd);
  font-size: clamp(22px, 2.5vw, 30px);
  font-weight: 400;
  color: var(--ink);
  line-height: 1.2;
  margin-bottom: 28px;
}
.recurso-section h3 {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: 14px;
  margin-top: 36px;
  font-family: var(--fb);
}
.recurso-section p {
  font-size: 17px;
  line-height: 1.85;
  color: var(--mid);
  font-weight: 300;
  margin-bottom: 22px;
  max-width: 680px;
}
.recurso-section p strong { color: var(--ink); font-weight: 500; }
.recurso-section em { font-style: italic; color: var(--ink); }

/* Instrumento: bloque nombre + descripción */
.instrumento-bloque { margin: 36px 0; }
.instrumento-nombre {
  font-family: var(--fd);
  font-size: 17px;
  font-weight: 400;
  color: var(--ink);
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

/* Bloque de ejercicios */
.recurso-ejercicios {
  background: var(--off);
  border-left: 3px solid var(--green);
  padding: 28px 32px;
  margin: 40px 0;
  border-radius: 0 4px 4px 0;
}
.recurso-ejercicios .bloque-label {
  font-size: 9px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--green);
  font-weight: 600;
  margin-bottom: 18px;
  display: block;
}
.recurso-ejercicios ol {
  padding-left: 0;
  list-style: none;
  counter-reset: ejercicio;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.recurso-ejercicios li {
  font-size: 16px;
  line-height: 1.75;
  color: var(--mid);
  font-weight: 300;
  padding-left: 28px;
  position: relative;
  counter-increment: ejercicio;
}
.recurso-ejercicios li::before {
  content: counter(ejercicio) '.';
  position: absolute;
  left: 0;
  color: var(--green);
  font-weight: 600;
  font-size: 13px;
  top: 2px;
}

/* Bloque de errores frecuentes */
.recurso-errores {
  background: #FAF8F5;
  border: 1px solid var(--border);
  padding: 28px 32px;
  margin: 40px 0;
  border-radius: 4px;
}
.recurso-errores .bloque-label {
  font-size: 9px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ocre);
  font-weight: 600;
  margin-bottom: 18px;
  display: block;
}
.recurso-errores ul {
  padding-left: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.recurso-errores li {
  font-size: 16px;
  line-height: 1.75;
  color: var(--mid);
  font-weight: 300;
  padding-left: 22px;
  position: relative;
}
.recurso-errores li::before {
  content: '×';
  position: absolute;
  left: 0;
  color: var(--ocre);
  font-weight: 500;
}

/* FAQ inline (recursos) — usa <details>/<summary> */
.rec-faq { margin-top: 40px; border-top: 1px solid var(--border); }
.rec-faq-item { border-bottom: 1px solid var(--border); }
.rec-faq-item summary {
  padding: 18px 0;
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-family: var(--fb);
  transition: color 0.2s var(--ez);
  user-select: none;
}
.rec-faq-item summary::-webkit-details-marker { display: none; }
.rec-faq-item summary::after {
  content: '+';
  color: var(--green);
  font-size: 18px;
  font-weight: 300;
  flex-shrink: 0;
}
.rec-faq-item[open] summary::after { content: '—'; font-size: 14px; }
.rec-faq-item summary:hover { color: var(--green); }
.rec-faq-body { padding: 0 0 20px; }
.rec-faq-body p { font-size: 16px; line-height: 1.85; color: var(--mid); font-weight: 300; margin-bottom: 12px; }

/* ── Recursos relacionados ── */

.recurso-relacionados {
  background: var(--off);
  padding: 56px 80px 72px;
  border-top: 1px solid var(--border);
}
.recurso-relacionados h2 {
  font-family: var(--fd);
  font-size: 19px;
  font-weight: 400;
  color: var(--ink);
  margin-bottom: 32px;
  letter-spacing: 0.02em;
}
/* ── Responsive: recursos ── */

@media (max-width: 1024px) {
  .recurso-page-header,
  .recurso-body,
  .recurso-relacionados {
    padding-left: 40px;
    padding-right: 40px;
  }
}

@media (max-width: 768px) {
  .recurso-page-header { padding: 96px 20px 48px; }
  .recurso-body { padding: 48px 20px 64px; }
  .recurso-relacionados { padding: 48px 20px 56px; }
  .recurso-ejercicios,
  .recurso-errores { padding: 22px 20px; }
  .recurso-section p { font-size: 16px; }
  .recurso-intro { font-size: 16px; }
}

/* ════════════════════════════════════════
   RECURSOS — Dirección editorial completa
   Eje único · columna de lectura · flujo natural · jerarquía tipográfica
   ════════════════════════════════════════ */

/* ── Páginas recurso: fondo claro, nav siempre sólido y compacto ── */
body.page-recurso {
  background: var(--off);
  color: var(--ink);
}
body.page-recurso #nav {
  height: 60px;
  background: rgba(15,22,19,0.96);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  box-shadow: 0 1px 0 rgba(109,196,154,0.07), 0 2px 0 rgba(255,255,255,0.03), 0 6px 32px rgba(0,0,0,0.32);
}

/* ── Eje editorial: columna de 720px ── */
.recurso-header-inner {
  max-width: 720px;
  margin-left: 0;
  margin-right: auto;
}
.recurso-content {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

/* ── Cabecera del artículo: sin corte abrupto, respiración generosa ── */
.recurso-page-header {
  border-bottom: none;
  padding-bottom: 56px;
}
/* Acento tipográfico en ocre, alineado al eje editorial */
.recurso-header-inner::after {
  content: '';
  display: block;
  width: 40px;
  height: 2px;
  background: var(--ocre);
  opacity: 0.6;
  margin-top: 36px;
}
/* Suprimir el ::after anterior (movido al inner wrapper) */
.recurso-page-header::after { display: none; }

/* Limpiar max-widths específicos heredados */
.recurso-page-header h1 { max-width: none; }
.recurso-intro {
  max-width: none;
  font-size: 19px;
}

/* Cuerpo: más espacio de entrada */
.recurso-body { padding-top: 72px; }

/* ── Columna única: eliminar fragmentación en 2 columnas ── */
@media (min-width: 1025px) {
  .recurso-col-2 {
    display: block;
  }
  .recurso-col-2 .recurso-section {
    margin-top: 72px;
  }
  .recurso-col-2 .recurso-section p {
    font-size: 17px;
    max-width: 680px;
  }
  .recurso-col-2 .recurso-section h2 {
    font-size: clamp(22px, 2.5vw, 30px);
    margin-bottom: 28px;
  }
}

/* ── Cierre editorial de artículo (simplificado, una columna) ── */
.recurso-cierre-art {
  background: var(--off);
  border-top: none;
  padding: 72px 80px 80px;
}
.recurso-cierre-art-inner {
  max-width: 720px;
  margin: 0 auto;
}
.recurso-cierre-art-label {
  display: block;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.32em;
  color: rgba(207,165,110,0.65);
  margin-bottom: 18px;
  font-family: var(--fb);
}
.recurso-cierre-art-body {
  font-size: 15.5px;
  font-weight: 300;
  color: var(--mid);
  line-height: 1.85;
  margin-bottom: 24px;
}
.recurso-cierre-art-links {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.recurso-cierre-art-link {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--light);
  text-decoration: none;
  transition: color 0.3s ease;
}
.recurso-cierre-art-link:hover { color: var(--green); }
.recurso-cierre-art-sep {
  font-size: 10px;
  color: var(--border);
  user-select: none;
}
@media (max-width: 768px) {
  .recurso-cierre-art { padding: 48px 20px 56px; }
}
@media (min-width: 769px) and (max-width: 1024px) {
  .recurso-cierre-art { padding: 56px 40px 64px; }
}

/* ── CTA: invitación editorial, no banda publicitaria ── */
.recurso-cta-strip {
  background: var(--off);
  border-top: 1px solid var(--border);
  padding: 88px 80px 96px;
  display: block;
  text-align: center;
  position: relative;
  overflow: hidden;
}
/* Ornamento superior: línea en ocre */
.recurso-cta-strip::before {
  content: '';
  position: absolute;
  top: 44px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 1px;
  background: var(--ocre);
  opacity: 0.55;
}
.recurso-cta-strip-text {
  max-width: 520px;
  margin: 0 auto 40px;
}
.recurso-cta-strip-label {
  display: block;
  font-size: 9px;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--ocre);
  font-weight: 600;
  margin-bottom: 20px;
  font-family: var(--fb);
}
.recurso-cta-strip-title {
  font-family: var(--fd);
  font-style: italic;
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 400;
  color: var(--ink);
  line-height: 1.5;
  max-width: none;
}
.btn-recurso-cta {
  display: inline-block;
  padding: 14px 40px;
  background: transparent;
  color: var(--ink);
  font-family: var(--fb);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 100px;
  border: 1.5px solid rgba(24,32,30,0.28);
  white-space: nowrap;
  position: relative;
  transition: background 0.3s var(--ez), color 0.3s var(--ez), border-color 0.3s var(--ez), transform 0.22s var(--ez);
  box-shadow: none;
}
.btn-recurso-cta:hover {
  background: var(--ink);
  color: var(--off);
  border-color: var(--ink);
  transform: translateY(-1px);
  box-shadow: none;
}

/* ── Recursos relacionados: lista editorial, mismo eje que el artículo ── */
.recurso-relacionados {
  background: var(--off);
  padding: 72px 80px 96px;
  border-top: 1px solid var(--border);
}
.recurso-relacionados-inner {
  max-width: 720px;
  margin: 0 auto;
}
.recurso-relacionados-inner > h2 {
  font-size: 9px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-family: var(--fb);
  font-weight: 600;
  color: var(--green);
  margin-bottom: 36px;
}
.recurso-rel-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.recurso-rel-card {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  padding: 22px 44px 22px 0;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
  position: relative;
  transition: opacity 0.2s var(--ez);
  box-shadow: none;
}
.recurso-rel-card:first-child { border-top: 1px solid var(--border); }
.recurso-rel-card:hover {
  box-shadow: none;
  transform: none;
  border-color: var(--border);
  background: transparent;
}
/* Flecha editorial al hover */
.recurso-rel-card::after {
  content: '→';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  color: var(--green);
  opacity: 0.55;
  transition: opacity 0.22s var(--ez), transform 0.22s var(--ez);
}
.recurso-rel-card:hover::after {
  opacity: 1;
  transform: translateY(-50%) translateX(4px);
}
.recurso-rel-card:hover .rel-title { color: var(--green); }
.recurso-rel-card .rel-category {
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green);
  font-weight: 600;
}
.recurso-rel-card .rel-title {
  font-family: var(--fd);
  font-size: 16px;
  color: var(--mid);
  font-weight: 400;
  line-height: 1.35;
  transition: color 0.22s var(--ez);
}

/* ── Responsive: CTA y recursos relacionados ── */
@media (max-width: 768px) {
  .recurso-cta-strip {
    padding: 64px 20px 72px;
  }
  .recurso-cta-strip::before { display: none; }
  .btn-recurso-cta {
    display: inline-block;
    width: auto;
    padding: 14px 32px;
  }
  .recurso-relacionados { padding: 56px 20px 72px; }
}
@media (min-width: 769px) and (max-width: 1024px) {
  .recurso-cta-strip { padding: 72px 40px 80px; }
  .recurso-relacionados { padding-left: 40px; padding-right: 40px; }
}

/* ── Layout índice de recursos: dos columnas en desktop ── */
@media (min-width: 1025px) {
  .rec-layout {
    display: grid;
    grid-template-columns: 1fr 256px;
    align-items: start;
    background: var(--off);
  }
  .rec-sidebar {
    position: sticky;
    top: 76px;
    border-left: 1px solid var(--border);
    padding: 48px 32px 64px;
    background: var(--off);
    max-height: calc(100vh - 84px);
    overflow-y: auto;
  }
}
@media (max-width: 1024px) {
  .rec-sidebar { display: none; }
}

/* ── Sidebar del índice: tono sutil, sin peso visual excesivo ── */
.rec-sidebar .sec-lbl {
  color: var(--light);
  margin-bottom: 16px;
}
.sidebar-cta-txt {
  font-size: 15px;
  line-height: 1.8;
  color: var(--mid);
  font-weight: 300;
  margin-bottom: 28px;
}
.btn-sidebar-cta {
  display: block;
  text-align: center;
  background: transparent;
  color: var(--ink);
  border: 1.5px solid rgba(24,32,30,0.24);
  font-family: var(--fb);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 12px 20px;
  border-radius: 100px;
  transition: background 0.3s var(--ez), color 0.3s var(--ez), border-color 0.3s var(--ez), transform 0.22s var(--ez);
}
.btn-sidebar-cta:hover {
  background: var(--ink);
  color: var(--off);
  border-color: var(--ink);
  transform: translateY(-1px);
}