/* ===========================================================
     DESIGN TOKENS
     Regla tipográfica:
       - Plus Jakarta Sans → TODO (nav, body, títulos, UI, labels)
       - Instrument Serif italic → SOLO acentos dentro de titulares
     =========================================================== */
  :root {
    --cream: #f1e8d8;
    --cream-2: #e7dcc8;
    --ink: #141210;
    --ink-soft: #6b6155;
    --card: #faf4e6;

    --green: #2f5d3a;
    --orange: #e8502e;
    --lilac: #b8a5e6;
    --red: #a83222;
    --rose: #f0d3d8;
    --yellow: #f0c63a;
    --blue: #8fb0d8;

    --sans: 'Inter Tight', system-ui, -apple-system, sans-serif;
    --serif: 'Inter Tight', system-ui, -apple-system, sans-serif;

    --radius: 24px;
    --pill: 100px;

    --ease: cubic-bezier(.2, .8, .2, 1);
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  body {
    background: var(--cream);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    cursor: none;
    font-weight: 400;
    letter-spacing: -.005em;
  }

  /* Global override: sin italic en toda la página. Los "acentos" pasan a ser color. */
  .italic {
    font-style: normal !important;
    color: var(--orange);
  }
  /* Excepciones: donde .italic está sobre fondo naranja → usar ink para contraste */
  .svc:nth-child(3) .italic,
  .proj.x2 .italic,
  .cta-big .italic { color: var(--ink); }
  /* Donde está en fondo oscuro pero queremos contraste fuerte → amarillo */
  .ab-bio .italic { color: var(--yellow); }
  @media (hover: none) { body { cursor: auto; } }

  img { max-width: 100%; display: block; }
  a { color: inherit; text-decoration: none; }
  button { font: inherit; border: none; background: none; cursor: pointer; color: inherit; }
  ::selection { background: var(--orange); color: var(--cream); }

  /* Paper texture */
  body::before {
    content: ""; position: fixed; inset: 0;
    pointer-events: none;
    z-index: 1;
    opacity: .05;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  .wrap { max-width: 1320px; margin: 0 auto; padding: 0 56px; position: relative; z-index: 2; }
  @media (max-width: 768px) { .wrap { padding: 0 24px; } }

  /* ===========================================================
     CUSTOM CURSOR (simple, un solo círculo, sin lag)
     =========================================================== */
  .cur {
    position: fixed; top: 0; left: 0;
    width: 12px; height: 12px;
    background: var(--ink);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
    mix-blend-mode: difference;
    transition: width .25s var(--ease), height .25s var(--ease);
    will-change: transform;
  }
  body.hov-big .cur { width: 56px; height: 56px; }
  @media (hover: none) { .cur { display: none; } }

  /* ===========================================================
     NAV — clásico con detalle
     =========================================================== */
  .nav {
    padding: 18px 0;
    border-bottom: 1px solid rgba(20,18,16,.12);
    position: sticky; top: 0;
    background: rgba(241,232,216,.9);
    backdrop-filter: blur(12px);
    z-index: 100;
  }
  .nav .wrap {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: 20px 40px;
  }
  .nav-logo {
    display: inline-flex; align-items: center; gap: 12px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -.01em;
  }
  .nav-logo .mark {
    width: 36px; height: 36px;
    background: var(--ink);
    color: var(--cream);
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700;
    font-size: 15px;
    position: relative;
    transition: transform .4s var(--ease);
  }
  .nav-logo:hover .mark { transform: rotate(-20deg) scale(1.08); }
  .nav-logo .mark::after {
    content: "✦";
    position: absolute;
    top: -4px; right: -4px;
    font-size: 12px;
    color: var(--orange);
  }
  .nav-logo .role {
    display: block;
    font-size: 11px;
    font-weight: 500;
    color: var(--ink-soft);
    margin-top: 1px;
  }

  .nav-links {
    display: flex; gap: 4px; list-style: none; justify-self: center;
  }
  .nav-links a {
    padding: 8px 14px;
    font-size: 14px;
    font-weight: 500;
    border-radius: var(--pill);
    position: relative;
    transition: color .25s;
  }
  .nav-links a::before {
    content: "";
    position: absolute;
    bottom: 4px; left: 14px; right: 14px;
    height: 1.5px;
    background: var(--ink);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .35s var(--ease);
  }
  .nav-links a:hover::before,
  .nav-links a.active::before { transform: scaleX(1); }
  .nav-links a.active { color: var(--ink); }

  .nav-cta {
    background: var(--ink);
    color: var(--cream);
    padding: 8px 8px 8px 20px;
    border-radius: var(--pill);
    font-size: 14px;
    font-weight: 600;
    display: inline-flex; align-items: center; gap: 10px;
    transition: background .25s;
  }
  .nav-cta:hover { background: var(--orange); color: var(--ink); }
  .nav-cta .dot {
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--orange);
    color: var(--ink);
    display: inline-flex; align-items: center; justify-content: center;
    transition: transform .35s var(--ease);
  }
  .nav-cta:hover .dot {
    background: var(--ink); color: var(--orange);
    transform: rotate(-45deg);
  }
  .nav-cta .pulse {
    width: 8px; height: 8px; border-radius: 50%;
    background: #2ecc71;
    position: relative;
  }
  .nav-cta .pulse::after {
    content: "";
    position: absolute; inset: 0;
    border-radius: 50%;
    background: #2ecc71;
    animation: pulse 2s ease-out infinite;
  }
  @keyframes pulse {
    0% { transform: scale(1); opacity: .6; }
    100% { transform: scale(2.5); opacity: 0; }
  }

  @media (max-width: 900px) {
    .nav-links { display: none; }
  }

  /* ===========================================================
     HERO — solo texto, full width, tipográfico
     =========================================================== */
  .hero { padding: 30px 0 50px; position: relative; }

  .hero-grid {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
  }

  .hero-text {
    display: flex; flex-direction: column; justify-content: center;
    align-items: center;
    padding: 60px 0 80px;
    position: relative;
    gap: 32px;
    text-align: center;
    min-height: 680px;
  }

  /* WIDGETS — pill con una palabra, rotación independiente del float */
  .w-widget {
    position: absolute;
    z-index: 4;
    background: var(--card);
    padding: 16px 28px;
    border-radius: 100px;
    box-shadow: 0 6px 24px rgba(20,18,16,.08);
    display: inline-flex; align-items: center;
    transform: translate(var(--mx, 0), var(--my, 0));
    transition: transform .4s var(--ease), translate .35s var(--ease), scale .35s var(--ease), box-shadow .35s var(--ease);
    cursor: default;
    animation: floatWidget 4s ease-in-out infinite;
  }
  .w-widget:hover {
    translate: 0 -8px;
    scale: 1.06;
    box-shadow: 0 12px 36px rgba(20,18,16,.18);
    z-index: 10;
  }
  .w-widget .w-text {
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -.01em;
    white-space: nowrap;
  }

  .w-1 { top: 60px;    left: 20px;  rotate: -6deg; background: var(--green);  color: var(--cream);  animation-delay: 0s; }
  .w-2 { top: 200px;   right: 20px; rotate: 5deg;  background: var(--ink);    color: var(--cream); animation-delay: -1s; }
  .w-3 { bottom: 110px; left: 20px; rotate: -4deg; background: var(--yellow); color: var(--ink);  animation-delay: -2s; }
  .w-4 { bottom: 80px; right: 30px; rotate: 6deg;  background: var(--lilac);  color: var(--ink);  animation-delay: -3s; }

  @keyframes floatWidget {
    0%, 100% { translate: 0 0; }
    50%      { translate: 0 -10px; }
  }

  /* Decorative stickers */
  .h-sticker {
    position: absolute;
    z-index: 5;
    pointer-events: none;
    transform: translate(var(--mx, 0), var(--my, 0));
    transition: transform .4s var(--ease);
  }
  .h-sticker.smile-sticker {
    top: 150px; right: 200px;
    width: 50px; height: 50px;
    background: var(--yellow);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    transform: rotate(10deg);
    animation: floatY 5s ease-in-out -1.5s infinite;
  }
  .h-sticker.pink-star {
    bottom: 70px; left: calc(50% - 10px);
    color: #f39aaf;
    font-size: 50px;
    line-height: 1;
    rotate: -15deg;
    animation: floatWidget 4.5s ease-in-out -2.5s infinite;
  }

  @media (max-width: 900px) {
    .w-widget, .h-sticker { display: none; }
    .hero-text { min-height: 420px; padding: 40px 0; }
  }

  /* TÍTULO REACTIVO AL CURSOR */
  .reactive-title {
    position: relative;
    z-index: 2;
  }
  .reactive-title .chunk {
    display: inline-block;
  }
  .reactive-title .ltr {
    display: inline-block;
    transition: transform .45s cubic-bezier(.2,.8,.2,1), color .2s;
    will-change: transform;
    opacity: 0;
    animation: letterIn .7s var(--ease) forwards;
  }
  .reactive-title .ltr:hover {
    color: var(--orange);
  }
  .reactive-title .chunk.italic .ltr:hover {
    color: var(--red);
  }
  @keyframes letterIn {
    from { opacity: 0; transform: translateY(50px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .chip {
    display: inline-flex; align-items: center; gap: 10px;
    background: var(--card);
    padding: 9px 16px;
    border-radius: var(--pill);
    font-size: 13px;
    font-weight: 600;
    width: fit-content;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
    opacity: 0;
    animation: fadeUp .8s .1s var(--ease) forwards;
  }
  .chip .pulse {
    width: 8px; height: 8px; border-radius: 50%;
    background: #2ecc71;
    position: relative;
  }
  .chip .pulse::after {
    content: "";
    position: absolute; inset: 0;
    border-radius: 50%;
    background: #2ecc71;
    animation: pulse 2s ease-out infinite;
  }

  .hero h1 {
    font-family: var(--sans);
    font-size: clamp(40px, 6vw, 88px);
    line-height: 1.02;
    letter-spacing: -.03em;
    font-weight: 500;
    margin: 36px auto 32px;
    text-align: center;
    max-width: 900px;
  }
  /* Solo "resultados" en bold */
  .reactive-title .chunk.bold { font-weight: 800; letter-spacing: -.04em; }
  .hero h1 .italic {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    letter-spacing: -.02em;
    color: var(--orange);
  }

  .hero .hero-desc {
    font-size: 18px;
    color: var(--ink-soft);
    max-width: 480px;
    margin-bottom: 36px;
    opacity: 0;
    animation: fadeUp .9s .9s var(--ease) forwards;
  }
  @keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

  .hero-ctas {
    display: flex; gap: 10px; flex-wrap: wrap;
    opacity: 0;
    animation: fadeUp .5s 0s var(--ease) forwards;
  }
  .btn {
    display: inline-flex; align-items: center; gap: 12px;
    padding: 14px 10px 14px 24px;
    border-radius: var(--pill);
    font-size: 15px;
    font-weight: 600;
    transition: transform .25s var(--ease);
  }
  .btn .a {
    width: 32px; height: 32px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px;
    transition: transform .35s var(--ease);
  }
  .btn:hover .a { transform: translate(3px, -3px) rotate(-15deg); }
  .btn-primary { background: var(--ink); color: var(--cream); }
  .btn-primary .a { background: var(--orange); color: var(--ink); }
  .btn-secondary {
    background: transparent;
    color: var(--ink);
    padding: 14px 22px;
    border: 1.5px solid var(--ink);
  }
  .btn-secondary:hover { background: var(--ink); color: var(--cream); }

  /* ===========================================================
     SECCIÓN FOTO (dedicada, separada del hero)
     =========================================================== */
  .photo-feat { padding: 20px 0 40px; }
  .photo-wrap {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--ink);
    aspect-ratio: 16/8;
    max-height: 640px;
  }
  .photo-wrap img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 8s ease-out;
  }
  .photo-wrap:hover img { transform: scale(1.04); }

  /* Tags flotantes sobre la foto */
  .photo-wrap .ptag {
    position: absolute;
    padding: 10px 18px;
    border-radius: var(--pill);
    font-size: 14px;
    font-weight: 600;
    display: inline-flex; align-items: center; gap: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,.18);
    z-index: 2;
    animation: floatY 4s ease-in-out infinite;
  }
  .photo-wrap .ptag.t1 { top: 30px; left: 30px; background: var(--cream); color: var(--ink); }
  .photo-wrap .ptag.t2 { bottom: 130px; right: 30px; background: var(--orange); color: var(--ink); animation-delay: -1.5s; }
  .photo-wrap .ptag.t3 { top: 30px; right: 30px; background: var(--lilac); color: var(--ink); animation-delay: -3s; }
  .photo-wrap .ptag .d { width: 8px; height: 8px; border-radius: 50%; background: #2ecc71; }
  @keyframes floatY {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
  }

  /* ID card pegada abajo */
  .id-card {
    position: absolute;
    left: 24px; right: 24px; bottom: 24px;
    background: rgba(20,18,16,.82);
    backdrop-filter: blur(14px);
    color: var(--cream);
    padding: 20px 24px;
    border-radius: 18px;
    z-index: 2;
    display: flex; justify-content: space-between; align-items: center;
    gap: 16px;
  }
  .id-card .name { font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
  .id-card .role { font-size: 13px; opacity: .7; margin-top: 2px; }
  .id-card .mini-dot {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 12px;
    font-weight: 500;
    padding: 6px 12px;
    border-radius: var(--pill);
    background: rgba(255,255,255,.1);
  }
  .id-card .mini-dot .g {
    width: 6px; height: 6px; border-radius: 50%;
    background: #2ecc71;
  }

  @media (max-width: 900px) {
    .photo-wrap { aspect-ratio: 4/5; max-height: none; }
    .photo-wrap .ptag.t2 { bottom: 100px; }
  }

  /* ===========================================================
     MARQUEE
     =========================================================== */
  .marquee {
    background: var(--ink);
    color: var(--cream);
    padding: 20px 0;
    overflow: hidden;
    white-space: nowrap;
    border-top: 1px solid var(--ink);
  }
  .marquee-inner {
    display: inline-flex;
    gap: 50px;
    animation: runMarq 30s linear infinite;
    font-size: 34px;
    font-weight: 500;
    letter-spacing: -.025em;
  }
  .marquee-inner span { display: inline-flex; align-items: center; gap: 50px; }
  .marquee-inner span::after {
    content: "✦"; color: var(--orange); font-size: 22px;
  }
  @keyframes runMarq { to { transform: translateX(-50%); } }

  /* ===========================================================
     SECTION SHARED
     =========================================================== */
  section { padding: 100px 0; position: relative; }
  section#sobre-mi { padding-top: 190px; }
  @media (max-width: 768px) {
    section { padding: 70px 0; }
    section#sobre-mi { padding-top: 130px; }
  }

  .sec-head {
    display: flex; justify-content: space-between; align-items: flex-end;
    gap: 40px; flex-wrap: wrap;
    margin-bottom: 48px;
  }
  .sec-label {
    display: inline-flex; align-items: center; gap: 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink);
    padding: 8px 14px;
    background: var(--cream-2);
    border-radius: var(--pill);
    margin-bottom: 18px;
  }
  .sec-label .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); }
  .sec-h {
    font-size: clamp(40px, 5.5vw, 76px);
    line-height: .95;
    letter-spacing: -.035em;
    font-weight: 700;
    max-width: 800px;
  }
  .sec-h .italic { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--orange); }

  .ghost-btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 10px 18px;
    background: var(--cream-2);
    border-radius: var(--pill);
    font-size: 14px;
    font-weight: 600;
    transition: background .25s;
  }
  .ghost-btn:hover { background: var(--ink); color: var(--cream); }

  /* ===========================================================
     SERVICIOS — cards tiltadas tipo Truus
     =========================================================== */
  /* Servicios — grid estático con hover "apilado" creativo */
  .cards-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    padding: 40px 0;
    perspective: 1200px;
  }

  .svc {
    min-height: 340px;
    padding: 28px;
    border-radius: var(--radius);
    position: relative;
    transition: transform .5s var(--ease), box-shadow .5s var(--ease);
    color: var(--cream);
    cursor: pointer;
    transform-style: preserve-3d;
  }
  /* Reposo: rectas, solo colores de fondo por card */
  .svc:nth-child(1) { background: var(--green); }
  .svc:nth-child(2) { background: var(--lilac); color: var(--ink); }
  .svc:nth-child(3) { background: var(--orange); color: var(--ink); }
  .svc:nth-child(4) { background: var(--red); }
  .svc:nth-child(5) { background: var(--rose); color: var(--ink); }
  .svc:nth-child(6) { background: var(--blue); color: var(--ink); }

  /* Hover: rotación + translateY tipo Truus + sombra
     (specificidad alta para ganar a .cards-row .svc.reveal-scale.in) */
  .svc:hover {
    z-index: 20;
    box-shadow: 0 20px 40px rgba(20,18,16,.18);
  }
  .cards-row .svc:nth-child(1):hover { transform: rotate(-2deg)  translateY(-8px)  !important; }
  .cards-row .svc:nth-child(2):hover { transform: rotate(1.5deg) translateY(0)      !important; }
  .cards-row .svc:nth-child(3):hover { transform: rotate(-1deg)  translateY(-14px) !important; }
  .cards-row .svc:nth-child(4):hover { transform: rotate(2deg)   translateY(-4px)  !important; }
  .cards-row .svc:nth-child(5):hover { transform: rotate(-2deg)  translateY(-8px)  !important; }
  .cards-row .svc:nth-child(6):hover { transform: rotate(1.5deg) translateY(-12px) !important; }

  @media (max-width: 900px) {
    .cards-row { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 600px) {
    .cards-row { grid-template-columns: 1fr; }
  }

  .svc .svc-t {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -.02em;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1.5px solid currentColor;
    line-height: 1;
  }
  .svc .svc-desc {
    font-size: 15px;
    line-height: 1.35;
    font-weight: 500;
    margin-bottom: 14px;
    opacity: .85;
  }
  .svc .svc-list {
    font-size: 15px;
    line-height: 1.55;
    font-weight: 400;
    opacity: .95;
    margin-top: 8px;
  }
  .svc .svc-list strong { font-weight: 700; }

  .svc .sticker {
    position: absolute;
    pointer-events: none;
    transition: transform .5s var(--ease);
  }
  .svc:hover .sticker { transform: rotate(20deg) scale(1.15); }

  .svc .s-smile {
    top: -20px; right: -16px;
    width: 50px; height: 50px;
    background: var(--yellow);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    transform: rotate(15deg);
  }
  .svc .s-star {
    top: -26px; left: -12px;
    font-size: 48px;
    color: var(--yellow);
    font-style: italic;
    transform: rotate(-15deg);
    line-height: 1;
  }
  .svc .s-heart {
    top: -12px; right: -8px;
    font-size: 34px;
    color: var(--yellow);
    transform: rotate(18deg);
  }
  .svc .s-dot {
    top: -14px; left: -10px;
    width: 40px; height: 40px;
    background: var(--yellow);
    border-radius: 50%;
    transform: rotate(-10deg);
  }

  @media (max-width: 1100px) {
    .cards-row { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  }
  @media (max-width: 700px) {
    .cards-row { grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .svc { transform: rotate(0) !important; }
  }

  /* ===========================================================
     SERVICES CARDS — reveal smooth con stagger + rotación preservada
     Overrides .reveal-scale sólo para estas cards para que:
       1. la rotación base no se pise durante la animación
       2. cada card entre con un delay escalonado (cascada)
       3. el easing sea tipo easeOutExpo (más cinematic)
     =========================================================== */
  .cards-row .svc.reveal-scale {
    opacity: 0;
    transition:
      opacity 1.2s cubic-bezier(.16, 1, .3, 1),
      transform 1.2s cubic-bezier(.16, 1, .3, 1);
  }
  /* estado inicial: rectas + offset Y + escala leve */
  .cards-row .svc.reveal-scale { transform: translateY(32px) scale(.96); }

  /* stagger: cada card entra con 90ms de delay respecto a la anterior */
  .cards-row .svc:nth-child(1).reveal-scale { transition-delay: 0ms; }
  .cards-row .svc:nth-child(2).reveal-scale { transition-delay: 90ms; }
  .cards-row .svc:nth-child(3).reveal-scale { transition-delay: 180ms; }
  .cards-row .svc:nth-child(4).reveal-scale { transition-delay: 270ms; }
  .cards-row .svc:nth-child(5).reveal-scale { transition-delay: 360ms; }
  .cards-row .svc:nth-child(6).reveal-scale { transition-delay: 450ms; }

  /* estado final: rectas y ancladas (0,0), listas para recibir hover */
  .cards-row .svc.reveal-scale.in { opacity: 1; transform: none; }

  /* respeta prefers-reduced-motion */
  @media (prefers-reduced-motion: reduce) {
    .cards-row .svc.reveal-scale,
    .cards-row .svc.reveal-scale.in {
      transition: opacity .3s linear;
      transform: none !important;
    }
  }

  /* ===========================================================
     SOBRE MÍ — foto grande + info + stats juntos
     =========================================================== */
  .about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
  }
  .ab {
    border-radius: var(--radius);
    padding: 28px;
    overflow: hidden;
    position: relative;
    transition: transform .4s var(--ease);
  }

  /* DESKTOP: grilla 2 cols (left 60% bio+stats / right 40% photo) */
  .about-layout {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 20px;
    margin-top: 40px;
    align-items: stretch;
  }
  .al-left { display: flex; flex-direction: column; gap: 16px; }
  .al-bio {
    background: var(--ink);
    color: var(--cream);
    padding: 32px;
    border-radius: var(--radius);
    flex: 1 1 auto;
    display: flex; flex-direction: column; justify-content: space-between;
  }
  .al-bio p { font-size: 22px; line-height: 1.4; font-weight: 500; letter-spacing: -.01em; }
  .al-bio p .italic { color: var(--yellow); }
  .al-bio .sig-svg { display: block; width: 180px; height: auto; margin-top: 24px; }
  .al-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; flex: 0 0 auto; }
  .al-right { position: relative; min-height: 560px; overflow: visible; }
  .al-purple-card { position: absolute; inset: 0; background: var(--lilac); border-radius: var(--radius); z-index: 0; }
  .al-photo {
    position: absolute;
    left: 8%; right: 0; bottom: 0;
    width: 100%; height: auto;
    z-index: 1;
  }
  .al-tag {
    position: absolute;
    top: 36px; right: -20px;
    z-index: 3;
    background: var(--cream);
    color: var(--ink);
    padding: 10px 18px;
    border-radius: var(--pill);
    font-size: 14px;
    font-weight: 600;
    display: inline-flex; align-items: center; gap: 8px;
    box-shadow: 0 6px 20px rgba(0,0,0,.15);
    white-space: nowrap;
  }
  .al-tag .d { width: 8px; height: 8px; border-radius: 50%; background: #2ecc71; }

  /* MOBILE */
  .about-mobile { display: none; margin-top: 40px; }
  .about-stats-mobile { margin-top: 16px; grid-template-columns: repeat(2, 1fr) !important; }
  .ab-mobile-photo img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius);
  }
  .ab-mobile-bio {
    background: var(--ink);
    color: var(--cream);
    padding: 28px;
    border-radius: var(--radius);
    margin-top: 16px;
  }
  .ab-mobile-bio p {
    font-size: 20px;
    line-height: 1.4;
    font-weight: 500;
  }
  .ab-mobile-bio .italic { color: var(--yellow); }
  .ab-mobile-bio .sig-svg {
    display: block;
    width: 160px;
    height: auto;
    margin-top: 20px;
  }

  .about-stats {
    grid-template-columns: repeat(4, 1fr) !important;
    margin-top: -18%; /* sube las stats al hueco vacío del hero image */
    position: relative;
    z-index: 2;
  }
  .about-cta-wrap {
    margin-top: 40px;
    display: flex;
  }
  .about-cta {
    margin-top: 0 !important;
    position: relative;
    z-index: 2;
  }

  @media (max-width: 900px) {
    .about-layout { display: none; }
    .about-mobile { display: block; }
  }

  /* Tags flotantes sobre la foto */
  .ab-photo-big .ptag {
    position: absolute;
    padding: 10px 18px;
    border-radius: var(--pill);
    font-size: 14px;
    font-weight: 600;
    display: inline-flex; align-items: center; gap: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,.18);
    z-index: 2;
    animation: floatY 4s ease-in-out infinite;
  }
  .ab-photo-big .ptag.t1 { top: 22%; left: 6%; background: var(--cream); color: var(--ink); }
  .ab-photo-big .ptag.t2 { top: 65%; right: 8%; background: var(--orange); color: var(--ink); animation-delay: -1.5s; }
  .ab-photo-big .ptag.t3 { top: 22%; right: 6%; background: var(--lilac); color: var(--ink); animation-delay: -3s; }
  .ab-photo-big .ptag .d { width: 8px; height: 8px; border-radius: 50%; background: #2ecc71; }

  .ab-photo-big .id-card {
    position: absolute;
    left: 24px; right: 24px; bottom: 24px;
    background: rgba(20,18,16,.82);
    backdrop-filter: blur(14px);
    color: var(--cream);
    padding: 20px 24px;
    border-radius: 18px;
    z-index: 2;
    display: flex; justify-content: space-between; align-items: center;
    gap: 16px;
  }
  .ab-photo-big .id-card .name { font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
  .ab-photo-big .id-card .role { font-size: 13px; opacity: .7; margin-top: 2px; }
  .ab-photo-big .id-card .mini-dot {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 12px; font-weight: 500;
    padding: 6px 12px; border-radius: var(--pill);
    background: rgba(255,255,255,.1);
  }
  .ab-photo-big .id-card .mini-dot .g { width: 6px; height: 6px; border-radius: 50%; background: #2ecc71; }

  @keyframes floatY {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
  }

  /* Columna derecha: bio + stats */
  .ab-info {
    display: flex; flex-direction: column; gap: 16px;
  }
  .ab-bio {
    background: var(--ink);
    color: var(--cream);
    display: flex; flex-direction: column; justify-content: space-between;
  }
  .ab-bio p {
    font-size: 22px;
    line-height: 1.4;
    letter-spacing: -.01em;
    font-weight: 500;
  }
  .ab-bio p .italic { color: var(--yellow); }
  .ab-bio .bio-2 {
    margin-top: 14px;
    font-size: 16px;
    opacity: .75;
  }
  .ab-bio .sig {
    margin-top: 24px;
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 14px; font-weight: 600; color: var(--orange);
  }

  .stat-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  .stat-cell {
    border-radius: var(--radius);
    padding: 24px;
    display: flex; flex-direction: column; justify-content: space-between;
    min-height: 150px;
    transition: transform .3s var(--ease);
  }
  .stat-cell:hover { transform: translateY(-6px) scale(1.02); }
  .stat-cell .n {
    font-size: 56px;
    font-weight: 700;
    letter-spacing: -.04em;
    line-height: 1;
  }
  .stat-cell .l {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .05em;
    text-transform: uppercase;
    line-height: 1.3;
    opacity: .8;
  }
  /* Stat cells — todos con texto ink para look cohesivo, backgrounds suaves */
  .sc1 { background: #C7E5C5; color: var(--ink); }   /* verde mint */
  .sc2 { background: var(--yellow); color: var(--ink); }
  .sc3 { background: var(--rose); color: var(--ink); }
  .sc4 { background: var(--blue); color: var(--ink); }

  @media (max-width: 900px) {
    .about-grid { grid-template-columns: 1fr; }
    .ab-photo-big { min-height: 500px; }
  }
  @media (max-width: 600px) {
    .stat-row { grid-template-columns: 1fr; }
  }

  /* ===========================================================
     PORTFOLIO — con tilt 3D al hover
     =========================================================== */
  .folio {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 16px;
  }
  .proj {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    min-height: 380px;
    padding: 28px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform .5s var(--ease), box-shadow .5s var(--ease);
  }
  .proj:hover {
    transform: translateY(-4px);
    box-shadow: 0 30px 60px rgba(20,18,16,.18);
  }

  /* Per-card color + grid span */
  .proj.p-dialecto      { grid-column: span 7; min-height: 440px; background: #3F6A4E; color: var(--cream); }
  .proj.p-pipol         { grid-column: span 5; min-height: 440px; background: var(--lilac); color: var(--ink); overflow: visible; }
  .proj.p-devlane       { grid-column: span 5; min-height: 380px; background: var(--ink); color: var(--cream); }
  .proj.p-astroselling  { grid-column: span 4; min-height: 380px; background: var(--orange); color: var(--ink); }
  .proj.p-joaquin       { grid-column: span 3; min-height: 380px; background: var(--rose); color: var(--ink); }

  /* Project image (mockup inside card) */
  .proj-img {
    position: absolute;
    z-index: 1;
    pointer-events: none;
    object-fit: contain;
    user-select: none;
    max-width: none;
  }

  /* Image positioning per variant — fully visible, matches Figma */
  .proj.p-dialecto .proj-img {
    right: 5%;
    top: 50%;
    translate: 0 -50%;
    width: 48%;
    height: auto;
  }
  .proj.p-pipol .proj-img {
    right: 8%;
    bottom: 0;
    top: auto;
    height: 112%;
    width: auto;
  }
  .proj.p-devlane .proj-img {
    left: 50%;
    bottom: -12%;
    translate: -50% 0;
    width: 78%;
    height: auto;
    rotate: -2deg;
  }
  .proj.p-astroselling .proj-img {
    left: 50%;
    top: 42%;
    translate: -50% -50%;
    width: 78%;
    height: auto;
  }
  .proj.p-joaquin {
    display: grid;
    grid-template-rows: auto 1fr auto;
  }
  .proj.p-joaquin .yr {
    position: static;
    top: auto;
    left: auto;
    align-self: start;
    justify-self: start;
    grid-row: 1;
  }
  .proj.p-joaquin .proj-img {
    position: relative;
    place-self: center;
    grid-row: 2;
    top: auto;
    bottom: auto;
    left: auto;
    right: auto;
    translate: none;
    margin: 0;
    width: 36%;
    aspect-ratio: 1;
    height: auto;
  }
  .proj.p-joaquin .proj-inner {
    grid-row: 3;
    margin-top: 0;
  }

  /* Inner content — bottom-left title + tags */
  .proj-inner {
    position: relative;
    z-index: 2;
    margin-top: auto;
  }
  .proj .tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 18px;
  }
  .proj .t {
    background: rgba(20,18,16,.12);
    padding: 7px 14px;
    border-radius: var(--pill);
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
  }
  .proj.p-dialecto .t,
  .proj.p-devlane .t {
    background: rgba(255,255,255,.15);
    color: var(--cream);
  }
  .proj .t.acc { background: var(--ink); color: var(--cream); }
  .proj h3 {
    font-size: clamp(32px, 3.4vw, 46px);
    font-weight: 700;
    letter-spacing: -.025em;
    line-height: 1;
    margin: 0;
  }

  /* Year pill — top-left */
  .proj .yr {
    position: absolute;
    top: 24px; left: 24px;
    padding: 7px 14px;
    border-radius: var(--pill);
    font-size: 12px;
    font-weight: 500;
    z-index: 3;
    background: rgba(20,18,16,.15);
  }
  .proj.p-dialecto .yr,
  .proj.p-devlane .yr { background: rgba(255,255,255,.18); color: var(--cream); }

  /* Devlane special: title top-left + tag top-right */
  .proj.p-devlane .proj-top {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-top: -4px;
  }
  .proj.p-devlane h3 {
    font-size: clamp(32px, 3.4vw, 46px);
    font-weight: 700;
    letter-spacing: -.025em;
    line-height: 1;
    margin: 0;
  }
  .proj.p-devlane .t-pill {
    background: rgba(255,255,255,.15);
    color: var(--cream);
    padding: 7px 14px;
    border-radius: var(--pill);
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    margin-top: 8px;
  }

  /* Hover info overlay */
  .proj-hover {
    position: absolute;
    inset: 0;
    border-radius: var(--radius);
    padding: 80px 28px 130px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    justify-content: center;
    color: inherit;
    opacity: 0;
    transition: opacity .45s var(--ease);
    pointer-events: none;
    z-index: 2;
  }
  .proj:hover .proj-hover { opacity: 1; pointer-events: auto; }
  .proj .yr, .proj .proj-inner, .proj .proj-top { z-index: 3; }
  /* Tags / service pills fade out on hover */
  .proj .tags, .proj .t-pill { transition: opacity .3s var(--ease); }
  .proj:hover .tags, .proj:hover .t-pill { opacity: 0; }
  /* Año (yr) también se oculta en hover para no superponerse con la descripción */
  .proj .yr { transition: opacity .3s var(--ease); }
  .proj:hover .yr { opacity: 0; }
  /* Pipol: fade out phone on hover so rounded corners look clean */
  .proj.p-pipol .proj-img { transition: opacity .4s var(--ease); }
  .proj.p-pipol:hover .proj-img { opacity: 0; }
  /* Devlane: hide top title, overlay shows "Devlane" at bottom in cream */
  .proj.p-devlane .proj-top h3 { transition: opacity .3s var(--ease); }
  .proj.p-devlane:hover .proj-top h3 { opacity: 0; }
  .proj.p-devlane .proj-hover { justify-content: flex-start; padding-top: 110px; padding-bottom: 28px; }
  .ph-title-bottom {
    font-size: clamp(32px, 3.4vw, 46px);
    font-weight: 700;
    letter-spacing: -.025em;
    line-height: 1;
    color: var(--cream);
    margin: 0;
    margin-top: auto;
  }
  /* Joaquin (grid) needs positioned yr for z-index to work */
  .proj.p-joaquin .yr { position: relative; z-index: 3; }
  .proj.p-joaquin .proj-inner { z-index: 3; }
  /* Narrow card — smaller overlay text + tighter padding */
  .proj.p-joaquin .proj-hover { padding: 70px 24px 115px; gap: 12px; }
  .proj.p-joaquin .ph-desc { font-size: 13px; line-height: 1.4; }
  .proj.p-joaquin .ph-meta > div { font-size: 12px; }
  .proj.p-joaquin .ph-meta > div > span { font-size: 9px; }
  /* Per-card hover background matches card */
  .proj.p-dialecto .proj-hover      { background: #3F6A4E; }
  .proj.p-pipol .proj-hover         { background: var(--lilac); }
  .proj.p-devlane .proj-hover       { background: var(--ink); }
  .proj.p-astroselling .proj-hover  { background: var(--orange); }
  .proj.p-joaquin .proj-hover       { background: var(--rose); }
  /* Hover content typography */
  .ph-desc {
    font-size: 16px;
    line-height: 1.45;
    font-weight: 400;
    margin: 0;
    max-width: 95%;
  }
  .ph-meta {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
  }
  .ph-meta > div {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
  }
  .ph-meta > div > span {
    display: block;
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-weight: 500;
    opacity: .55;
    margin-bottom: 4px;
  }
  @media (max-width: 900px) {
    .proj.p-dialecto, .proj.p-pipol, .proj.p-devlane,
    .proj.p-astroselling, .proj.p-joaquin { grid-column: span 12; min-height: 360px; }
    .proj-hover { padding: 70px 24px 120px; }
  }

  /* ===========================================================
     TESTIMONIOS — SLIDER REAL
     =========================================================== */
  /* Testimonials: same bg as rest of page (no color change) */
  .slider-wrap {
    position: relative;
    margin-top: 32px;
  }
  .slider {
    overflow: hidden;
    cursor: grab;
    user-select: none;
  }
  .slider:active { cursor: grabbing; }
  .slider-track {
    display: flex;
    gap: 20px;
    transition: transform .6s var(--ease);
  }
  .t-card {
    flex: 0 0 calc((100% - 40px) / 3);
    background: var(--cream-2);
    border: 1px solid rgba(20,18,16,.06);
    padding: 32px;
    border-radius: var(--radius);
    position: relative;
    min-height: 280px;
    display: flex; flex-direction: column; justify-content: space-between;
  }
  .t-card:nth-child(even) { background: var(--ink); color: var(--cream); }
  .t-card .star {
    width: 36px; height: 36px;
    color: var(--orange);
  }
  .t-card:nth-child(even) .star { color: var(--yellow); }
  .t-card .q {
    font-size: 20px;
    line-height: 1.4;
    font-weight: 500;
    margin: 20px 0 24px;
    letter-spacing: -.01em;
  }
  /* Los acentos <em> dentro del quote mantienen MISMO tamaño y MISMO peso.
     Solo cambia el color para destacar. */
  .t-card .q em {
    font-style: normal;
    font-size: inherit;
    font-weight: inherit;
    color: var(--orange);
  }
  .t-card:nth-child(even) .q em { color: var(--yellow); }
  .t-card .meta {
    display: flex; align-items: center; gap: 12px;
    padding-top: 18px;
    border-top: 1px solid rgba(0,0,0,.08);
  }
  .t-card:nth-child(even) .meta { border-top-color: rgba(255,255,255,.12); }
  .t-card .av { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: var(--lilac); }
  .t-card .av img {
    width: 100%; height: 100%;
    object-fit: cover;
    filter: grayscale(100%) contrast(1.03);
    transition: filter .4s var(--ease);
  }
  .t-card:hover .av img { filter: grayscale(0) contrast(1); }
  .t-card .nm { font-weight: 700; font-size: 14px; }
  .t-card .rl { font-size: 12px; opacity: .7; }

  .slider-ctrls {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 32px;
  }
  .slider-dots { display: flex; gap: 8px; }
  .slider-dots .d {
    width: 10px; height: 10px; border-radius: 50%;
    background: rgba(20,18,16,.2);
    cursor: pointer;
    transition: background .3s, width .3s;
  }
  .slider-dots .d.on { background: var(--ink); width: 32px; border-radius: 10px; }
  .slider-arrows { display: flex; gap: 8px; }
  .slider-arrows button {
    width: 48px; height: 48px;
    border-radius: 50%;
    background: var(--cream);
    transition: background .25s, transform .25s;
    font-size: 18px;
    font-weight: 600;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .slider-arrows button:hover { background: var(--ink); color: var(--cream); transform: translateY(-2px); }
  .slider-arrows button:disabled { opacity: .3; cursor: not-allowed; }

  @media (max-width: 900px) {
    .t-card { flex: 0 0 calc(100% - 20px); }
  }

  /* ===========================================================
     BLOG
     =========================================================== */
  .blog-wrap {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
  .bp {
    background: var(--card);
    border-radius: var(--radius);
    overflow: hidden;
    transition: transform .4s var(--ease);
    display: block;
  }
  .bp:hover { transform: translateY(-6px); }
  .bp .cv { aspect-ratio: 4/3; overflow: hidden; position: relative; }
  .bp .cv img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
  .bp:hover .cv img { transform: scale(1.08); }
  .bp .cv .cat {
    position: absolute; top: 14px; left: 14px;
    padding: 5px 12px; border-radius: var(--pill);
    font-size: 12px; font-weight: 600;
  }
  .bp .c1 { background: var(--orange); color: var(--cream); }
  .bp .c2 { background: var(--green); color: var(--cream); }
  .bp .c3 { background: var(--lilac); color: var(--ink); }
  .bp .bd { padding: 22px; }
  .bp .dt { font-size: 11px; color: var(--ink-soft); letter-spacing: .08em; text-transform: uppercase; font-weight: 600; }
  .bp h3 { font-size: 22px; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; margin: 10px 0; }
  .bp p { font-size: 14px; color: var(--ink-soft); }
  .bp .read { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; margin-top: 14px; transition: gap .3s; }
  .bp:hover .read { gap: 14px; color: var(--orange); }

  @media (max-width: 900px) { .blog-wrap { grid-template-columns: 1fr; } }

  /* ===========================================================
     CONTACTO
     =========================================================== */
  .cta-big {
    background: var(--orange);
    border-radius: var(--radius);
    padding: 100px 40px 80px;
    text-align: center;
    position: relative;
    overflow: hidden;
  }
  .cta-big .floater {
    position: absolute;
    font-family: var(--serif);
    font-style: italic;
    font-size: 200px;
    color: rgba(20,18,16,.08);
    line-height: 1;
    pointer-events: none;
  }
  .cta-big .f1 { top: 20px; left: 40px; transform: rotate(-12deg); }
  .cta-big .f2 { bottom: 20px; right: 40px; transform: rotate(15deg); }
  .cta-big h2 {
    font-size: clamp(40px, 6vw, 80px);
    line-height: .95;
    font-weight: 700;
    letter-spacing: -.03em;
    position: relative;
    z-index: 2;
  }
  .cta-big h2 .italic { font-family: var(--serif); font-style: italic; font-weight: 400; }
  .cta-big h2 .big { font-size: 1.12em; display: inline-block; }
  .cta-big p {
    font-size: 18px;
    max-width: 500px;
    margin: 28px auto 40px;
    color: rgba(20,18,16,.75);
    position: relative; z-index: 2;
  }
  .email-btn {
    display: inline-flex; align-items: center; gap: 16px;
    background: var(--ink);
    color: var(--cream);
    padding: 14px 14px 14px 28px;
    border-radius: var(--pill);
    font-weight: 500;
    font-size: 17px;
    transition: transform .25s var(--ease);
    position: relative; z-index: 2;
  }
  .email-btn:hover { transform: translateY(-3px); }
  .email-btn .a {
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--yellow); color: var(--ink);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 18px;
    transition: transform .4s var(--ease);
  }
  .email-btn:hover .a { transform: rotate(-45deg); }

  .socs {
    display: flex; gap: 10px; justify-content: center;
    flex-wrap: wrap;
    margin-top: 30px;
    position: relative; z-index: 2;
  }
  .socs a {
    background: rgba(20,18,16,.12);
    padding: 10px 18px;
    border-radius: var(--pill);
    font-size: 14px;
    font-weight: 500;
    transition: background .25s, transform .25s;
  }
  .socs a:hover { background: var(--ink); color: var(--cream); transform: translateY(-2px); }

  /* ===========================================================
     FOOTER — completo con columnas y marca grande
     =========================================================== */
  footer {
    background: var(--ink);
    color: var(--cream);
    padding: 70px 0 28px;
    margin-top: 20px;
    position: relative;
    overflow: hidden;
  }
  .foot-top {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 40px;
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(255,255,255,.1);
  }
  .foot-brand .foot-logo {
    display: inline-flex; align-items: center; gap: 12px;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.015em;
    margin-bottom: 20px;
  }
  .foot-brand .foot-logo .mk {
    width: 40px; height: 40px;
    background: var(--orange);
    color: var(--ink);
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700;
    font-size: 17px;
  }
  .foot-brand p {
    font-size: 15px;
    color: #b8b2a4;
    max-width: 340px;
    line-height: 1.5;
  }
  .foot-brand .avail {
    display: inline-flex; align-items: center; gap: 10px;
    margin-top: 24px;
    padding: 10px 16px;
    background: rgba(255,255,255,.06);
    border-radius: var(--pill);
    font-size: 13px;
    font-weight: 500;
  }
  .foot-brand .avail .g {
    width: 8px; height: 8px; min-width: 8px; min-height: 8px;
    border-radius: 50%; background: #2ecc71;
    position: relative;
    flex-shrink: 0;
    display: inline-block;
  }
  .foot-brand .avail .g::after {
    content: ""; position: absolute; inset: 0;
    border-radius: 50%; background: #2ecc71;
    animation: pulse 2s ease-out infinite;
  }

  .foot-col h4 {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #8b8578;
    margin-bottom: 20px;
  }
  .foot-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
  .foot-col a {
    font-size: 15px;
    font-weight: 500;
    color: var(--cream);
    position: relative;
    transition: color .25s, padding-left .25s;
    display: inline-flex; align-items: center; gap: 8px;
  }
  .foot-col a::before {
    content: "→";
    opacity: 0;
    transition: opacity .3s, transform .3s;
    transform: translateX(-6px);
    color: var(--orange);
  }
  .foot-col a:hover { color: var(--orange); padding-left: 4px; }
  .foot-col a:hover::before { opacity: 1; transform: translateX(0); }

  /* Bottom row */
  .foot-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 28px;
    font-size: 13px;
    color: #8b8578;
    flex-wrap: wrap;
    gap: 12px;
  }
  .foot-bottom .back-top {
    display: inline-flex; align-items: center; gap: 10px;
    color: var(--cream);
    font-weight: 500;
    padding: 8px 16px;
    border-radius: var(--pill);
    background: rgba(255,255,255,.06);
    transition: background .25s, transform .25s;
  }
  .foot-bottom .back-top:hover { background: var(--orange); color: var(--ink); transform: translateY(-2px); }

  @media (max-width: 900px) {
    .foot-top { grid-template-columns: 1fr 1fr; gap: 30px; }
    .foot-brand { grid-column: span 2; }
  }
  @media (max-width: 600px) {
    .foot-top { grid-template-columns: 1fr; }
    .foot-brand { grid-column: span 1; }
  }

  /* ===========================================================
     REVEAL + intro
     =========================================================== */
  .reveal { opacity: 0; transform: translateY(40px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
  .reveal.in { opacity: 1; transform: translateY(0); }

  /* Reveal variantes por sección */
  .reveal-l { opacity: 0; transform: translateX(-50px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
  .reveal-l.in { opacity: 1; transform: translateX(0); }
  .reveal-r { opacity: 0; transform: translateX(50px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
  .reveal-r.in { opacity: 1; transform: translateX(0); }
  .reveal-scale { opacity: 0; transform: scale(.85); transition: opacity .9s var(--ease), transform .9s var(--ease); }
  .reveal-scale.in { opacity: 1; transform: scale(1); }


  /* Parallax helper */
  .parallax-img { will-change: transform; }

  /* ===========================================================
     PAGE-SPECIFIC STYLES — componentes agregados para
     sobre-mi, servicios, portfolio, blog, contacto
     =========================================================== */

  /* Hero reducido para subpáginas */
  .page-hero {
    padding: 80px 0 60px;
    position: relative;
    text-align: left;
  }
  .page-hero .sec-label { margin-bottom: 22px; }
  .page-hero h1 {
    font-family: var(--sans);
    font-size: clamp(48px, 7vw, 110px);
    line-height: .95;
    letter-spacing: -.035em;
    font-weight: 700;
    margin-bottom: 26px;
    max-width: 900px;
  }
  .page-hero h1 .italic {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
  }
  .page-hero .lead {
    font-size: clamp(18px, 2vw, 22px);
    color: var(--ink-soft);
    max-width: 640px;
    line-height: 1.45;
    font-weight: 500;
  }

  /* Bloque de párrafos largos (about / intro de servicios) */
  .prose-block {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    max-width: 780px;
    margin: 20px 0 40px;
  }
  .prose-block p {
    font-size: 18px;
    line-height: 1.6;
    color: var(--ink);
  }
  .prose-block p .italic {
    color: var(--orange);
  }

  /* Cards de valores / principios */
  .val-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 32px;
  }
  .val-card {
    background: var(--card);
    border-radius: var(--radius);
    padding: 28px 24px;
    display: flex; flex-direction: column; gap: 14px;
    min-height: 220px;
    transition: transform .35s var(--ease), box-shadow .35s var(--ease);
    position: relative;
    overflow: hidden;
  }
  .val-card:hover {
    transform: translateY(-6px) rotate(-1deg);
    box-shadow: 0 22px 44px rgba(20,18,16,.12);
  }
  .val-card:nth-child(1) { background: var(--yellow); }
  .val-card:nth-child(2) { background: var(--rose); }
  .val-card:nth-child(3) { background: var(--lilac); }
  .val-card:nth-child(4) { background: var(--blue); }
  .val-card .ico {
    width: 46px; height: 46px;
    border-radius: 50%;
    background: var(--ink);
    color: var(--cream);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 20px;
  }
  .val-card h3 {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.1;
  }
  .val-card p {
    font-size: 14px;
    color: rgba(20,18,16,.72);
    line-height: 1.5;
  }
  @media (max-width: 900px) { .val-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 520px) { .val-grid { grid-template-columns: 1fr; } }

  /* Timeline / Proceso */
  .process-timeline {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 40px;
    counter-reset: step;
  }
  .step-card {
    background: var(--card);
    border-radius: var(--radius);
    padding: 28px 24px;
    position: relative;
    transition: transform .35s var(--ease), box-shadow .35s var(--ease);
    min-height: 220px;
  }
  .step-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 26px 50px rgba(20,18,16,.14);
  }
  .step-card .step-num {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .1em;
    padding: 6px 12px;
    background: var(--ink);
    color: var(--cream);
    border-radius: var(--pill);
    margin-bottom: 18px;
  }
  .step-card h4 {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.02em;
    margin-bottom: 10px;
    line-height: 1.1;
  }
  .step-card p {
    font-size: 14px;
    color: var(--ink-soft);
    line-height: 1.5;
  }
  .step-card::before { display: none; } /* línea vieja eliminada */
  /* Flecha SVG limpia entre cards (chevron-right en color orange) */
  .step-card::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -22px;
    width: 28px;
    height: 28px;
    background: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E8612A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") no-repeat center / contain;
    transform: translateY(-50%);
    z-index: 2;
    pointer-events: none;
  }
  .step-card:last-child::after { display: none; }
  @media (max-width: 900px) {
    .process-timeline { grid-template-columns: repeat(2, 1fr); }
    .step-card::before, .step-card::after { display: none; }
  }
  @media (max-width: 520px) { .process-timeline { grid-template-columns: 1fr; } }

  /* Lista de experiencias */
  .exp-list {
    display: flex; flex-direction: column;
    gap: 8px;
    margin-top: 32px;
    max-width: 820px;
  }
  .exp-row {
    background: var(--card);
    border-radius: 18px;
    padding: 22px 26px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    transition: background .3s, transform .3s;
  }
  .exp-row:hover {
    background: var(--ink);
    color: var(--cream);
    transform: translateX(6px);
  }
  .exp-row .exp-t {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -.01em;
  }
  .exp-row .exp-y {
    font-size: 13px;
    font-weight: 500;
    opacity: .7;
    flex-shrink: 0;
  }

  /* Servicios extendidos en servicios.html — bloques grandes */
  .svc-block {
    background: var(--card);
    border-radius: var(--radius);
    padding: 48px 44px;
    margin-bottom: 24px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 44px;
    position: relative;
    overflow: hidden;
    transition: transform .4s var(--ease), box-shadow .4s var(--ease);
  }
  .svc-block:hover {
    transform: translateY(-6px);
    box-shadow: 0 28px 60px rgba(20,18,16,.12);
  }
  .svc-block:nth-child(1) { background: var(--cream-2); }
  .svc-block:nth-child(2) { background: var(--rose); }
  .svc-block:nth-child(3) { background: var(--blue); }
  .svc-block:nth-child(4) { background: var(--yellow); }
  .svc-block:nth-child(5) { background: var(--lilac); }
  .svc-block:nth-child(6) { background: var(--cream-2); }

  .svc-block .svc-hd .num {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .1em;
    padding: 6px 12px;
    background: var(--ink);
    color: var(--cream);
    border-radius: var(--pill);
    margin-bottom: 22px;
  }
  .svc-block h3 {
    font-size: clamp(32px, 4vw, 52px);
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1;
    margin-bottom: 20px;
  }
  .svc-block h3 .italic {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    color: var(--orange);
  }
  .svc-block .svc-desc p {
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 10px;
    color: rgba(20,18,16,.82);
  }
  .svc-block .svc-bd {
    display: flex; flex-direction: column; gap: 18px;
  }
  .svc-block .tier {
    display: flex; align-items: center; gap: 14px;
    padding: 16px 20px;
    background: rgba(20,18,16,.08);
    border-radius: var(--pill);
    font-size: 15px;
    font-weight: 600;
    width: fit-content;
  }
  .svc-block .tier .tag {
    padding: 4px 10px;
    background: var(--ink);
    color: var(--cream);
    border-radius: var(--pill);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
  }
  .svc-block .deliver {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 18px;
  }
  .svc-block .deliver li {
    font-size: 14px;
    font-weight: 500;
    padding-left: 20px;
    position: relative;
    line-height: 1.5;
  }
  .svc-block .deliver li::before {
    content: "◆";
    position: absolute;
    left: 0;
    color: var(--orange);
    font-size: 10px;
    top: 2px;
  }
  .svc-block .meta-row {
    display: flex; flex-wrap: wrap;
    gap: 10px;
    margin-top: 8px;
  }
  .svc-block .meta-row .chip-sm {
    padding: 6px 14px;
    background: rgba(20,18,16,.1);
    border-radius: var(--pill);
    font-size: 12px;
    font-weight: 600;
  }
  .svc-block .cta-link {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 12px 22px;
    background: var(--ink);
    color: var(--cream);
    border-radius: var(--pill);
    font-size: 14px;
    font-weight: 600;
    width: fit-content;
    transition: background .25s, transform .25s;
  }
  .svc-block .cta-link:hover {
    background: var(--orange);
    color: var(--ink);
    transform: translateY(-2px);
  }
  @media (max-width: 900px) {
    .svc-block { grid-template-columns: 1fr; padding: 36px 28px; gap: 26px; }
    .svc-block .deliver { grid-template-columns: 1fr; }
  }

  /* FAQ Accordion — full width (sin max-width que centraba) */
  .faq-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    margin: 40px 0 0;
  }
  .faq-item {
    background: var(--card);
    border-radius: 18px;
    overflow: hidden;
    transition: background .3s, box-shadow .3s;
  }
  .faq-item.open {
    background: var(--ink);
    color: var(--cream);
    box-shadow: 0 20px 40px rgba(20,18,16,.18);
  }
  .faq-q {
    padding: 24px 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    cursor: pointer;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -.01em;
  }
  .faq-q .ico {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(20,18,16,.08);
    color: var(--ink);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
    transition: transform .3s, background .3s, color .3s;
  }
  .faq-item.open .faq-q .ico {
    background: var(--orange);
    color: var(--ink);
    transform: rotate(45deg);
  }
  .faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height .4s var(--ease);
  }
  .faq-item.open .faq-a { max-height: 260px; }
  .faq-a p {
    padding: 0 28px 26px;
    font-size: 15px;
    line-height: 1.55;
    opacity: .85;
  }

  /* Filter Pills */
  .filter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 28px 0 44px;
    justify-content: center;
  }
  .filter-pill {
    padding: 10px 20px;
    border-radius: var(--pill);
    background: var(--card);
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    cursor: pointer;
    border: 1.5px solid transparent;
    transition: background .25s, color .25s, transform .2s;
  }
  .filter-pill:hover { transform: translateY(-2px); }
  .filter-pill.on {
    background: var(--ink);
    color: var(--cream);
  }

  /* Portfolio grid extra rows for portfolio.html */
  .folio.folio-full {
    grid-template-columns: repeat(12, 1fr);
  }
  .folio.folio-full .proj {
    grid-column: span 4;
    min-height: 360px;
  }
  .folio.folio-full .proj.wide {
    grid-column: span 6;
    min-height: 400px;
  }
  .folio.folio-full .proj.feat {
    grid-column: span 12;
    min-height: 440px;
  }
  .proj.x6 { background: var(--yellow); color: var(--ink); }
  .proj.x7 { background: var(--blue); color: var(--ink); }
  .proj.x8 { background: var(--red); color: var(--cream); }
  .proj.x9 { background: var(--green); color: var(--cream); }
  .proj.x10 { background: var(--lilac); color: var(--ink); }
  .proj.x11 { background: var(--ink); color: var(--cream); }
  .proj.x12 { background: var(--rose); color: var(--ink); }
  .proj.x6 .t, .proj.x7 .t, .proj.x10 .t, .proj.x12 .t { background: rgba(20,18,16,.12); color: var(--ink); }
  .proj.x6 .yr, .proj.x7 .yr, .proj.x10 .yr, .proj.x12 .yr { background: rgba(20,18,16,.12); color: var(--ink); }
  .proj.x8 .yr, .proj.x9 .yr, .proj.x11 .yr { background: rgba(255,255,255,.18); color: var(--cream); }
  @media (max-width: 900px) {
    .folio.folio-full .proj,
    .folio.folio-full .proj.wide,
    .folio.folio-full .proj.feat { grid-column: span 12; }
    .proj.x6, .proj.x7, .proj.x8, .proj.x9, .proj.x10, .proj.x11, .proj.x12 { grid-column: span 12; }
  }

  /* Stats grid (portfolio, contacto) */
  .stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 48px;
  }
  .stat-big {
    background: var(--card);
    border-radius: var(--radius);
    padding: 36px 28px;
    min-height: 200px;
    display: flex; flex-direction: column; justify-content: space-between;
    transition: transform .3s var(--ease);
  }
  .stat-big:hover { transform: translateY(-6px) scale(1.02); }
  .stat-big:nth-child(1) { background: var(--orange); color: var(--ink); }
  .stat-big:nth-child(2) { background: var(--ink); color: var(--cream); }
  .stat-big:nth-child(3) { background: var(--yellow); color: var(--ink); }
  .stat-big:nth-child(4) { background: var(--green); color: var(--cream); }
  .stat-big .num {
    font-size: clamp(56px, 6vw, 96px);
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: .95;
  }
  .stat-big .num .italic {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
  }
  .stat-big .lab {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .8;
  }
  @media (max-width: 900px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 520px) { .stat-grid { grid-template-columns: 1fr; } }

  /* Blog featured post */
  .blog-feat {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 16px;
    margin-bottom: 40px;
    background: var(--card);
    border-radius: var(--radius);
    overflow: hidden;
    min-height: 440px;
    transition: transform .4s var(--ease), box-shadow .4s var(--ease);
  }
  .blog-feat:hover {
    transform: translateY(-4px);
    box-shadow: 0 30px 60px rgba(20,18,16,.14);
  }
  .blog-feat .feat-cover {
    background: var(--orange);
    color: var(--ink);
    padding: 48px 44px;
    position: relative;
    display: flex; flex-direction: column; justify-content: space-between;
    overflow: hidden;
  }
  .blog-feat .feat-cover::before {
    content: "✦";
    position: absolute;
    font-style: italic;
    font-size: 400px;
    top: -80px; right: -60px;
    opacity: .14;
    line-height: 1;
    pointer-events: none;
  }
  .blog-feat .feat-cover .tag {
    padding: 6px 14px;
    background: var(--ink);
    color: var(--cream);
    border-radius: var(--pill);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    width: fit-content;
    position: relative; z-index: 2;
  }
  .blog-feat .feat-cover h2 {
    font-size: clamp(32px, 3.8vw, 52px);
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1;
    margin-top: 18px;
    position: relative; z-index: 2;
  }
  .blog-feat .feat-cover h2 .italic {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
  }
  .blog-feat .feat-body {
    padding: 48px 44px;
    display: flex; flex-direction: column; justify-content: space-between;
  }
  .blog-feat .feat-body .meta {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-soft);
  }
  .blog-feat .feat-body p {
    font-size: 16px;
    line-height: 1.6;
    color: var(--ink);
    margin: 18px 0 26px;
  }
  .blog-feat .feat-body .feat-cta {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 12px 22px;
    background: var(--ink);
    color: var(--cream);
    border-radius: var(--pill);
    font-size: 14px;
    font-weight: 600;
    width: fit-content;
    transition: background .25s, transform .25s;
  }
  .blog-feat .feat-body .feat-cta:hover {
    background: var(--orange);
    color: var(--ink);
    transform: translateY(-2px);
  }
  @media (max-width: 900px) {
    .blog-feat { grid-template-columns: 1fr; }
    .blog-feat .feat-cover, .blog-feat .feat-body { padding: 32px 28px; }
  }

  /* Newsletter form */
  .newsletter-band {
    background: var(--ink);
    color: var(--cream);
    border-radius: var(--radius);
    padding: 64px 48px;
    margin-top: 56px;
    position: relative;
    overflow: hidden;
    text-align: center;
  }
  .newsletter-band::before {
    content: "✦";
    position: absolute;
    font-style: italic;
    font-size: 320px;
    color: rgba(232,80,46,.1);
    top: -60px; left: -60px;
    line-height: 1;
    pointer-events: none;
  }
  .newsletter-band h3 {
    font-size: clamp(32px, 4vw, 52px);
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1;
    margin-bottom: 16px;
    position: relative; z-index: 2;
  }
  .newsletter-band h3 .italic {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    color: var(--orange);
  }
  .newsletter-band p {
    font-size: 17px;
    color: rgba(241,232,216,.7);
    max-width: 500px;
    margin: 0 auto 30px;
    position: relative; z-index: 2;
  }
  .newsletter-form {
    display: flex;
    gap: 8px;
    max-width: 480px;
    margin: 0 auto;
    position: relative; z-index: 2;
    flex-wrap: wrap;
    justify-content: center;
  }
  .newsletter-form input[type="email"] {
    flex: 1 1 220px;
    padding: 14px 22px;
    border-radius: var(--pill);
    border: none;
    background: rgba(255,255,255,.08);
    color: var(--cream);
    font-family: var(--sans);
    font-size: 15px;
    font-weight: 500;
    outline: none;
    transition: background .25s;
  }
  .newsletter-form input[type="email"]::placeholder { color: rgba(241,232,216,.5); }
  .newsletter-form input[type="email"]:focus { background: rgba(255,255,255,.14); }
  .newsletter-form button {
    padding: 14px 26px;
    border-radius: var(--pill);
    background: var(--orange);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 15px;
    font-weight: 700;
    transition: background .25s, transform .25s;
  }
  .newsletter-form button:hover {
    background: var(--yellow);
    transform: translateY(-2px);
  }

  /* ========== CONTACTO: form + info ========== */
  .contact-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 20px;
    margin-top: 40px;
  }
  .contact-form {
    background: var(--card);
    border-radius: var(--radius);
    padding: 44px 40px;
  }
  .contact-form h3 {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -.02em;
    margin-bottom: 24px;
  }
  .contact-form h3 .italic {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    color: var(--orange);
  }
  .form-row {
    display: grid;
    gap: 6px;
    margin-bottom: 18px;
  }
  .form-row.row-2 {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  .form-row label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-soft);
    display: block;
    margin-bottom: 6px;
  }
  .form-row label .req { color: var(--orange); }
  .form-row input,
  .form-row select,
  .form-row textarea {
    width: 100%;
    padding: 14px 18px;
    border-radius: 14px;
    border: 1.5px solid rgba(20,18,16,.12);
    background: var(--cream);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 15px;
    font-weight: 500;
    outline: none;
    transition: border-color .25s, background .25s;
  }
  .form-row input:focus,
  .form-row select:focus,
  .form-row textarea:focus {
    border-color: var(--orange);
    background: #fff;
  }
  .form-row textarea {
    min-height: 140px;
    resize: vertical;
    font-family: var(--sans);
    line-height: 1.5;
  }
  .form-row select { cursor: pointer; }
  .form-send {
    display: inline-flex; align-items: center; gap: 12px;
    padding: 14px 10px 14px 24px;
    border-radius: var(--pill);
    background: var(--ink);
    color: var(--cream);
    font-size: 15px;
    font-weight: 600;
    transition: background .25s, transform .25s;
    margin-top: 8px;
    font-family: var(--sans);
    cursor: pointer;
  }
  .form-send:hover {
    background: var(--orange);
    color: var(--ink);
    transform: translateY(-2px);
  }
  .form-send .a {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--orange);
    color: var(--ink);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px;
    transition: transform .35s var(--ease), background .25s, color .25s;
  }
  .form-send:hover .a { background: var(--ink); color: var(--orange); transform: translate(3px,-3px) rotate(-15deg); }

  .contact-side {
    display: flex; flex-direction: column; gap: 14px;
  }
  .side-card {
    background: var(--card);
    border-radius: var(--radius);
    padding: 24px 26px;
    transition: transform .3s var(--ease), box-shadow .3s var(--ease);
  }
  .side-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(20,18,16,.12);
  }
  .side-card.email-big {
    background: var(--orange);
    color: var(--ink);
  }
  .side-card h4 {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-bottom: 10px;
    opacity: .75;
  }
  .side-card .big-email {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.02em;
    word-break: break-word;
    display: inline-flex; align-items: center; gap: 8px;
  }
  .side-card .big-email .arr { font-size: 18px; }
  .side-card.socials ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .side-card.socials li a {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 16px;
    background: rgba(20,18,16,.08);
    border-radius: var(--pill);
    font-size: 13px;
    font-weight: 600;
    transition: background .25s, color .25s, transform .25s;
  }
  .side-card.socials li a:hover {
    background: var(--ink);
    color: var(--cream);
    transform: translateY(-2px);
  }
  .side-card .talks li {
    list-style: none;
    padding: 10px 0;
    border-bottom: 1px solid rgba(20,18,16,.08);
    font-size: 14px;
    font-weight: 500;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
  }
  .side-card .talks li:last-child { border-bottom: none; }
  .side-card .talks li .where { font-size: 12px; opacity: .6; }
  .side-card.faq-mini .faq-mini-q {
    font-size: 14px;
    font-weight: 700;
    margin-top: 12px;
  }
  .side-card.faq-mini .faq-mini-q:first-of-type { margin-top: 0; }
  .side-card.faq-mini .faq-mini-a {
    font-size: 13px;
    color: var(--ink-soft);
    margin-top: 4px;
    line-height: 1.5;
  }

  /* Banner "Abierta 2026" */
  .open-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 26px 24px;
    background: var(--ink);
    color: var(--cream);
    border-radius: var(--radius);
    margin-top: 56px;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -.01em;
  }
  .open-banner .g {
    width: 12px; height: 12px;
    min-width: 12px; min-height: 12px;
    border-radius: 50%;
    background: #2ecc71;
    position: relative;
    flex-shrink: 0;
    display: inline-block;
  }
  .open-banner .g::after {
    content: "";
    position: absolute; inset: 0;
    border-radius: 50%;
    background: #2ecc71;
    animation: pulse 2s ease-out infinite;
  }
  .open-banner .italic {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    color: var(--orange);
  }

  @media (max-width: 900px) {
    .contact-grid { grid-template-columns: 1fr; }
    .contact-form { padding: 32px 26px; }
    .form-row.row-2 { grid-template-columns: 1fr; }
  }

  /* Mini CTA inline */
  .mini-cta {
    display: inline-flex; align-items: center; gap: 12px;
    padding: 14px 10px 14px 26px;
    border-radius: var(--pill);
    background: var(--ink);
    color: var(--cream);
    font-size: 15px;
    font-weight: 600;
    transition: background .25s, transform .25s;
    margin-top: 30px;
  }
  .mini-cta:hover {
    background: var(--orange);
    color: var(--ink);
    transform: translateY(-2px);
  }
  .mini-cta .a {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--orange);
    color: var(--ink);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px;
    transition: transform .35s var(--ease), background .25s, color .25s;
  }
  .mini-cta:hover .a { background: var(--ink); color: var(--orange); transform: translate(3px,-3px) rotate(-15deg); }

  /* Grow animation — typewriter: letters no toman espacio hasta aparecer (no gap) */
  .grow-word .dyn-o {
    display: none;
  }
  .grow-word .dyn-o.show {
    display: inline;
  }

  /* ===========================================================
     STRATEGY BANNER — pink vertical rounded bars (Figma match)
     =========================================================== */
  .strat-banner {
    background: var(--cream);
    position: relative;
    min-height: 760px;
    display: grid;
    place-items: center;
    text-align: center;
    overflow: hidden;
    padding: 220px 24px 120px;
  }
  .sb-bars {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    gap: 0;
    align-items: center;
    pointer-events: none;
    z-index: 0;
  }
  .sb-bar {
    height: var(--h, 500px);
    background: var(--rose);
    border-radius: 80px;
    transform: translateY(var(--o, 0));
    animation: sbBarFloat var(--dur, 6s) ease-in-out var(--d, 0s) infinite;
  }
  .sb-bar:nth-child(1) { --dur: 6s;   --d: 0s; }
  .sb-bar:nth-child(2) { --dur: 7s;   --d: -1s; }
  .sb-bar:nth-child(3) { --dur: 5.5s; --d: -2s; }
  .sb-bar:nth-child(4) { --dur: 6.5s; --d: -3s; }
  .sb-bar:nth-child(5) { --dur: 7.5s; --d: -0.5s; }
  .sb-bar:nth-child(6) { --dur: 5.8s; --d: -1.5s; }
  .sb-bar:nth-child(7) { --dur: 6.2s; --d: -2.5s; }
  .sb-bar:nth-child(8) { --dur: 7s;   --d: -0.8s; }
  .sb-bar:nth-child(9) { --dur: 6.8s; --d: -2.2s; }
  @keyframes sbBarFloat {
    0%, 100% { transform: translateY(var(--o, 0)); }
    50%      { transform: translateY(calc(var(--o, 0) - 12px)); }
  }
  .strat-banner .wrap {
    position: relative;
    z-index: 2;
    max-width: 900px;
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .strat-banner h2 {
    font-size: clamp(42px, 5.6vw, 72px);
    font-weight: 700;
    letter-spacing: -.035em;
    line-height: 1.05;
    color: var(--ink);
    max-width: 100%;
    margin: 0;
    text-align: center;
  }
  .strat-banner h2 .accent {
    font-weight: 700;
    color: var(--orange);
  }
  .strat-banner p {
    font-size: 20px;
    font-weight: 500;
    color: var(--ink);
    max-width: 520px;
    margin: 28px 0 0;
    line-height: 1.4;
    text-align: center;
  }
  @media (max-width: 900px) {
    .strat-banner {
      padding: 100px 28px !important;
      min-height: 580px !important;
    }
    .sb-bars {
      gap: 0 !important;
      padding: 0;
      grid-template-columns: repeat(6, 1fr);
    }
    .sb-bar {
      min-width: 0 !important;
      height: 420px !important;
      border-radius: 50px;
      animation: sbBarFloatMobile var(--dur, 6s) ease-in-out var(--d, 0s) infinite !important;
    }
    /* Offsets sutiles por barra (-10 a +10px) para que no queden perfectamente parejas */
    .sb-bar:nth-child(1) { --o: -10px !important; }
    .sb-bar:nth-child(2) { --o: 8px   !important; }
    .sb-bar:nth-child(3) { --o: -6px  !important; }
    .sb-bar:nth-child(4) { --o: 10px  !important; }
    .sb-bar:nth-child(5) { --o: -8px  !important; }
    .sb-bar:nth-child(6) { --o: 6px   !important; }
    /* Ocultar las barras extra que ya no caben en el grid de 6 */
    .sb-bar:nth-child(n+7) {
      display: none;
    }
    .strat-banner h2 {
      font-size: clamp(30px, 7.5vw, 44px);
      letter-spacing: -.03em;
    }
    .strat-banner p {
      font-size: 16px;
      max-width: 100%;
      margin-top: 20px;
    }
  }
  /* Animación mobile: flota alrededor del offset base de cada barra */
  @keyframes sbBarFloatMobile {
    0%, 100% { transform: translateY(var(--o, 0)); }
    50%      { transform: translateY(calc(var(--o, 0) - 6px)); }
  }
  @media (max-width: 600px) {
    .strat-banner {
      padding: 80px 22px !important;
      min-height: 500px !important;
    }
    .sb-bars {
      gap: 0 !important;
      grid-template-columns: repeat(5, 1fr);
    }
    .sb-bar:nth-child(n+6) {
      display: none;
    }
    .sb-bar {
      height: 360px !important;
      border-radius: 40px;
    }
    .strat-banner h2 {
      font-size: clamp(26px, 8.5vw, 36px);
    }
    .strat-banner p {
      font-size: 15px;
    }
  }
  @media (max-width: 420px) {
    .strat-banner {
      padding: 72px 18px !important;
      min-height: 460px !important;
    }
    .sb-bars {
      gap: 0 !important;
      grid-template-columns: repeat(4, 1fr);
    }
    .sb-bar:nth-child(n+5) {
      display: none;
    }
    .sb-bar {
      height: 320px !important;
    }
  }

  /* ===========================================================
     LOGOS CAROUSEL
     =========================================================== */
  .logos-carousel {
    padding: 10px 0 50px;
    overflow: hidden;
  }
  .logos-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--ink-soft);
    text-align: center;
    margin-bottom: 24px;
  }
  .logos-track-wrap {
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  }
  .logos-track {
    display: inline-flex;
    gap: 63px;
    white-space: nowrap;
    animation: logoScroll 60s linear infinite;
    will-change: transform;
  }
  .logos-img {
    height: 72px;
    width: auto;
    max-width: none;
    flex-shrink: 0;
    display: block;
    user-select: none;
    -webkit-user-drag: none;
    filter: grayscale(100%) contrast(1.08);
    opacity: .9;
    transition: filter .5s var(--ease), opacity .5s var(--ease);
  }
  .logos-track-wrap:hover .logos-img {
    filter: grayscale(0) contrast(1);
    opacity: 1;
  }
  @keyframes logoScroll {
    to { transform: translateX(calc(-50% - 31.5px)); }
  }

  /* ===========================================================
     ARTICLE PAGES — individual blog posts
     =========================================================== */
  .article { background: var(--cream); color: var(--ink); }
  .article-hero { padding: 140px 0 40px; position: relative; }
  .article-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink);
    opacity: .7;
    margin-bottom: 32px;
    transition: opacity .25s var(--ease), transform .25s var(--ease);
  }
  .article-back:hover { opacity: 1; transform: translateX(-4px); }
  .article-cat {
    display: inline-block;
    padding: 6px 14px;
    border-radius: var(--pill);
    background: var(--ink);
    color: var(--cream);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    margin-bottom: 24px;
  }
  .article-cat.c-strategy { background: var(--green); color: var(--cream); }
  .article-cat.c-content  { background: var(--orange); color: var(--ink); }
  .article-cat.c-personal { background: var(--lilac); color: var(--ink); }
  .article-cat.c-growth   { background: var(--rose); color: var(--ink); }
  .article-cat.c-copy     { background: var(--yellow); color: var(--ink); }
  .article-hero h1 {
    font-family: var(--sans);
    font-size: clamp(38px, 5.5vw, 72px);
    font-weight: 700;
    letter-spacing: -.035em;
    line-height: 1.02;
    max-width: 900px;
    margin: 0 0 28px;
  }
  .article-hero h1 .italic {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
  }
  .article-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 14px;
    color: var(--ink);
    opacity: .7;
    font-weight: 500;
  }
  .article-meta .sep { opacity: .4; }

  .article-image {
    max-width: 1000px;
    margin: 48px auto 60px;
    padding: 0 56px;
    aspect-ratio: 16 / 9;
  }
  .article-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius);
    display: block;
  }

  .article-body {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 24px 80px;
    font-size: 18px;
    line-height: 1.65;
    color: var(--ink);
  }
  .article-body p {
    margin: 0 0 24px;
  }
  .article-body p.lead {
    font-size: 22px;
    line-height: 1.5;
    font-weight: 500;
    color: var(--ink);
    margin-bottom: 36px;
  }
  .article-body h2 {
    font-family: var(--sans);
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.15;
    margin: 56px 0 20px;
    color: var(--ink);
  }
  .article-body h3 {
    font-family: var(--sans);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.015em;
    line-height: 1.25;
    margin: 40px 0 14px;
    color: var(--ink);
  }
  .article-body strong { font-weight: 700; }
  .article-body em { font-style: italic; }
  .article-body ul,
  .article-body ol { margin: 0 0 24px; padding-left: 24px; }
  .article-body li { margin-bottom: 10px; }
  .article-body a {
    color: var(--ink);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
    text-decoration-color: var(--orange);
    transition: color .25s var(--ease);
  }
  .article-body a:hover { color: var(--orange); }
  .article-body blockquote {
    margin: 36px 0;
    padding: 24px 28px;
    background: var(--cream-2);
    border-left: 4px solid var(--orange);
    border-radius: 4px 12px 12px 4px;
    font-size: 20px;
    line-height: 1.5;
    font-weight: 500;
    font-style: normal;
  }
  .article-body blockquote p:last-child { margin: 0; }
  .article-body .callout {
    background: var(--lilac);
    padding: 28px;
    border-radius: var(--radius);
    margin: 36px 0;
  }
  .article-body .callout h3 {
    margin-top: 0;
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 600;
  }
  .article-body .callout p:last-child { margin: 0; }
  .article-body hr {
    border: none;
    height: 1px;
    background: rgba(20,18,16,.1);
    margin: 48px 0;
  }

  /* Article end: CTA + related posts */
  .article-end {
    background: var(--cream-2);
    padding: 80px 0 100px;
    border-top: 1px solid rgba(20,18,16,.08);
  }
  .article-cta {
    max-width: 720px;
    margin: 0 auto 80px;
    text-align: center;
  }
  .article-cta > p {
    font-size: 14px;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-weight: 600;
    opacity: .6;
    margin: 0 0 16px;
  }
  .article-cta h2 {
    font-size: clamp(40px, 6vw, 72px);
    font-weight: 700;
    line-height: .95;
    letter-spacing: -.03em;
    margin: 0 0 32px;
  }
  .article-cta h2 .big { font-size: 1.12em; display: inline-block; }
  .article-cta .email-btn { margin: 0 auto; }

  .article-related h3 {
    font-size: 14px;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-weight: 600;
    opacity: .6;
    margin-bottom: 28px;
    text-align: center;
  }
  .related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 1100px;
    margin: 0 auto;
  }
  .related-card {
    background: var(--cream);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .35s var(--ease), box-shadow .35s var(--ease);
    border: 1px solid rgba(20,18,16,.06);
  }
  .related-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(20,18,16,.12);
  }
  .related-card .rc-img {
    aspect-ratio: 16 / 10;
    overflow: hidden;
  }
  .related-card .rc-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s var(--ease);
  }
  .related-card:hover .rc-img img { transform: scale(1.05); }
  .related-card .rc-body { padding: 22px 24px 26px; }
  .related-card .rc-cat {
    display: inline-block;
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-weight: 600;
    opacity: .55;
    margin-bottom: 10px;
  }
  .related-card .rc-body h4 {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -.015em;
    line-height: 1.25;
    margin: 0;
    color: var(--ink);
  }

  @media (max-width: 900px) {
    .article-hero { padding: 110px 0 30px; }
    .article-image { padding: 0 24px; margin: 32px auto 48px; }
    .article-body { font-size: 17px; padding: 0 24px 60px; }
    .article-body p.lead { font-size: 19px; }
    .article-body h2 { font-size: 26px; margin-top: 40px; }
    .article-body h3 { font-size: 20px; }
    .related-grid { grid-template-columns: 1fr; }
  }

  /* ===========================================================
     ABOUT ME PAGE (sobre-mi.html)
     =========================================================== */
  .sobre-hero { padding: 140px 0 60px; position: relative; }
  .sobre-hero-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 48px;
    align-items: center;
  }
  .sobre-hero-text .sec-label { margin-bottom: 28px; }
  .sobre-hero-text h1 {
    font-family: var(--sans);
    font-size: clamp(48px, 7vw, 100px);
    font-weight: 700;
    letter-spacing: -.035em;
    line-height: .98;
    margin: 0 0 24px;
  }
  .sobre-hero-text h1 .italic {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
  }
  .sobre-hero-text .lead {
    font-size: clamp(18px, 1.5vw, 22px);
    line-height: 1.4;
    color: var(--ink);
    max-width: 540px;
    margin: 0;
  }
  .sobre-hero-photo {
    position: relative;
    aspect-ratio: 4 / 5;
    max-height: 620px;
  }
  .sobre-hero-photo .photo-clip {
    position: absolute;
    inset: 0;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--lilac);
  }
  .sobre-hero-photo .photo-clip img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
  }
  .ph-chip {
    position: absolute;
    z-index: 3;
    background: var(--cream);
    color: var(--ink);
    padding: 9px 16px;
    border-radius: var(--pill);
    font-size: 13px;
    font-weight: 600;
    display: inline-flex; align-items: center; gap: 7px;
    box-shadow: 0 8px 24px rgba(0,0,0,.18);
    white-space: nowrap;
    animation: floatY 5s ease-in-out infinite;
  }
  .ph-chip.c1 { top: 24px; left: -16px; animation-delay: 0s; }
  .ph-chip.c2 { top: 50%; right: -24px; background: var(--ink); color: var(--cream); animation-delay: -1.5s; }
  .ph-chip.c3 { bottom: 28px; left: 10%; background: var(--yellow); animation-delay: -3s; }
  .ph-chip.c1 .d { width: 8px; height: 8px; border-radius: 50%; background: #2ecc71; }

  .sobre-block { padding: 60px 0; position: relative; }
  .sobre-block .sec-head { margin-bottom: 32px; }

  .prose-block {
    max-width: 720px;
    font-size: 20px;
    line-height: 1.55;
    color: var(--ink);
    font-weight: 400;
  }
  .prose-block p { margin: 0 0 18px; }
  .prose-block p:last-child { margin-bottom: 0; }
  .prose-block .italic { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--orange); }

  /* Story — photo (left) + text (right) */
  .story-grid {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 40px;
    align-items: center;
  }
  .story-text {
    font-size: 19px;
    line-height: 1.55;
    color: var(--ink);
  }
  .story-text p { margin: 0 0 16px; }
  .story-text p:last-child { margin-bottom: 0; }
  .story-text strong { font-weight: 700; }
  .story-text .italic { font-family: var(--serif); font-style: italic; color: var(--orange); }
  .story-photo {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--rose);
    aspect-ratio: 4 / 5;
    max-height: 520px;
  }
  .story-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  /* Approach grid — 3 pillars */
  .approach-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
  .approach-card {
    background: var(--cream-2);
    border: 1px solid rgba(20,18,16,.08);
    padding: 32px 28px;
    border-radius: var(--radius);
    transition: transform .35s var(--ease), box-shadow .35s var(--ease);
  }
  .approach-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(20,18,16,.12);
  }
  .approach-card:nth-child(1) { background: var(--green); color: var(--cream); }
  .approach-card:nth-child(2) { background: var(--orange); }
  .approach-card:nth-child(3) { background: var(--lilac); }
  .approach-card .num {
    font-family: var(--serif);
    font-style: italic;
    font-size: 44px;
    font-weight: 400;
    opacity: .7;
    margin-bottom: 24px;
  }
  .approach-card h3 {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.1;
    margin: 0 0 14px;
  }
  .approach-card p {
    font-size: 15px;
    line-height: 1.5;
    margin: 0;
    opacity: .92;
  }

  /* Focus banner */
  .focus-banner {
    background: var(--ink);
    color: var(--cream);
    border-radius: var(--radius);
    padding: 64px 48px;
    text-align: center;
  }
  .focus-banner .sec-label.light {
    color: var(--cream);
    background: transparent;
    border: 1px solid rgba(241,232,216,.3);
    opacity: 1;
    margin-bottom: 24px;
  }
  .focus-banner .sec-label.light .dot { background: var(--yellow); }
  .focus-banner h2 {
    font-size: clamp(32px, 4vw, 54px);
    font-weight: 700;
    letter-spacing: -.025em;
    line-height: 1.15;
    max-width: 900px;
    margin: 0 auto 16px;
  }
  .focus-banner h2 .italic {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    color: var(--yellow);
  }
  .focus-banner p {
    font-size: 17px;
    opacity: .85;
    max-width: 600px;
    margin: 0 auto;
  }

  /* Contact row below CTA */
  .sobre-contact {
    margin-top: 28px;
    font-size: 14px;
    color: var(--ink);
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    opacity: .85;
  }
  .sobre-contact a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
  .sobre-contact a:hover { color: var(--orange); }
  .sobre-contact .sep { opacity: .4; }

  @media (max-width: 900px) {
    .sobre-hero-grid { grid-template-columns: 1fr; gap: 32px; }
    .sobre-hero-photo { max-height: 500px; }
    .story-grid { grid-template-columns: 1fr; gap: 24px; }
    .approach-grid { grid-template-columns: 1fr; }
    .focus-banner { padding: 48px 24px; }
    .ph-chip.c1, .ph-chip.c2, .ph-chip.c3 { font-size: 12px; padding: 7px 12px; }
  }

  /* ===========================================================
     ABOUT ME — Short version + Beliefs
     =========================================================== */
  .short-prose { max-width: 800px; font-size: 22px; line-height: 1.5; }

  /* Waving hand emoji — animates on hover */
  .wave {
    display: inline-block;
    transform-origin: 70% 70%;
    transition: transform .2s ease;
  }
  .sobre-hero-text h1:hover .wave {
    animation: wave-hand 1.4s ease-in-out;
  }
  @keyframes wave-hand {
    0%, 60%, 100% { transform: rotate(0deg); }
    10%, 30%  { transform: rotate(16deg); }
    20%, 40%  { transform: rotate(-10deg); }
    50%       { transform: rotate(12deg); }
  }

  /* Beliefs grid — 4 principles */
  .beliefs-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  .belief-card {
    background: var(--cream-2);
    border: 1px solid rgba(20,18,16,.08);
    border-radius: var(--radius);
    padding: 32px 28px;
    transition: transform .35s var(--ease), box-shadow .35s var(--ease);
  }
  .belief-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(20,18,16,.08);
  }
  .belief-card:nth-child(2) { background: var(--yellow); border-color: transparent; }
  .belief-card:nth-child(3) { background: var(--rose); border-color: transparent; }
  .belief-card .bc-n {
    font-family: var(--serif);
    font-style: italic;
    font-size: 28px;
    font-weight: 400;
    color: var(--orange);
    margin-bottom: 18px;
  }
  .belief-card h3 {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.15;
    margin: 0 0 12px;
    color: var(--ink);
  }
  .belief-card p {
    font-size: 15px;
    line-height: 1.55;
    color: var(--ink);
    opacity: .85;
    margin: 0;
  }

  @media (max-width: 900px) {
    .beliefs-grid { grid-template-columns: 1fr; }
  }

  /* ===========================================================
     I18N — language pill toggle + first-visit banner
     =========================================================== */
  .lang-toggle {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: rgba(20,18,16,.06);
    border-radius: var(--pill);
    padding: 3px;
  }
  .lang-pill {
    background: transparent;
    border: none;
    padding: 6px 12px;
    border-radius: var(--pill);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--ink);
    opacity: .55;
    cursor: pointer;
    transition: background .2s var(--ease), opacity .2s var(--ease), color .2s var(--ease);
  }
  .lang-pill:hover { opacity: 1; }
  .lang-pill.active {
    background: var(--ink);
    color: var(--cream);
    opacity: 1;
  }

  /* First-visit banner */
  .lang-banner {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(120%);
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--ink);
    color: var(--cream);
    padding: 14px 18px 14px 20px;
    border-radius: var(--pill);
    box-shadow: 0 20px 50px rgba(20,18,16,.35);
    font-size: 14px;
    font-weight: 500;
    max-width: 92vw;
    opacity: 0;
    transition: transform .45s var(--ease), opacity .45s var(--ease);
  }
  .lang-banner.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
  }
  .lang-banner-text { margin-right: 4px; }
  .lang-banner-btn {
    background: transparent;
    border: 1px solid rgba(255,255,255,.25);
    color: var(--cream);
    padding: 7px 14px;
    border-radius: var(--pill);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s var(--ease), border-color .2s var(--ease);
  }
  .lang-banner-btn:hover { border-color: rgba(255,255,255,.6); }
  .lang-banner-btn.primary {
    background: var(--orange);
    border-color: var(--orange);
    color: var(--ink);
  }
  .lang-banner-btn.primary:hover { background: #ff7a3c; border-color: #ff7a3c; }
  .lang-banner-close {
    background: transparent;
    border: none;
    color: var(--cream);
    opacity: .5;
    font-size: 22px;
    line-height: 1;
    padding: 4px 8px;
    cursor: pointer;
    transition: opacity .2s var(--ease);
  }
  .lang-banner-close:hover { opacity: 1; }

  /* Dual-language content blocks (for blog articles) */
  html[data-lang="en"] .lang-es { display: none !important; }
  html[data-lang="es"] .lang-en { display: none !important; }

  @media (max-width: 768px) {
    .lang-banner { font-size: 13px; padding: 10px 14px; flex-wrap: wrap; gap: 8px; }
    .lang-banner-text { width: 100%; margin-bottom: 4px; }
    .lang-toggle { margin-left: 8px; }
  }

  /* ===========================================================
     404 PAGE
     =========================================================== */
  .err-section {
    padding: 120px 0 160px;
    min-height: 60vh;
    display: flex;
    align-items: center;
  }
  .err-block {
    text-align: center;
    max-width: 640px;
    margin: 0 auto;
  }
  .err-num {
    font-family: var(--sans);
    font-size: clamp(80px, 15vw, 180px);
    font-weight: 800;
    letter-spacing: -.05em;
    line-height: 1;
    color: var(--orange);
    margin-bottom: 16px;
  }
  .err-block h1 {
    font-size: clamp(32px, 4.5vw, 56px);
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1.1;
    margin-bottom: 16px;
  }
  .err-block p {
    font-size: 18px;
    line-height: 1.5;
    opacity: .75;
    margin-bottom: 36px;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
  }
  .err-links {
    margin-top: 48px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
    font-size: 14px;
    opacity: .7;
  }
  .err-links a {
    padding: 6px 12px;
    border: 1px solid rgba(20,18,16,.15);
    border-radius: var(--pill);
    transition: background .2s var(--ease), border-color .2s var(--ease);
  }
  .err-links a:hover {
    background: var(--ink);
    color: var(--cream);
    border-color: var(--ink);
  }

  /* Blog article language notice (body not translated) */
  .lang-notice {
    background: var(--yellow);
    color: var(--ink);
    padding: 12px 20px;
    border-radius: var(--pill);
    font-size: 13px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 16px auto 0;
    max-width: fit-content;
  }
  html[data-lang="en"] .lang-notice { display: none; }

  /* ===========================================================
     MOBILE FIXES — ajustes específicos para mobile
     =========================================================== */

  /* HAMBURGER BUTTON — hidden en desktop, visible <900px */
  .nav-toggle {
    display: none;
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    position: relative;
    z-index: 101;
  }
  .nav-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--ink);
    border-radius: 2px;
    transition: transform .3s var(--ease), opacity .2s;
  }
  .nav-toggle.open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .nav-toggle.open span:nth-child(2) {
    opacity: 0;
  }
  .nav-toggle.open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  /* "Let's Talk" mobile-only item del menú overlay (oculto en desktop) */
  .nav-links li.mobile-only-li { display: none; }

  @media (max-width: 900px) {
    /* Nav: cambiar a flex en mobile (grid hacía que el slot del nav-links
       fixed empujara al lang-toggle, estirándolo visualmente) */
    .nav .wrap {
      display: flex !important;
      align-items: center;
      gap: 10px;
      grid-template-columns: none;
    }
    .nav .nav-logo { margin-right: auto; }   /* logo a la izq, resto a la der */

    /* Ocultar el "Let's Talk" botón del nav en mobile (se mueve al overlay) */
    .nav .nav-cta { display: none; }
    /* Mostrar el "Let's Talk" como item del overlay */
    .nav-links li.mobile-only-li { display: list-item; }

    /* Lang toggle compacto en mobile */
    .nav .lang-toggle {
      padding: 2px;
      gap: 0;
      flex-shrink: 0;
      width: auto;
    }
    .nav .lang-pill {
      padding: 5px 10px;
      font-size: 11px;
      letter-spacing: .04em;
    }

    /* Fix containing-block issue: backdrop-filter en .nav hace que fixed
       descendants queden posicionados relativo al nav (no al viewport).
       Lo removemos en mobile para que el overlay ocupe toda la pantalla. */
    .nav {
      backdrop-filter: none;
      background: rgba(241,232,216,.98);
    }

    /* Nav links as full-screen overlay */
    .nav-links {
      display: flex !important;
      flex-direction: column;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      width: 100vw;
      height: 100vh;
      padding: 100px 32px 40px;
      background: var(--cream);
      gap: 0;
      opacity: 0;
      pointer-events: none;
      transform: translateY(-10px);
      transition: opacity .35s var(--ease), transform .35s var(--ease);
      z-index: 99;
      list-style: none;
    }
    .nav-links.open {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0);
    }
    .nav-links li {
      border-bottom: 1px solid rgba(20,18,16,.08);
    }
    .nav-links li:last-child {
      border-bottom: none;
    }
    .nav-links a {
      display: block;
      font-size: 22px;
      font-weight: 600;
      padding: 20px 0;
      letter-spacing: -.01em;
    }
    .nav-links a::before {
      display: none;
    }

    /* Show hamburger */
    .nav-toggle {
      display: flex;
    }

    /* CTA más compacto pero sin wrap */
    .nav-cta {
      padding: 7px 6px 7px 14px;
      font-size: 13px;
      gap: 8px;
      white-space: nowrap;
    }
    .nav-cta .dot {
      width: 26px;
      height: 26px;
      font-size: 13px;
    }

    /* Nav logo más compacto */
    .nav-logo {
      font-size: 14px;
      line-height: 1.15;
    }
  }

  @media (max-width: 600px) {
    .nav .wrap {
      gap: 8px;
    }
    .nav-cta {
      padding: 6px 4px 6px 12px;
      font-size: 12px;
      gap: 6px;
    }
    .nav-cta .dot {
      width: 22px;
      height: 22px;
      font-size: 12px;
    }
    .nav-cta .pulse {
      display: none; /* liberar espacio */
    }
    .nav-logo {
      font-size: 13px;
    }
    .lang-toggle {
      scale: .9;
    }
  }

  @media (max-width: 380px) {
    .nav-cta {
      font-size: 11px;
      padding: 5px 4px 5px 10px;
    }
    .nav-logo span {
      display: block;
      max-width: 70px;
      line-height: 1.1;
    }
  }

  /* HERO MOBILE — layout reorganizado:
     - Más espacio entre nav y hero
     - Título bajado
     - w-1 y w-2 arriba (Positioning / Brand recognition)
     - w-3 y w-4 ENTRE título y CTAs (Email marketing / Personal brand)
     - Carita feliz en esquina inferior derecha */
  @media (max-width: 900px) {
    .h-sticker.pink-star {
      display: none !important;
    }

    /* Más espacio entre nav y hero */
    .hero {
      padding: 60px 0 60px !important;
    }
    /* Hero-text: title + CTAs en flow normal, widgets abajo (después de CTAs) */
    .hero-text {
      justify-content: flex-start !important;
      align-items: center;
      gap: 36px !important;
      padding: 110px 0 220px !important;   /* menos aire arriba (era 150) */
      min-height: auto !important;
    }

    /* Widgets en general */
    .hero .w-widget {
      display: inline-flex !important;
      padding: 10px 18px !important;
      box-shadow: 0 4px 14px rgba(20,18,16,.10);
    }
    .hero .w-widget .w-text {
      font-size: 14px !important;
    }

    /* Widgets de arriba (flanqueando espacio superior) */
    .hero .w-1 { top: 14px !important;   left: 12px !important;  right: auto !important; bottom: auto !important; }
    .hero .w-2 { top: 14px !important;   right: 12px !important; left: auto !important;  bottom: auto !important; }

    /* Widgets de abajo — más arriba, separados del marquee */
    .hero .w-3 {
      top: auto !important;
      bottom: 80px !important;
      left: 22px !important;
      right: auto !important;
    }
    .hero .w-4 {
      top: auto !important;
      bottom: 80px !important;
      right: 90px !important;     /* lejos de la carita feliz */
      left: auto !important;
    }

    /* Smile sticker en esquina inferior derecha */
    .h-sticker.smile-sticker {
      display: flex !important;
      top: auto !important;
      right: 20px !important;
      bottom: 14px !important;
      left: auto !important;
      width: 40px !important;
      height: 40px !important;
      z-index: 3;
    }
    .h-sticker.smile-sticker svg {
      width: 24px;
      height: 24px;
    }
    /* Hero title más grande en mobile */
    .hero h1 {
      font-size: clamp(56px, 12vw, 80px);
      letter-spacing: -.035em;
      margin: 0 auto;
    }
  }
  @media (max-width: 600px) {
    .hero-text {
      gap: 30px !important;
      padding: 100px 0 210px !important;
    }
    .hero h1 {
      font-size: clamp(52px, 13vw, 68px);
    }
    .hero .w-widget {
      padding: 9px 16px !important;
    }
    .hero .w-widget .w-text {
      font-size: 13px !important;
    }
    .hero .w-3 { bottom: 70px !important; }
    .hero .w-4 { bottom: 70px !important; right: 80px !important; }
  }
  @media (max-width: 480px) {
    /* Mostrar también w-3 y w-4 en mobile chico (antes ocultos) */
    .hero .w-3,
    .hero .w-4 {
      display: inline-flex !important;
    }
    .hero-text {
      gap: 26px !important;
      padding: 90px 0 200px !important;
    }
    .hero .w-3 { bottom: 65px !important; left: 14px !important; }
    .hero .w-4 { bottom: 65px !important; right: 70px !important; }
    .h-sticker.smile-sticker {
      right: 14px !important;
      bottom: 10px !important;
      width: 36px !important;
      height: 36px !important;
    }
    .h-sticker.smile-sticker svg {
      width: 20px;
      height: 20px;
    }
    .hero h1 {
      font-size: clamp(48px, 14vw, 60px);
    }
  }

  /* MARQUEE — font-size drásticamente más chico en mobile */
  @media (max-width: 900px) {
    .marquee {
      padding: 14px 0;
    }
    .marquee-inner {
      font-size: 22px;
      gap: 30px;
    }
    .marquee-inner span {
      gap: 30px;
    }
    .marquee-inner span::after {
      font-size: 14px;
    }
  }
  @media (max-width: 600px) {
    .marquee {
      padding: 12px 0;
    }
    .marquee-inner {
      font-size: 17px;
      gap: 22px;
    }
    .marquee-inner span {
      gap: 22px;
    }
    .marquee-inner span::after {
      font-size: 11px;
    }
  }

  /* SERVICES — STICKY STACK con TÍTULO STICKY arriba (mobile) */
  @media (max-width: 900px) {
    /* Section con padding-bottom moderado → da un poco de aire al final
       sin que sea scroll vacío excesivo */
    #servicios {
      padding-bottom: 30vh !important;
    }
    /* Cards: punto medio entre compactas y aireadas */
    .svc {
      min-height: 260px !important;
      padding: 26px 24px 28px !important;
    }
    /* Mostrar el svc-list completo, achicado */
    .cards-row .svc .svc-list {
      display: block !important;
      font-size: 13px !important;
      line-height: 1.5 !important;
      margin-top: 10px !important;
      opacity: .85;
    }
    .cards-row .svc .svc-list strong {
      font-weight: 600;
    }
    /* Título "Here's where I can help" QUEDA STICKY ARRIBA con background full-width */
    #servicios .sec-head {
      position: sticky !important;
      top: 70px !important;
      z-index: 50 !important;
      background: var(--cream) !important;
      /* Trick: extender background a 100vw manteniendo contenido alineado */
      margin-left: calc(50% - 50vw) !important;
      margin-right: calc(50% - 50vw) !important;
      padding-left: calc(50vw - 50% + 4px) !important;
      padding-right: calc(50vw - 50% + 4px) !important;
      padding-top: 12px !important;
      padding-bottom: 12px !important;
      margin-bottom: 0 !important;
      border-bottom: 1px solid rgba(20,18,16,.08);
      gap: 8px !important;
    }
    /* Compactar el h2 dentro del sec-head sticky */
    #servicios .sec-head .sec-h {
      font-size: 24px !important;
      line-height: 1.05 !important;
      max-width: 100%;
    }
    #servicios .sec-head .sec-label {
      font-size: 10px !important;
      padding: 4px 10px !important;
      margin-bottom: 8px !important;
    }
    #servicios .sec-head .ghost-btn {
      display: none !important; /* simplificar el sec-head sticky */
    }
    .cards-row {
      grid-template-columns: 1fr !important;
      gap: 14px !important;
      padding: 24px 0;
      perspective: none !important;
    }
    .svc {
      min-height: 380px;
      padding: 32px 28px 36px;
      position: sticky;
      will-change: transform;
      box-shadow: none !important;
    }
    .cards-row .svc.reveal-scale,
    .cards-row .svc.reveal-scale.in {
      opacity: 1 !important;
      transform: none !important;
      transition: box-shadow .3s var(--ease) !important;
      animation: none !important;
    }
    /* Cards stuck DEBAJO del sec-head sticky compactado (~70 nav + ~140 sec-head = 210)
       Offset +55px entre cards para que asome el título de cada una */
    .cards-row .svc:nth-child(1) { top: 210px; z-index: 1; }
    .cards-row .svc:nth-child(2) { top: 265px; z-index: 2; }
    .cards-row .svc:nth-child(3) { top: 320px; z-index: 3; }
    .cards-row .svc:nth-child(4) { top: 375px; z-index: 4; }
    .cards-row .svc:nth-child(5) { top: 430px; z-index: 5; }
    .cards-row .svc:nth-child(6) { top: 485px; z-index: 6; }
    .cards-row .svc:hover {
      transform: none !important;
    }
  }
  @media (max-width: 700px) {
    .svc .svc-list {
      display: none; /* el párrafo largo se oculta en mobile */
    }
    .svc .svc-t {
      font-size: 28px;
      margin-bottom: 14px;
      padding-bottom: 0;
      border-bottom: none; /* sacar la línea separadora en mobile */
      line-height: 1.05;
    }
    /* En mobile, el italic hereda el color del svc-t (no naranja) */
    .svc .svc-t .italic {
      color: inherit !important;
    }
    .svc .svc-desc {
      font-size: 15px;
      margin-bottom: 0;
      line-height: 1.5;
    }
    .svc-stack-section .svc {
      padding: 32px 28px 36px !important;
    }
  }

  @media (max-width: 480px) {
    .svc {
      padding: 22px 20px 20px;
    }
    .svc .svc-t {
      font-size: 23px;
    }
  }

  /* ===========================================================
     MOBILE — AUDIT FIXES GENERALES (home/sobre/servicios/blog/contact)
     =========================================================== */

  /* SECTIONS — paddings más compactos y titulares ajustados */
  @media (max-width: 900px) {
    section { padding: 70px 0; }
    section#sobre-mi { padding-top: 130px !important; }
    .sec-head {
      margin-bottom: 32px;
      gap: 20px;
    }
    .sec-h {
      font-size: clamp(34px, 7vw, 54px);
      letter-spacing: -.03em;
    }
    .sec-label {
      font-size: 11px;
      padding: 7px 12px;
      margin-bottom: 14px;
    }
    /* Botón "See all services" / "View all" más compacto */
    .ghost-btn {
      padding: 9px 16px;
      font-size: 13px;
    }
  }
  @media (max-width: 600px) {
    section { padding: 56px 0; }
    .sec-h {
      font-size: clamp(30px, 8vw, 44px);
    }
  }

  /* PAGE-HERO (sobre-mi, servicios, blog, contacto) */
  @media (max-width: 900px) {
    .page-hero {
      padding: 56px 0 40px;
    }
    .page-hero h1 {
      font-size: clamp(42px, 9vw, 68px);
      margin-bottom: 20px;
    }
    .page-hero .lead {
      font-size: 16px;
      line-height: 1.45;
    }
  }
  @media (max-width: 600px) {
    .page-hero {
      padding: 44px 0 32px;
    }
    .page-hero h1 {
      font-size: clamp(36px, 10vw, 56px);
    }
    .page-hero .lead {
      font-size: 15px;
    }
  }

  /* PORTFOLIO HOME (.folio grid 12-col) → 1 col en mobile, imágenes acomodadas */
  @media (max-width: 900px) {
    .folio {
      grid-template-columns: 1fr !important;
      gap: 14px;
    }
    .folio .proj {
      grid-column: auto !important;
      min-height: 360px !important;
      padding: 24px !important;
      overflow: hidden !important;
    }
    .folio .proj h3 {
      font-size: 34px;
    }

    /* DIALECTO — imagen entera en la esquina SUPERIOR DERECHA */
    .folio .proj.p-dialecto .proj-img {
      top: 5% !important;
      right: 5% !important;
      bottom: auto !important;
      left: auto !important;
      translate: none !important;
      width: 44% !important;
      height: auto !important;
      max-width: none !important;
    }

    /* PIPOL — imagen alineada al bottom de la card, sobresale por arriba */
    .folio .proj.p-pipol {
      overflow: visible !important;
    }
    .folio .proj.p-pipol .proj-img {
      right: 8% !important;
      bottom: 0 !important;            /* alineada al borde inferior de la card */
      top: auto !important;
      left: auto !important;
      translate: none !important;
      height: auto !important;
      width: 55% !important;
      max-width: none !important;
    }

    /* DEVLANE — imagen centrada abajo, arranca en la línea */
    .folio .proj.p-devlane .proj-img {
      left: 50% !important;
      bottom: -8% !important;
      top: auto !important;
      right: auto !important;
      translate: -50% 0 !important;
      width: 86% !important;
      height: auto !important;
      max-width: none !important;
      rotate: -2deg !important;
    }

    /* ASTROSELLING — imagen centrada, subida un toque */
    .folio .proj.p-astroselling .proj-img {
      left: 50% !important;
      top: 45% !important;
      bottom: auto !important;
      right: auto !important;
      translate: -50% -50% !important;
      width: 72% !important;
      height: auto !important;
      max-width: none !important;
    }

    /* JOAQUIN — imagen circular GRANDE centrada, pero título y tags a la IZQUIERDA */
    .folio .proj.p-joaquin {
      min-height: 380px !important;
      grid-template-columns: 1fr !important;
      grid-template-rows: auto 1fr auto !important;
    }
    /* Centrar SOLO la imagen */
    .folio .proj.p-joaquin .proj-img {
      width: 42% !important;
      max-width: 190px !important;
      aspect-ratio: 1 !important;
      height: auto !important;
      place-self: center center !important;
      justify-self: center !important;
      margin: 0 auto !important;
      left: auto !important;
      right: auto !important;
    }
    /* Año, tags y título: alineados a la IZQUIERDA como el resto */
    .folio .proj.p-joaquin .yr,
    .folio .proj.p-joaquin .proj-inner {
      justify-self: start !important;
    }
    .folio .proj.p-joaquin .proj-inner {
      align-self: end !important;
      width: 100%;
    }

    /* Tags y título: asegurar legibilidad sobre las imágenes */
    .folio .proj-inner {
      position: relative !important;
      z-index: 3 !important;
    }
    /* Año (yr) visible en mobile, queda encima del overlay */
    .folio .proj .yr {
      z-index: 4 !important;
    }

    /* Hover overlay: se muestra al TAP (clase .is-active vía JS) */
    .folio .proj .proj-hover {
      opacity: 0;
      pointer-events: none;
      transition: opacity .35s var(--ease);
    }
    .folio .proj.is-active .proj-hover {
      opacity: 1;
      pointer-events: auto;
    }
    /* En .is-active: TODAS las widgets se ocultan (solo se ve el overlay) */
    .folio .proj.is-active .tags,
    .folio .proj.is-active .t-pill,
    .folio .proj.is-active .yr,
    .folio .proj.is-active .proj-inner h3,
    .folio .proj.is-active .proj-top h3,
    .folio .proj.is-active .proj-img,
    .folio .proj.is-active.p-pipol .proj-img,
    .folio .proj.is-active.p-devlane .proj-top h3 {
      opacity: 0 !important;
    }
    /* Mismo tamaño de letra en el overlay para todas las cards (incluida Joaquin) */
    .folio .proj .ph-desc {
      font-size: 14px !important;
      line-height: 1.45 !important;
    }
    .folio .proj .ph-meta > div {
      font-size: 12px !important;
    }
    .folio .proj .ph-meta > div > span {
      font-size: 9px !important;
    }
    /* Cursor pointer para indicar tap */
    .folio .proj {
      cursor: pointer;
    }
    /* Tags / pills SIEMPRE visibles en mobile (no hay hover que los oculte) */
    .folio .proj .tags,
    .folio .proj .t-pill {
      opacity: 1 !important;
    }
    /* Pipol: NO desaparecer la imagen en mobile */
    .folio .proj.p-pipol .proj-img {
      opacity: 1 !important;
    }
    /* Devlane: NO ocultar el título arriba */
    .folio .proj.p-devlane .proj-top h3 {
      opacity: 1 !important;
    }
  }
  @media (max-width: 600px) {
    .folio .proj {
      min-height: 320px !important;
      padding: 22px !important;
    }
    .folio .proj h3 {
      font-size: 30px;
    }
    .folio .proj.p-joaquin {
      min-height: 340px !important;
    }
    .folio .proj.p-joaquin .proj-img {
      width: 45% !important;
      max-width: 170px !important;
    }
  }
  @media (max-width: 480px) {
    .folio .proj h3 {
      font-size: 28px;
    }
    .folio .proj.p-dialecto .proj-img { width: 46% !important; top: 4% !important; right: 4% !important; left: auto !important; bottom: auto !important; }
    .folio .proj.p-pipol .proj-img { width: 60% !important; right: 8% !important; bottom: 0 !important; }
    .folio .proj.p-devlane .proj-img { width: 88% !important; }
    .folio .proj.p-astroselling .proj-img { width: 78% !important; }
    .folio .proj.p-joaquin .proj-img { width: 48% !important; max-width: 160px !important; }
  }

  /* SVC-BLOCK (servicios.html — bloques grandes 2-col) → 1 col + padding ajustado */
  @media (max-width: 900px) {
    .svc-block {
      grid-template-columns: 1fr !important;
      padding: 32px 24px !important;
      gap: 24px !important;
      margin-bottom: 16px;
    }
    .svc-block h3 {
      font-size: 32px !important;
    }
    .svc-block .deliver {
      grid-template-columns: 1fr !important;
    }
    .svc-block .tier {
      flex-wrap: wrap;
      gap: 8px;
    }
    .svc-block .meta-row {
      flex-wrap: wrap;
      gap: 8px;
    }
  }
  @media (max-width: 600px) {
    .svc-block {
      padding: 26px 20px !important;
    }
    .svc-block h3 {
      font-size: 28px !important;
    }
    .svc-block .svc-desc p {
      font-size: 15px !important;
    }
  }

  /* CONTACT FORM — fields row 2-col → 1-col en mobile */
  @media (max-width: 600px) {
    .form-row.row-2 {
      grid-template-columns: 1fr !important;
      gap: 16px !important;
    }
    .contact-form {
      padding: 28px 22px !important;
    }
    .contact-form h3 {
      font-size: 22px !important;
    }
    .form-row input,
    .form-row select,
    .form-row textarea {
      font-size: 16px !important; /* iOS zoom prevention */
    }
    .form-row textarea {
      min-height: 100px;
    }
  }
  @media (max-width: 900px) {
    .contact-grid {
      gap: 16px !important;
    }
    .side-card {
      padding: 24px 22px !important;
    }
    .side-card .big-email {
      font-size: 20px !important;
      word-break: break-word;
    }
  }

  /* BLOG INDEX FEATURED CARD */
  @media (max-width: 900px) {
    .blog-feat {
      grid-template-columns: 1fr !important;
      padding: 28px !important;
      gap: 24px !important;
    }
    .blog-feat h3,
    .blog-feat h2 {
      font-size: clamp(28px, 7vw, 40px) !important;
    }
    .feat-cover {
      min-height: 200px;
    }
  }

  /* NEWSLETTER BAND (blog.html) */
  @media (max-width: 600px) {
    .newsletter-band {
      padding: 36px 24px !important;
    }
    .newsletter-band h3 {
      font-size: clamp(26px, 7vw, 36px) !important;
    }
    .newsletter-form {
      flex-direction: column;
      gap: 10px;
    }
    .newsletter-form input,
    .newsletter-form button {
      width: 100%;
    }
  }

  /* HOME ABOUT — about-mobile layout ya activo en <900px */
  @media (max-width: 600px) {
    .about-mobile {
      margin-top: 20px !important;
    }
    .ab-mobile-bio {
      padding: 22px 20px !important;
    }
    .ab-mobile-bio p {
      font-size: 17px !important;
    }
    .about-stats-mobile .stat-cell {
      min-height: 110px !important;
      padding: 18px !important;
    }
    .about-stats-mobile .stat-cell .n {
      font-size: 38px !important;
    }
  }

  /* HOME CTA (final de la home) */
  @media (max-width: 900px) {
    .cta-big {
      padding: 60px 28px !important;
      min-height: auto !important;
    }
    .cta-big h2 {
      font-size: clamp(40px, 10vw, 80px) !important;
      line-height: 1;
    }
    .cta-big .big {
      font-size: clamp(60px, 16vw, 120px) !important;
    }
    .email-btn {
      font-size: 15px !important;
    }
    .socs {
      flex-wrap: wrap;
      gap: 12px;
    }
    .socs a {
      font-size: 13px;
    }
  }
  @media (max-width: 480px) {
    .cta-big {
      padding: 48px 22px !important;
    }
  }

  /* TESTIMONIALS — forzar single-scroll con ancho de card más amable */
  @media (max-width: 600px) {
    .t-card {
      padding: 28px 24px !important;
    }
    .t-card .q {
      font-size: 16px !important;
      line-height: 1.45;
    }
  }

  /* STAT-GRID (general) — 2 cols en mobile en vez de 4 */
  @media (max-width: 600px) {
    .stat-grid {
      grid-template-columns: repeat(2, 1fr) !important;
      gap: 12px !important;
    }
    .stat-grid .stat-cell {
      min-height: 120px !important;
      padding: 18px !important;
    }
    .stat-grid .stat-cell .n {
      font-size: 36px !important;
    }
  }

  /* SOBRE MÍ — hero 2-col → stack en mobile */
  @media (max-width: 900px) {
    .sobre-hero {
      padding: 70px 0 40px !important;
    }
    .sobre-hero-grid {
      grid-template-columns: 1fr !important;
      gap: 32px !important;
    }
    .sobre-hero-text h1 {
      font-size: clamp(38px, 10vw, 60px) !important;
    }
    /* Forzar foto visible y simplificar container en mobile */
    .sobre-hero-photo {
      width: 100% !important;
      max-width: 340px !important;
      margin: 24px auto 0 !important;
      opacity: 1 !important;
      transform: none !important;
      aspect-ratio: unset !important;
      max-height: none !important;
      height: auto !important;
      position: relative !important;
    }
    .sobre-hero-photo .photo-clip {
      position: relative !important;
      inset: auto !important;
      width: 100% !important;
      height: auto !important;
      border-radius: var(--radius);
      overflow: hidden;
    }
    .sobre-hero-photo .photo-clip img {
      width: 100% !important;
      height: auto !important;
      display: block !important;
      object-fit: contain !important;
    }
    /* Chips dentro del photo container (no fuera con valores negativos) */
    .ph-chip {
      font-size: 11px !important;
      padding: 6px 11px !important;
    }
    .ph-chip.c1 { top: 14px !important; left: 10px !important; }
    .ph-chip.c2 { top: 50% !important; right: 8px !important; left: auto !important; }
    .ph-chip.c3 { bottom: 16px !important; left: 14px !important; }
    /* Short-version + story paragraphs */
    .sobre-block h2,
    .story-text h2 {
      font-size: clamp(30px, 7vw, 44px) !important;
    }
    .sobre-block p,
    .story-text p {
      font-size: 16px !important;
      line-height: 1.55;
    }
  }
  @media (max-width: 600px) {
    .sobre-hero-text h1 {
      font-size: clamp(34px, 11vw, 50px) !important;
    }
    .sobre-hero-photo {
      max-width: 280px;
    }
  }

  /* APPROACH cards — visuales con número grande (mobile) */
  @media (max-width: 700px) {
    .approach-card {
      padding: 28px 24px !important;
    }
    .approach-card h3 {
      font-size: 22px !important;
    }
    .approach-card .num {
      font-size: 32px !important;
      margin-bottom: 14px !important;
    }
  }

  /* BELIEFS — estilo "manifesto list" en mobile (diferente al approach) */
  @media (max-width: 700px) {
    .beliefs-grid {
      gap: 0 !important;
      border-top: 1px solid rgba(20,18,16,.12);
      margin-top: 24px;
    }
    .belief-card,
    .belief-card:nth-child(2),
    .belief-card:nth-child(3),
    .belief-card:nth-child(4) {
      background: transparent !important;
      border: none !important;
      border-bottom: 1px solid rgba(20,18,16,.12) !important;
      border-radius: 0 !important;
      padding: 22px 4px !important;
      display: grid !important;
      grid-template-columns: 38px 1fr !important;
      gap: 8px 14px !important;
      align-items: start;
    }
    .belief-card .bc-n {
      font-family: var(--sans);
      font-style: normal;
      font-weight: 700;
      font-size: 13px;
      color: var(--orange);
      background: rgba(232, 97, 42, 0.1);
      width: 32px;
      height: 32px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 0 !important;
      grid-row: 1 / 3;
    }
    .belief-card h3 {
      grid-column: 2;
      grid-row: 1;
      font-size: 17px !important;
      margin: 6px 0 6px !important;
      line-height: 1.25 !important;
    }
    .belief-card p {
      grid-column: 2;
      grid-row: 2;
      font-size: 14px !important;
      line-height: 1.5;
    }
  }

  /* FOCUS BANNER (sobre-mi) */
  @media (max-width: 900px) {
    .focus-banner {
      padding: 40px 24px !important;
    }
    .focus-banner h2 {
      font-size: clamp(28px, 7vw, 44px) !important;
    }
    .focus-banner p {
      font-size: 16px !important;
    }
  }

  /* PROCESS TIMELINE (servicios) — cards más compactas */
  @media (max-width: 900px) {
    .step-card {
      padding: 24px 22px !important;
    }
    .step-card h3 {
      font-size: 19px !important;
    }
    .step-card p {
      font-size: 14px !important;
    }
  }

  /* FAQ ITEMS (servicios) — más compactas en mobile */
  @media (max-width: 700px) {
    .faq-list {
      gap: 8px !important;
      margin-top: 28px !important;
    }
    .faq-item {
      border-radius: 14px;
    }
    .faq-q {
      padding: 16px 18px !important;
      font-size: 15px !important;
      gap: 12px !important;
      line-height: 1.3;
    }
    .faq-q .ico {
      width: 28px !important;
      height: 28px !important;
      font-size: 16px !important;
      flex-shrink: 0;
    }
    .faq-a p {
      padding: 0 18px 18px !important;
      font-size: 14px !important;
      line-height: 1.5 !important;
    }
  }

  /* BLOG ARTICLE (posts individuales) */
  @media (max-width: 900px) {
    .article-hero {
      padding: 40px 0 20px !important;
    }
    .article-hero h1 {
      font-size: clamp(32px, 8vw, 52px) !important;
      line-height: 1.05;
      letter-spacing: -.025em;
    }
    .article-hero .lead {
      font-size: 17px !important;
    }
    .article-body {
      padding: 0 !important;
    }
    .article-body p,
    .article-body li {
      font-size: 16px !important;
      line-height: 1.65;
    }
    .article-body h2 {
      font-size: 26px !important;
      margin-top: 36px !important;
    }
    .article-body h3 {
      font-size: 20px !important;
    }
    .article-image {
      margin: 24px 0 !important;
    }
    .rc-img {
      min-height: 140px;
    }
  }

  /* HERO CTAs — botones más compactos + full width en mobile chico */
  @media (max-width: 600px) {
    .hero-ctas {
      width: 100%;
      justify-content: center;
    }
    .hero-ctas .btn {
      font-size: 14px;
      padding: 13px 8px 13px 20px;
    }
    .hero-ctas .btn .a {
      width: 30px;
      height: 30px;
    }
  }
  @media (max-width: 420px) {
    .hero-ctas {
      flex-direction: column;
      width: 100%;
    }
    .hero-ctas .btn {
      width: 100%;
      justify-content: center;
    }
  }

  /* FOOTER — ya existe mobile, solo ajuste fino */
  @media (max-width: 600px) {
    footer {
      padding: 60px 0 40px;
    }
    .foot-top {
      gap: 32px;
    }
    .foot-brand p {
      font-size: 14px;
      line-height: 1.5;
    }
    .foot-col h4 {
      font-size: 13px;
    }
    .foot-col ul a {
      font-size: 14px;
    }
    .foot-logo {
      font-size: 16px;
    }
  }

  /* WRAP padding horizontal mínimo para que el contenido no toque bordes */
  @media (max-width: 480px) {
    .wrap {
      padding-left: 18px;
      padding-right: 18px;
    }
  }

  /* 404 page */
  @media (max-width: 900px) {
    .err-section {
      padding: 60px 0;
    }
    .err-num {
      font-size: clamp(120px, 30vw, 220px) !important;
    }
    .err-block h1 {
      font-size: clamp(32px, 7.5vw, 52px) !important;
    }
    .err-block p {
      font-size: 16px !important;
    }
  }
  @media (max-width: 480px) {
    .err-links {
      gap: 8px;
    }
    .err-links a {
      font-size: 13px;
      padding: 5px 10px;
    }
  }

  /* SCROLL HORIZONTAL — prevenir overflow en mobile
     IMPORTANTE: usar `clip` y NO `hidden` porque `overflow:hidden`
     rompe position:sticky en descendants (bug conocido). */
  @media (max-width: 900px) {
    html, body {
      overflow-x: clip;
    }
  }

  /* ===========================================================
     SERVICIOS — STICKY STACK SCROLL (solo desktop ≥901px)
     Efecto moderno: el page-hero queda sticky arriba mientras
     las cards se apilan debajo con offset incremental.
     Inspirado en Linear, Vercel, Apple.
     =========================================================== */
  @media (min-width: 901px) {
    /* Wrapper que define el scope sticky (engloba page-hero + cards) */
    .svc-stack-wrap {
      position: relative;
    }

    /* Page-hero sticky: el título "Ways we can work together"
       queda visible arriba mientras scrolleás las cards.
       Estado inicial expansivo, se compacta cuando hace stuck. */
    .svc-stack-wrap .svc-page-hero {
      position: sticky;
      top: 70px;
      z-index: 50;
      background: var(--cream);
      padding: 80px 0 50px !important;
      border-bottom: 1px solid transparent;
      transition:
        padding .35s var(--ease),
        border-color .35s var(--ease);
    }
    .svc-stack-wrap .svc-page-hero h1 {
      font-size: clamp(48px, 6.5vw, 80px) !important;
      margin-bottom: 22px !important;
      transition: font-size .35s var(--ease), margin-bottom .35s var(--ease);
    }
    .svc-stack-wrap .svc-page-hero .lead {
      font-size: 18px !important;
      max-width: 600px;
      transition: font-size .35s var(--ease), opacity .35s var(--ease), max-height .35s var(--ease);
      max-height: 100px;
      overflow: hidden;
      opacity: 1;
    }
    .svc-stack-wrap .svc-page-hero .sec-label {
      margin-bottom: 22px;
      transition: opacity .35s var(--ease), margin-bottom .35s var(--ease);
    }

    /* Estado STUCK: page-hero compacto (lo agrega el JS via IntersectionObserver) */
    .svc-stack-wrap .svc-page-hero.is-stuck {
      padding: 22px 0 18px !important;
      border-bottom-color: rgba(20,18,16,.08);
    }
    .svc-stack-wrap .svc-page-hero.is-stuck h1 {
      font-size: clamp(28px, 3.5vw, 38px) !important;
      margin-bottom: 0 !important;
    }
    .svc-stack-wrap .svc-page-hero.is-stuck .lead {
      max-height: 0;
      opacity: 0;
      margin-top: 0;
    }
    .svc-stack-wrap .svc-page-hero.is-stuck .sec-label {
      opacity: 0;
      margin-bottom: 0;
      max-height: 0;
      overflow: hidden;
      padding: 0;
    }

    /* Desactivar reveal animation en svc-block (sticky se encarga del look) */
    .svc-block.reveal {
      opacity: 1 !important;
      transform: none !important;
      transition: none !important;
    }

    .svc-block {
      position: sticky;
      will-change: transform;
      margin-bottom: 18px;
      /* Sombra arriba sutil + sombra abajo fuerte = sentido de "card encima" */
      box-shadow:
        0 -4px 14px -4px rgba(20,18,16,.06),
        0 28px 60px -20px rgba(20,18,16,.10);
      transition: box-shadow .3s var(--ease);
    }

    /* Cada card stuck POR DEBAJO del page-hero stuck compacto (~140px alto) */
    .svc-block:nth-child(1) { top: 160px; z-index: 1; }
    .svc-block:nth-child(2) { top: 180px; z-index: 2; }
    .svc-block:nth-child(3) { top: 200px; z-index: 3; }
    .svc-block:nth-child(4) { top: 220px; z-index: 4; }
    .svc-block:nth-child(5) { top: 240px; z-index: 5; }
    .svc-block:nth-child(6) { top: 260px; z-index: 6; }

    /* Hover sutil — reemplaza el translateY que rompía sticky */
    .svc-block:hover {
      transform: none !important;
      box-shadow:
        0 -4px 14px -4px rgba(20,18,16,.08),
        0 36px 80px -20px rgba(20,18,16,.18);
    }

    /* Scroll-driven animation (Chrome/Edge 115+):
       cuando la card sale por arriba, se achica + reduce opacity.
       Refuerza la sensación de que las anteriores quedan "atrás" en el stack. */
    @supports (animation-timeline: view()) {
      .svc-block {
        animation: svcStackOut linear forwards;
        animation-timeline: view();
        animation-range: exit 0% exit 80%;
      }
      @keyframes svcStackOut {
        to {
          transform: scale(.96);
          opacity: .55;
          filter: brightness(.92);
        }
      }
    }

    /* Respeta prefers-reduced-motion */
    @media (prefers-reduced-motion: reduce) {
      .svc-block {
        position: relative;
        animation: none;
      }
    }
  }

  /* ===========================================================
     ENHANCEMENTS — form spinner, newsletter success,
     scroll progress bar, share buttons (blog posts)
     =========================================================== */

  /* 1. Loading spinner en submit del contact form */
  .form-send.is-loading {
    pointer-events: none;
    opacity: .85;
  }
  .form-send.is-loading .a {
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    background: none !important;
    animation: form-spinner .7s linear infinite;
  }
  @keyframes form-spinner {
    to { transform: rotate(360deg); }
  }

  /* 2. Newsletter inline success state */
  .newsletter-form.is-success input,
  .newsletter-form.is-success button {
    display: none;
  }
  .newsletter-form.is-success::after {
    content: "✓ Thanks! Check your inbox.";
    display: block;
    text-align: center;
    font-weight: 600;
    color: var(--orange);
    padding: 14px 20px;
    font-size: 16px;
    width: 100%;
    animation: fade-in .4s ease-out;
  }
  html[data-lang="es"] .newsletter-form.is-success::after {
    content: "✓ ¡Gracias! Revisá tu inbox.";
  }
  @keyframes fade-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* 3. Scroll progress bar (top of viewport, blog posts only) */
  .scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--orange);
    z-index: 9999;
    width: 0%;
    transition: width .12s ease-out;
    will-change: width;
  }

  /* 4. Article share buttons (blog posts) */
  .article-share-wrap {
    margin: 56px auto 0;
    max-width: 720px;
    padding: 0 24px;
  }
  .article-share {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 28px 0;
    border-top: 1px solid rgba(20,18,16,.1);
    border-bottom: 1px solid rgba(20,18,16,.1);
    flex-wrap: wrap;
  }
  .article-share .share-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-soft);
  }
  .article-share .share-btns {
    display: flex;
    gap: 8px;
  }
  .article-share .share-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--cream-2);
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .25s var(--ease), transform .25s var(--ease), color .25s;
    border: none;
    cursor: pointer;
  }
  .article-share .share-btn:hover {
    background: var(--ink);
    color: var(--cream);
    transform: translateY(-2px);
  }
  .article-share .share-btn svg {
    width: 18px;
    height: 18px;
  }
  .article-share .share-btn.is-copied {
    background: var(--orange);
    color: var(--cream);
  }
  .article-share .share-btn.is-copied::before {
    content: "Copied!";
    position: absolute;
    margin-top: -50px;
    font-size: 11px;
    font-weight: 700;
    background: var(--ink);
    color: var(--cream);
    padding: 4px 10px;
    border-radius: var(--pill);
    white-space: nowrap;
  }
  @media (max-width: 600px) {
    .article-share-wrap { padding: 0 18px; margin-top: 40px; }
    .article-share { padding: 22px 0; gap: 14px; }
    .article-share .share-btn { width: 38px; height: 38px; }
    .article-share .share-btn svg { width: 16px; height: 16px; }
  }


  /* ===========================================================
     FIXES BATCH — banner lang, nav mobile (Let's Talk arriba),
     trusted by logos, featured blog title, newsletter mobile,
     stats sin naranja, etc.
     =========================================================== */

  /* 1. Stats: sin naranja en el .italic dentro de .stat-cell .n */
  .stat-cell .n .italic {
    color: inherit !important;
    font-style: normal;
    font-family: var(--sans);
    font-weight: inherit;
  }

  /* 2. Banner lang — compacto en mobile (texto arriba, botones lado a lado) */
  @media (max-width: 700px) {
    .lang-banner {
      bottom: 14px !important;
      left: 14px !important;
      right: 14px !important;
      max-width: none !important;
      transform: translateY(140%) !important;
      opacity: 0;
      display: grid !important;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: auto auto;
      align-items: center;
      column-gap: 8px !important;
      row-gap: 8px !important;
      padding: 12px 14px !important;
      padding-right: 36px !important;
      border-radius: 16px !important;
      background: var(--ink) !important;
      box-shadow: 0 12px 36px rgba(20,18,16,.35);
    }
    .lang-banner.show {
      transform: translateY(0) !important;
      opacity: 1;
    }
    .lang-banner-text {
      grid-column: 1 / -1;
      font-size: 13px !important;
      font-weight: 500 !important;
      line-height: 1.25 !important;
      margin: 0 !important;
      padding-right: 18px;
      color: var(--cream);
    }
    .lang-banner-btn {
      width: 100%;
      text-align: center;
      padding: 8px 8px !important;
      font-size: 12px !important;
      border-radius: var(--pill) !important;
      font-weight: 600;
      letter-spacing: -.005em;
    }
    .lang-banner-btn:not(.primary) {
      background: rgba(255,255,255,.08) !important;
      border-color: transparent !important;
    }
    .lang-banner-btn.primary {
      background: var(--orange) !important;
      color: var(--cream) !important;
      border-color: var(--orange) !important;
    }
    .lang-banner-close {
      position: absolute !important;
      top: 6px;
      right: 8px;
      font-size: 18px !important;
      width: 24px;
      height: 24px;
      line-height: 1;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 !important;
      opacity: .6;
    }
  }
  /* Desktop / tablet — pill horizontal compact */
  @media (min-width: 701px) {
    .lang-banner {
      border-radius: var(--pill) !important;
      padding: 12px 16px 12px 22px !important;
      gap: 12px !important;
    }
  }

  /* 3. Nav mobile — INVERTIR: mostrar .nav-cta arriba, ocultar .lang-toggle del nav */
  @media (max-width: 900px) {
    .nav .nav-cta { display: inline-flex !important; }
    .nav .lang-toggle { display: none !important; }
    .nav .wrap {
      display: flex !important;
      align-items: center;
      gap: 10px;
    }
    .nav .nav-logo { margin-right: auto; }

    /* Menu lang buttons (dentro del overlay del hamburger) */
    .nav-links li.mobile-lang-li {
      display: flex !important;
      gap: 8px;
      padding: 18px 0 !important;
      border-bottom: none !important;
    }
    .menu-lang-btn {
      flex: 1;
      padding: 12px 24px;
      border: 1px solid rgba(20,18,16,.15);
      background: transparent;
      border-radius: var(--pill);
      font-size: 15px;
      font-weight: 600;
      color: var(--ink);
      cursor: pointer;
      transition: background .2s, color .2s, border-color .2s;
    }
    .menu-lang-btn.active {
      background: var(--ink);
      color: var(--cream);
      border-color: var(--ink);
    }

    /* Compactar el CTA "Let's Talk" en el nav mobile */
    .nav .nav-cta {
      padding: 7px 6px 7px 14px;
      font-size: 13px;
      gap: 8px;
    }
    .nav .nav-cta .dot { width: 26px; height: 26px; font-size: 13px; }
    .nav .nav-cta .pulse { display: none; }
  }

  /* 4. Trusted by logos — fix definitivo (mobile + desktop) */
  .logos-track {
    animation: logoScroll 40s linear infinite !important;
    display: flex !important;
    will-change: transform;
  }
  /* Forzar la animación incluso si el sistema tiene prefers-reduced-motion */
  @media (prefers-reduced-motion: reduce) {
    .logos-track { animation: logoScroll 40s linear infinite !important; }
  }
  @media (max-width: 600px) {
    /* Sacar el mask-image en mobile (puede romper rendering en algunos browsers) */
    .logos-track-wrap {
      mask-image: none !important;
      -webkit-mask-image: none !important;
    }
    .logos-track { animation-duration: 28s !important; gap: 40px !important; }
    .logos-img { height: 44px !important; }
  }

  /* 5. Featured blog card — title visible en mobile (background opaco) */
  @media (max-width: 900px) {
    .blog-feat {
      background: var(--cream-2) !important;
    }
    .blog-feat .feat-cover {
      background: var(--ink) !important;
      color: var(--cream) !important;
      padding: 36px 28px !important;
      min-height: 200px;
      display: flex !important;
      flex-direction: column;
      justify-content: center;
    }
    .blog-feat .feat-cover .tag {
      color: var(--orange) !important;
      background: rgba(255,255,255,.1);
    }
    .blog-feat .feat-cover h2,
    .blog-feat .feat-cover h3 {
      color: var(--cream) !important;
      font-size: clamp(26px, 6.5vw, 36px) !important;
      line-height: 1.05;
      margin: 12px 0 0;
    }
    .blog-feat .feat-cover h2 .italic,
    .blog-feat .feat-cover h3 .italic {
      color: var(--orange) !important;
    }
    .blog-feat .feat-body {
      padding: 24px 28px 32px !important;
    }
  }

  /* 6. Newsletter band mobile — fix completo */
  @media (max-width: 900px) {
    .newsletter-band {
      padding: 32px 22px !important;
      margin-top: 32px !important;
      border-radius: 20px !important;
      text-align: center;
    }
    /* Achicar el ✦ gigante decorativo en mobile (era 320px) */
    .newsletter-band::before {
      font-size: 140px !important;
      top: -30px !important;
      left: -20px !important;
      opacity: .6;
    }
    .newsletter-band h3 {
      font-size: clamp(22px, 6.5vw, 30px) !important;
      margin-bottom: 8px !important;
      line-height: 1.05 !important;
    }
    .newsletter-band p {
      font-size: 14px !important;
      line-height: 1.45 !important;
      margin-bottom: 18px !important;
    }
    .newsletter-form {
      flex-direction: column !important;
      gap: 10px !important;
      width: 100% !important;
      max-width: 100% !important;
    }
    .newsletter-form input[type="email"] {
      width: 100% !important;
      flex: none !important;
      padding: 13px 18px !important;
      font-size: 14px !important;
      background: rgba(255,255,255,.10) !important;
    }
    .newsletter-form button {
      width: 100% !important;
      padding: 13px 20px !important;
      font-size: 14px !important;
    }
  }
  @media (max-width: 480px) {
    .newsletter-band {
      padding: 28px 18px !important;
    }
    .newsletter-band::before {
      font-size: 100px !important;
      top: -20px !important;
      left: -16px !important;
    }
  }