/* Fuentes locales (Google Fonts, licencia OFL): sin conexiones externas. */
@font-face {
  font-family: 'Big Shoulders Display';
  font-style: normal;
  font-weight: 700 900;
  font-display: swap;
  src: url(../fonts/bigshouldersdisplay-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Big Shoulders Display';
  font-style: normal;
  font-weight: 700 900;
  font-display: swap;
  src: url(../fonts/bigshouldersdisplay-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/instrumentsans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/instrumentsans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url(../fonts/jetbrainsmono-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url(../fonts/jetbrainsmono-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

  :root {
    --mineral: #eef0e8;
    --mineral-2: #e3e7da;
    --grafito: #22271e;
    --grafito-2: #2d3328;
    --tinta: #1c2016;
    --gris: #5a6152;
    --borde: #c9cfbd;
    --lima: #b5cf52;
    --lima-oscuro: #55691a;
    --blanco: #fbfcf8;
    --display: "Big Shoulders Display", "Arial Narrow", "Roboto Condensed", sans-serif;
    --sans: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
    --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
    --ancho: 1240px;
    --gutter: clamp(16px, 4vw, 40px);
  }
  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
  body {
    margin: 0;
    background: var(--mineral);
    color: var(--tinta);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
  }
  img { max-width: 100%; display: block; }
  a { color: inherit; }
  :focus-visible { outline: 3px solid var(--lima); outline-offset: 2px; }
  .wrap { max-width: var(--ancho); margin-inline: auto; padding-inline: var(--gutter); }
  h1, h2, h3 { font-family: var(--display); font-weight: 800; line-height: .92; letter-spacing: -.005em; margin: 0; text-wrap: balance; }
  .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
  .eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--gris); }

  /* Botones: rectos, borde marcado */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    font-family: var(--sans); font-weight: 600; font-size: 16px; line-height: 1;
    padding: 16px 22px; border: 2px solid var(--grafito); border-radius: 0;
    text-decoration: none; cursor: pointer; transition: transform .12s ease, box-shadow .12s ease;
  }
  .btn:hover { transform: translate(-2px, -2px); box-shadow: 3px 3px 0 var(--grafito); }
  .btn-lima { background: var(--lima); color: var(--tinta); }
  .btn-grafito { background: var(--grafito); color: var(--blanco); }
  .btn-contorno { background: transparent; color: var(--tinta); }
  .btn svg { width: 20px; height: 20px; flex: none; }

  /* Aviso de maqueta */
  .aviso { background: var(--grafito); color: #cfd5c4; font-size: 13px; text-align: center; padding: 8px var(--gutter); }
  .aviso strong { color: var(--lima); font-weight: 600; }

  /* Header */
  .cabecera { background: var(--mineral); border-bottom: 1px solid var(--borde); position: sticky; top: 0; z-index: 20; }
  .admin-bar .cabecera { top: 32px; }
  @media (max-width: 782px) { .admin-bar .cabecera { top: 46px; } }
  .nav { display: flex; align-items: center; gap: 28px; height: 76px; }
  .logo { font-family: var(--display); font-weight: 900; font-size: 38px; letter-spacing: -.01em; text-decoration: none; line-height: 1; margin-right: auto; }
  .logo span { color: var(--lima-oscuro); }
  .pie .logo span { color: var(--lima); }
  .titulo-seccion h2 em, .porque h2 em { font-style: normal; color: var(--lima-oscuro); }
  .nav-escritorio ul { display: flex; gap: 30px; list-style: none; margin: 0; padding: 0; font-weight: 500; }
  .nav-escritorio ul a { text-decoration: none; }
  .nav-escritorio .current-menu-item > a { text-decoration: underline; text-decoration-color: var(--lima); text-decoration-thickness: 3px; text-underline-offset: 6px; }
  .nav-escritorio ul a:hover { text-decoration: underline; text-decoration-color: var(--lima); text-decoration-thickness: 3px; text-underline-offset: 6px; }
  .menu-movil { display: none; }

  /* Hero */
  .hero { display: grid; grid-template-columns: 40fr 60fr; min-height: 540px; }
  .hero-foto { min-height: 280px; background: var(--grafito-2); }
  .hero-foto img { width: 100%; height: 100%; object-fit: cover; }
  .hero-panel { background: var(--grafito); color: var(--blanco); display: grid; grid-template-columns: 1fr minmax(320px, 370px); gap: 36px; align-items: center; padding: 48px clamp(20px, 3vw, 44px); }
  .hero h1 { font-size: clamp(52px, 5.3vw, 80px); }
  .hero h1 span { white-space: nowrap; }
  .hero h1 em { font-style: normal; color: var(--lima); display: block; }
  .hero p.bajada { font-size: 19px; color: #d8ddd0; max-width: 30ch; margin: 28px 0 0; }

  /* Calculadora */
  .calc { background: var(--blanco); color: var(--tinta); padding: 28px; border: 2px solid var(--grafito); box-shadow: 8px 8px 0 var(--lima); }
  .calc h2 { font-size: 38px; margin-bottom: 18px; }
  .campos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .campo label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 6px; }
  .campo input, .campo select {
    width: 100%; font: 500 18px var(--mono); padding: 12px 12px; background: #fff;
    border: 1.5px solid var(--borde); border-radius: 0; color: var(--tinta); appearance: none;
  }
  .campo select { font-family: var(--sans); font-size: 17px; background-image: linear-gradient(45deg, transparent 50%, var(--tinta) 50%), linear-gradient(135deg, var(--tinta) 50%, transparent 50%); background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%; background-size: 6px 6px; background-repeat: no-repeat; }
  .campo input:focus, .campo select:focus { border-color: var(--grafito); outline: none; box-shadow: 0 0 0 3px var(--lima); }
  .campo.tela { grid-column: 1 / -1; }
  .minimo { font-size: 13px; color: var(--gris); margin-top: 6px; }
  .error { font-size: 13px; color: #9b2c1f; margin-top: 6px; min-height: 0; }
  .resultado { border-top: 1px solid var(--borde); margin-top: 18px; padding-top: 16px; }
  .resultado .rot { font-weight: 600; font-size: 17px; }
  .total { font-family: var(--mono); font-weight: 700; font-size: clamp(40px, 4.6vw, 56px); line-height: 1.05; letter-spacing: -.02em; }
  .detalle { font-family: var(--mono); font-size: 14px; color: var(--gris); }
  .nota-min { font-size: 13px; background: #f1f5df; border-left: 3px solid var(--lima-oscuro); padding: 8px 10px; margin-top: 10px; }
  .calc .btn { width: 100%; margin-top: 18px; font-size: 18px; padding: 18px; }

  /* Beneficios */
  .beneficios { border-bottom: 1px solid var(--borde); }
  .beneficios ul { list-style: none; margin: 0 auto; padding: 18px var(--gutter); display: flex; justify-content: center; flex-wrap: wrap; }
  .beneficios li { display: flex; align-items: center; gap: 12px; justify-content: center; padding: 6px clamp(10px, 1.5vw, 24px); white-space: nowrap; font-weight: 500; font-size: 15px; }
  .beneficios li + li { border-left: 1px solid var(--borde); }
  .beneficios svg { width: 30px; height: 30px; flex: none; stroke: var(--tinta); fill: none; stroke-width: 1.6; }

  /* Secciones */
  section.bloque { padding-block: clamp(44px, 5.5vw, 72px); }
  .titulo-seccion h2 { font-size: clamp(44px, 5vw, 68px); }
  .titulo-seccion p { font-size: 19px; margin: 10px 0 0; color: var(--gris); }
  .subrayado { display: block; width: 90px; height: 5px; background: var(--lima); margin-top: 10px; }

  /* Precios */
  .productos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 32px; }
  .prod { background: var(--blanco); border: 1.5px solid var(--grafito); padding: 10px; display: flex; flex-direction: column; }
  .prod img { aspect-ratio: 16 / 8.5; object-fit: cover; width: 100%; }
  .prod-cuerpo { padding: 14px 6px 6px; display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: end; flex: 1; }
  .prod h3 { font-size: 30px; grid-column: 1 / -1; }
  .prod .que { grid-column: 1 / -1; font-size: 15px; color: var(--gris); margin: 0 0 8px; }
  .prod .precio { font-family: var(--mono); font-weight: 500; font-size: 30px; letter-spacing: -.02em; line-height: 1.1; }
  .prod .precio small { font-size: 18px; }
  .prod .min { font-size: 14px; color: var(--gris); }
  .prod .btn { grid-row: 3 / span 2; grid-column: 2; padding: 13px 16px; font-size: 15px; }

  /* Medir + Por qué */
  .dos { display: grid; grid-template-columns: 58fr 42fr; }
  .medir { background: var(--grafito); color: var(--blanco); padding: clamp(48px, 6vw, 80px) clamp(20px, 4vw, 56px); display: grid; grid-template-columns: 1fr 1fr; gap: 24px 36px; align-items: center; }
  .medir h2 { font-size: clamp(52px, 6vw, 84px); grid-column: 1 / -1; }
  .medir h2 em { font-style: normal; color: var(--lima); display: block; }
  .pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: 26px; counter-reset: paso; }
  .pasos li { display: grid; grid-template-columns: 64px 1fr; gap: 16px; align-items: start; }
  .pasos li::before { counter-increment: paso; content: "0" counter(paso); font-family: var(--mono); font-weight: 700; font-size: 34px; color: var(--lima); line-height: 1; border-right: 1px solid #4b5245; padding-right: 12px; }
  .pasos strong { display: block; font-size: 19px; }
  .pasos span { color: #cfd5c4; font-size: 15px; }
  .ventana { width: 100%; max-width: 330px; justify-self: center; }
  .ventana * { vector-effect: non-scaling-stroke; }
  .medir .link { grid-column: 1 / -1; color: var(--blanco); font-weight: 500; text-underline-offset: 6px; text-decoration-color: var(--lima); }
  .porque { background: var(--mineral); padding: clamp(48px, 6vw, 80px) clamp(20px, 4vw, 56px); }
  .porque h2 { font-size: clamp(52px, 6vw, 84px); margin-bottom: 20px; }
  .porque ul { list-style: none; margin: 0; padding: 0; }
  .porque li { display: grid; grid-template-columns: 64px 1fr; gap: 20px; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--borde); font-size: 19px; line-height: 1.3; }
  .porque li:last-child { border-bottom: 0; }
  .porque svg { width: 52px; height: 52px; stroke: var(--tinta); fill: none; stroke-width: 1.5; border-right: 1px solid var(--borde); padding-right: 10px; box-sizing: content-box; }
  .porque b { font-family: var(--mono); font-weight: 700; }

  /* Testimonios + blog */
  .testimonios { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 28px; }
  .testi { margin: 0; border: 1.5px solid var(--grafito); padding: 26px 26px 22px; display: flex; flex-direction: column; justify-content: space-between; gap: 22px; background: var(--mineral); }
  .testi blockquote { margin: 0; font-size: 18px; line-height: 1.45; }
  .testi figcaption { font-size: 14px; }
  .blog-head { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin-top: clamp(56px, 7vw, 88px); flex-wrap: wrap; }
  .link-flecha { font-weight: 500; text-decoration: underline; text-decoration-color: var(--lima); text-decoration-thickness: 3px; text-underline-offset: 7px; }
  .posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 28px; }
  .post { border: 1.5px solid var(--grafito); text-decoration: none; background: var(--blanco); display: flex; flex-direction: column; }
  .post img { aspect-ratio: 500 / 204; object-fit: cover; width: 100%; border-bottom: 1.5px solid var(--grafito); }
  .post div { padding: 18px 22px 20px; display: grid; gap: 8px; }
  .post h3 { font-size: 30px; line-height: .98; }
  .post:hover h3 { text-decoration: underline; text-decoration-color: var(--lima); text-decoration-thickness: 3px; }
  .post time { font-family: var(--mono); font-size: 14px; }

  /* Cierre + footer */
  .cierre { background: var(--lima); padding-block: clamp(56px, 7vw, 88px); }
  .cierre h2 { font-size: clamp(50px, 7vw, 100px); }
  .cierre p { font-size: 20px; margin: 14px 0 28px; }
  .acciones { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
  .acciones .tel { font-family: var(--mono); font-weight: 700; font-size: 26px; letter-spacing: .02em; margin-left: 8px; }
  .pie { background: var(--grafito); color: #e6e9df; padding-block: 64px 28px; }
  .cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 32px; }
  .pie .logo { color: var(--blanco); font-size: 64px; display: inline-block; margin-bottom: 14px; }
  .pie-titulo { font-family: var(--sans); font-weight: 600; margin: 6px 0 14px; font-size: 18px; letter-spacing: 0; }
  .pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
  .pie a { text-decoration: none; }
  .pie a:hover { text-decoration: underline; text-decoration-color: var(--lima); }
  .legal { border-top: 1px solid #4b5245; margin-top: 44px; padding-top: 18px; font-size: 14px; color: #aab1a0; }

  /* Barra fija WhatsApp (celular) */
  .barra-wsp { display: none; }

  /* ---------- Tablet ---------- */
  @media (max-width: 1100px) {
    .hero { grid-template-columns: 1fr; }
    .hero-foto { min-height: 300px; }
    .hero-panel { grid-template-columns: 1fr; }
    .productos, .testimonios, .posts { grid-template-columns: repeat(2, 1fr); }
    .dos { grid-template-columns: 1fr; }
    .beneficios ul { grid-template-columns: repeat(3, 1fr); row-gap: 10px; }
    .beneficios li:nth-child(4) { border-left: 0; }
    .cols { grid-template-columns: 1fr 1fr; }
  }

  /* ---------- Celular ---------- */
  @media (max-width: 760px) {
    body { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
    .nav { height: 62px; gap: 14px; }
    .logo { font-size: 32px; }
    .nav-escritorio, .nav .btn-wsp-nav { display: none; }
    .menu-movil { display: flex; align-items: center; gap: 6px; }
    .icono-btn { width: 44px; height: 44px; display: grid; place-items: center; border: 2px solid var(--grafito); background: var(--mineral); cursor: pointer; }
    .icono-btn svg { width: 22px; height: 22px; }
    .icono-btn.wsp { background: var(--lima); }
    .menu-desplegable > summary { list-style: none; }
    .menu-desplegable > summary::-webkit-details-marker { display: none; }
    .menu-desplegable[open] .panel-menu { display: block; }
    .menu-desplegable .cerrar, .menu-desplegable[open] .abrir { display: none; }
    .menu-desplegable[open] .cerrar { display: inline; }
    .panel-menu ul { list-style: none; margin: 0; padding: 0; }
    .panel-menu { display: none; position: fixed; left: 0; right: 0; top: calc(62px + env(safe-area-inset-top, 0px)); bottom: 0; background: var(--grafito); padding: 12px var(--gutter) 32px; overflow-y: auto; z-index: 40; }
    .panel-menu a:not(.btn) { display: block; color: var(--blanco); font-family: var(--display); font-weight: 800; font-size: 52px; line-height: 1.1; padding: 14px 0; text-decoration: none; border-bottom: 1px solid #4b5245; }
    .panel-menu .btn { width: 100%; margin-top: 32px; font-size: 18px; }
    .panel-menu p { color: var(--blanco); text-align: center; font-size: 20px; margin: 16px 0 0; }


    .hero-foto { display: none; }
    .hero-panel { padding: 28px var(--gutter) 36px; gap: 24px; }
    .hero h1 { font-size: clamp(44px, 13.5vw, 60px); }
    .hero p.bajada { font-size: 17px; margin-top: 16px; }
    .calc { padding: 20px; box-shadow: 6px 6px 0 var(--lima); }
    .calc h2 { font-size: 32px; }
    .resultado { display: grid; grid-template-columns: 1fr auto; align-items: end; column-gap: 12px; }
    .resultado .rot { grid-column: 1; grid-row: 1; align-self: center; }
    .resultado .total { grid-column: 2; grid-row: 1; font-size: 40px; }
    .resultado .detalle { grid-column: 1 / -1; grid-row: 2; font-size: 13px; text-align: right; }
    .resultado .nota-min { grid-column: 1 / -1; }

    .beneficios ul { grid-template-columns: 1fr 1fr; padding: 14px 0; }
    .beneficios li { justify-content: flex-start; border-left: 0 !important; font-size: 14px; padding: 8px 4px; }
    .beneficios li:last-child { grid-column: 1 / -1; }

    .productos, .testimonios, .posts { grid-template-columns: 1fr; }
    .prod h3 { font-size: 28px; }
    .prod-cuerpo { grid-template-columns: 1fr; }
    .prod .btn { grid-row: auto; grid-column: 1; width: 100%; margin-top: 10px; }
    .prod .precio { order: 1; } .prod .min { order: 2; } .prod .btn { order: 3; }
    .medir { grid-template-columns: 1.15fr .85fr; gap: 24px 16px; }
    .medir h2 { font-size: 56px; }
    .pasos { gap: 0; }
    .pasos li { grid-template-columns: 44px 1fr; gap: 10px; padding: 14px 0; border-bottom: 1px solid #4b5245; }
    .pasos li:last-child { border-bottom: 0; }
    .pasos li::before { font-size: 26px; }
    .pasos span { display: none; }
    .pasos strong { font-weight: 500; font-size: 17px; line-height: 1.25; }
    .ventana { max-width: 100%; }
    .porque h2 { font-size: 56px; }
    .porque li { grid-template-columns: 40px 1fr; font-size: 16px; padding: 14px 0; }
    .porque svg { width: 30px; height: 30px; border-right: 0; padding-right: 0; }
    .cols { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
    .cols > div:first-child, .cols > div:last-child { grid-column: 1 / -1; }
    .post { flex-direction: row; }
    .post img { width: 42%; aspect-ratio: auto; border-bottom: 0; border-right: 1.5px solid var(--grafito); }
    .post div { padding: 14px; align-content: center; }
    .post h3 { font-size: 22px; }
    .post .eyebrow { display: none; }
    .testi { padding: 18px; gap: 12px; }
    .testi blockquote { font-size: 16px; }
    .pie .logo { font-size: 52px; }
    .acciones .tel { margin-left: 0; width: 100%; }
    .acciones .btn { flex: 1 1 100%; }

    .barra-wsp {
      display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
      background: var(--mineral); border-top: 1px solid var(--borde);
      padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom, 0px));
    }
    .barra-wsp .btn { width: 100%; font-size: 18px; padding: 16px; }
  }

  /* ---------- Ficha de producto ---------- */
  .migas { font-size: 14px; padding-block: 22px 18px; color: var(--gris); }
  .migas a { text-decoration: underline; text-decoration-color: var(--borde); text-underline-offset: 3px; color: var(--tinta); }
  .migas a:hover { text-decoration: underline; }
  .ficha { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-areas: "gal cab" "gal compra"; column-gap: 48px; row-gap: 0; align-items: start; }
  .ficha-cabecera { grid-area: cab; }
  .ficha-compra { grid-area: compra; }
  .galeria { grid-area: gal; display: grid; gap: 10px; position: sticky; top: 92px; }
  .g-escenario { position: relative; border: 1.5px solid var(--grafito); background: var(--mineral-2); overflow: hidden; }
  .g-ampliar { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
  .g-ampliar img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .4s ease; }
  .g-ampliar:hover img { transform: scale(1.02); }
  .g-flecha { position: absolute; top: 50%; translate: 0 -50%; width: 46px; height: 46px; display: grid; place-items: center; border: 1.5px solid var(--grafito); background: var(--blanco); cursor: pointer; opacity: .92; }
  .g-flecha:hover { background: var(--lima); opacity: 1; }
  .g-flecha svg { width: 22px; height: 22px; fill: none; stroke: var(--tinta); stroke-width: 2.2; }
  .g-prev { left: 12px; }
  .g-next { right: 12px; }
  .g-contador { position: absolute; left: 12px; bottom: 12px; background: var(--grafito); color: var(--blanco); font-size: 13px; padding: 4px 9px; }
  .g-lupa { position: absolute; right: 12px; bottom: 12px; width: 36px; height: 36px; display: grid; place-items: center; background: var(--blanco); border: 1.5px solid var(--grafito); pointer-events: none; }
  .g-lupa svg { width: 20px; height: 20px; fill: none; stroke: var(--tinta); stroke-width: 2; }
  .miniaturas { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
  .miniaturas button { padding: 0; border: 1.5px solid var(--borde); background: none; cursor: pointer; opacity: .75; transition: opacity .15s; }
  .miniaturas button:hover { opacity: 1; }
  .miniaturas button[aria-current="true"] { border-color: var(--grafito); box-shadow: 0 0 0 2px var(--lima); opacity: 1; }
  .miniaturas img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
  .visor { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; }
  .visor::backdrop { background: rgba(20, 23, 17, .92); }
  .visor[open] { display: grid; place-items: center; }
  .visor img { max-width: min(1400px, 92vw); max-height: 88vh; width: auto; height: auto; object-fit: contain; border: 1.5px solid var(--grafito); }
  .visor-cerrar { position: fixed; top: 16px; right: 16px; width: 48px; height: 48px; font-size: 32px; line-height: 1; border: 1.5px solid var(--grafito); background: var(--blanco); cursor: pointer; }
  .visor .g-flecha { position: fixed; }
  .ficha h1 { font-size: clamp(44px, 4.6vw, 70px); }
  .ficha-linea { font-size: 19px; margin: 12px 0 18px; max-width: 46ch; }
  .ficha-precio { font-weight: 700; font-size: clamp(34px, 3.4vw, 44px); line-height: 1.1; letter-spacing: -.02em; }
  .ficha-precio { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 14px; }
  .ficha-precio .mono + .mono { font-weight: 500; font-size: .6em; color: var(--gris); }
  .ficha-min { font-size: 15px; margin: 6px 0 22px; color: var(--gris); }
  .calc-ficha { box-shadow: 8px 8px 0 var(--lima); }
  .colores { border: 0; padding: 0; margin: 18px 0 0; min-width: 0; }
  .colores legend, .cadena legend { font-size: 14px; font-weight: 500; margin-bottom: 8px; padding: 0; }
  .colores legend strong { font-weight: 700; }
  .muestras { display: flex; flex-wrap: wrap; gap: 7px; }
  .muestra { position: relative; cursor: pointer; }
  .muestra input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
  .muestra img { width: 40px; height: 40px; object-fit: cover; border: 1.5px solid var(--borde); display: block; }
  .muestra:hover img { border-color: var(--grafito); }
  .muestra input:checked + img { border-color: var(--grafito); box-shadow: 0 0 0 2px var(--blanco), 0 0 0 4px var(--lima-oscuro); }
  .muestra input:focus-visible + img { outline: 3px solid var(--lima); outline-offset: 3px; }
  .cadena { border: 0; padding: 0; margin: 16px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
  .cadena legend { width: 100%; }
  .cadena label { border: 1.5px solid var(--borde); padding: 8px 14px; font-size: 15px; cursor: pointer; display: inline-flex; gap: 8px; align-items: center; }
  .cadena label:has(input:checked) { border-color: var(--grafito); background: #f1f5df; }
  .cadena input { accent-color: var(--lima-oscuro); margin: 0; }
  .garantias { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 8px; font-size: 15px; }
  .garantias li { display: flex; gap: 10px; align-items: center; }
  .garantias svg { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--lima-oscuro); stroke-width: 2.6; }
  .etiquetas { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
  .etiquetas li { border: 1.5px solid var(--grafito); background: var(--blanco); padding: 6px 12px; font-size: 15px; font-weight: 500; }
  .ficha-info { display: grid; grid-template-columns: 1fr 1.2fr 1fr; border: 1.5px solid var(--borde); margin-top: 40px; background: var(--mineral); }
  .ficha-info section { padding: 26px 28px; }
  .ficha-info section + section { border-left: 1.5px solid var(--borde); }
  .ficha-info h2 { font-size: 28px; display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
  .ficha-info h2 svg { width: 30px; height: 30px; fill: none; stroke: var(--tinta); stroke-width: 1.6; flex: none; }
  .ficha-info p { margin: 0 0 14px; }
  .tecnica { width: 100%; border-collapse: collapse; font-size: 15px; }
  .tecnica th, .tecnica td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--borde); vertical-align: top; }
  .tecnica th { font-weight: 500; color: var(--gris); width: 44%; }
  .otros { padding-block: 64px 80px; }
  .otros h2 { font-size: clamp(40px, 4.5vw, 60px); margin-bottom: 20px; }
  .otros-lista { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
  .otro { border: 1.5px solid var(--grafito); background: var(--blanco); text-decoration: none; display: grid; }
  .otro img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }
  .otro > span { padding: 12px 14px; display: grid; gap: 2px; }
  .otro strong { font-family: var(--display); font-weight: 800; font-size: 22px; line-height: 1; }
  .otro:hover strong { text-decoration: underline; text-decoration-color: var(--lima); }
  .prod h3 a { text-decoration: none; }
  .prod h3 a:hover { text-decoration: underline; text-decoration-color: var(--lima); text-decoration-thickness: 3px; }

  @media (max-width: 1100px) {
    .ficha-info { grid-template-columns: 1fr; }
    .ficha-info section + section { border-left: 0; border-top: 1.5px solid var(--borde); }
    .otros-lista { grid-template-columns: repeat(3, 1fr); }
  }
  @media (max-width: 760px) {
    .ficha { grid-template-columns: 1fr; grid-template-areas: "cab" "gal" "compra"; row-gap: 22px; }
    .galeria { position: static; }
    .g-flecha { width: 40px; height: 40px; }
    .miniaturas { grid-template-columns: repeat(4, 1fr); gap: 6px; }
    .ficha h1 { font-size: 46px; }
    .ficha-cabecera .ficha-min { margin-bottom: 0; }
    .muestra img { width: 44px; height: 44px; }
    .barra-ficha { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; }
    .barra-ficha .btn { width: auto; padding: 14px 22px; }
    .barra-total { text-decoration: none; display: grid; line-height: 1.1; }
    .barra-total span { font-size: 13px; color: var(--gris); }
    .barra-total strong { font-size: 24px; }
    .ficha-linea { font-size: 17px; }
    .otros-lista { grid-template-columns: 1fr; gap: 10px; }
    .otro { grid-template-columns: 38% 1fr; align-items: center; }
    .otro img { aspect-ratio: 4 / 3; height: 100%; }
    .otro strong { font-size: 22px; }
  }

  /* ---------- Tema WordPress: piezas nuevas ---------- */
  .saltar { position: absolute; left: -9999px; top: 0; background: var(--lima); color: var(--tinta); padding: 10px 16px; z-index: 100; }
  .saltar:focus { left: 16px; top: 16px; }
  .ico { width: 20px; height: 20px; flex: none; }
  .menu-desplegable svg path { stroke: currentColor; stroke-width: 2.2; fill: none; }
  .titulo-seccion h1 { font-size: clamp(52px, 6.5vw, 88px); }
  .titulo-seccion h1 em { font-style: normal; color: var(--lima-oscuro); }
  .archivo-descripcion { max-width: 65ch; margin-top: 12px; color: var(--gris); }
  .productos { margin-top: 32px; }
  .prod > a img { aspect-ratio: 16 / 8.5; object-fit: cover; width: 100%; }
  .prod .btn { text-decoration: none; }

  /* Cierre con formulario */
  .cierre-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px; align-items: start; }
  .formulario { background: var(--blanco); border: 2px solid var(--grafito); padding: 26px; box-shadow: 8px 8px 0 var(--grafito); }
  .formulario h3 { font-size: 34px; }
  .formulario > p { margin: 6px 0 16px; font-size: 16px; color: var(--gris); }
  .formulario .campos { grid-template-columns: 1fr 1fr; }
  .formulario .campo.ancho { grid-column: 1 / -1; }
  .formulario input, .formulario textarea { width: 100%; font: 400 16px var(--sans); padding: 11px 12px; border: 1.5px solid var(--borde); border-radius: 0; background: #fff; color: var(--tinta); }
  .formulario input:focus, .formulario textarea:focus { outline: none; border-color: var(--grafito); box-shadow: 0 0 0 3px var(--lima); }
  .formulario label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 6px; }
  .formulario .btn { margin-top: 16px; width: 100%; }
  .oculto { position: absolute; left: -9999px; }
  .estado { padding: 10px 12px; font-size: 15px; border-left: 4px solid; }
  .estado.exito { background: #eef4d6; border-color: var(--lima-oscuro); }
  .estado.aviso { background: #f7e7e3; border-color: #9b2c1f; }

  /* Tarjetas de blog */
  .post-sin-imagen { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; background: var(--grafito); color: var(--blanco); font-family: var(--display); font-weight: 900; font-size: 40px; letter-spacing: -.01em; border-bottom: 1.5px solid var(--grafito); white-space: nowrap; }
  .post-sin-imagen span { color: var(--lima); }
  .post img { aspect-ratio: 16 / 9; }
  .post { overflow: hidden; }
  .post img { transition: transform .35s ease; }
  .post:hover img { transform: scale(1.03); }
  .post .post-extracto { margin: 0; font-size: 15px; color: var(--gris); line-height: 1.5; }
  .post-meta { font-family: var(--mono); font-size: 13px; color: var(--gris); }
  .posts-destacado .post:first-child { grid-column: span 2; display: grid; grid-template-columns: 1.25fr 1fr; }
  .posts-destacado .post:first-child > img, .posts-destacado .post:first-child > .post-sin-imagen { width: 100%; height: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-bottom: 0; border-right: 1.5px solid var(--grafito); }
  .posts-destacado .post:first-child > div { align-content: center; padding: 28px 32px; }
  .posts-destacado .post:first-child h3 { font-size: 42px; }
  .articulo-autor { font-weight: 600; }
  .filtros { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
  .filtros a { border: 1.5px solid var(--grafito); padding: 8px 14px; text-decoration: none; font-size: 15px; font-weight: 500; }
  .filtros a[aria-current="page"] { background: var(--grafito); color: var(--blanco); }
  .paginacion { margin-top: 32px; }
  .paginacion .nav-links { display: flex; gap: 10px; flex-wrap: wrap; }
  .paginacion a, .paginacion span { border: 1.5px solid var(--grafito); padding: 8px 14px; text-decoration: none; font-family: var(--mono); }
  .paginacion .current { background: var(--grafito); color: var(--blanco); }
  .screen-reader-text { position: absolute; left: -9999px; }

  /* Artículos y páginas */
  .wrap-texto { max-width: 760px; margin-inline: auto; padding-inline: var(--gutter); }
  .articulo, .pagina { padding-block: 8px 72px; }
  .articulo h1, .pagina h1 { font-size: clamp(46px, 6vw, 76px); margin: 8px 0 14px; }
  .pagina header { padding-top: 48px; }
  .articulo-meta { color: var(--gris); font-size: 14px; margin: 0 0 28px; }
  .articulo-imagen { max-width: 1040px; margin: 0 auto; }
  .articulo-imagen img { width: 100%; max-height: 540px; aspect-ratio: 16 / 9; height: auto; object-fit: cover; border: 1.5px solid var(--grafito); margin-bottom: 36px; }
  .contenido { font-size: 18px; line-height: 1.75; }
  .contenido h2 { font-size: 38px; margin: 44px 0 12px; }
  .contenido h3 { font-size: 28px; margin: 32px 0 10px; }
  .contenido p, .contenido ul, .contenido ol { margin: 0 0 20px; }
  .contenido ul, .contenido ol { padding-left: 24px; }
  .contenido li { margin-bottom: 8px; }
  .contenido a { color: var(--lima-oscuro); text-decoration-thickness: 2px; text-underline-offset: 3px; }
  .contenido img { height: auto; }
  .contenido strong { font-weight: 700; }
  .imagen-legado { margin: 0 0 24px; }
  .imagen-legado img { width: 100%; border: 1.5px solid var(--borde); }
  .articulo-cta { margin-top: 48px; background: var(--grafito); color: var(--blanco); padding: 32px var(--gutter); max-width: calc(760px - 2 * var(--gutter)); }
  .articulo-cta h2 { font-size: 44px; }
  .articulo-cta h2 + p { margin: 8px 0 20px; color: #d8ddd0; }
  .articulo-cta .btn-contorno { color: var(--blanco); border-color: var(--blanco); }
  .relacionados { padding-top: 0; }
  .ficha-detalle { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 56px; align-items: start; margin-top: 64px; }
  .descripcion { max-width: 70ch; }
  .descripcion .eyebrow { display: block; margin-bottom: 12px; }
  .descripcion h2 { font-size: clamp(34px, 3.4vw, 46px); margin: 0 0 18px; }
  .descripcion h3 { font-size: 26px; }
  .descripcion p:first-of-type { font-size: 20px; line-height: 1.6; }
  .como-comprar { background: var(--grafito); color: var(--blanco); padding: 28px; position: sticky; top: 92px; }
  .como-comprar h2 { font-size: 36px; margin-bottom: 16px; }
  .como-comprar ol { list-style: none; margin: 0; padding: 0; counter-reset: c; display: grid; gap: 14px; }
  .como-comprar li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; font-size: 16px; line-height: 1.45; }
  .como-comprar li::before { counter-increment: c; content: counter(c); font-family: var(--mono); font-weight: 700; color: var(--grafito); background: var(--lima); width: 30px; height: 30px; display: grid; place-items: center; }
  .como-comprar p { font-size: 14px; color: #cfd5c4; margin: 18px 0 20px; border-top: 1px solid #4b5245; padding-top: 14px; }
  .como-comprar .btn { width: 100%; }
  .faq { margin-top: 72px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 40px; align-items: start; }
  .faq h2 { font-size: clamp(40px, 4.5vw, 60px); }
  .faq-lista { border-top: 1.5px solid var(--grafito); }
  .faq details { border-bottom: 1.5px solid var(--grafito); }
  .faq summary { cursor: pointer; list-style: none; padding: 18px 44px 18px 0; font-weight: 600; font-size: 18px; position: relative; }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::after { content: "+"; position: absolute; right: 6px; top: 50%; translate: 0 -50%; font-family: var(--mono); font-size: 26px; font-weight: 500; }
  .faq details[open] summary::after { content: "–"; }
  .faq details p { margin: 0 0 20px; max-width: 70ch; color: var(--gris); font-size: 17px; }
  .otro small { font-size: 13px; color: var(--gris); line-height: 1.3; }
  @media (max-width: 1100px) {
    .ficha-detalle { grid-template-columns: 1fr; gap: 32px; }
    .como-comprar { position: static; }
    .faq { grid-template-columns: 1fr; gap: 16px; }
  }
  @media (max-width: 760px) {
    .ficha-detalle { margin-top: 48px; }
    .descripcion p:first-of-type { font-size: 18px; }
    .faq { margin-top: 48px; }
    .faq summary { font-size: 17px; }
  }

  /* Carrito, checkout y cuenta de WooCommerce (sin compra activa) */
  .woocommerce-info, .woocommerce-message, .cart-empty { border-left: 4px solid var(--lima-oscuro); background: var(--blanco); padding: 12px 14px; list-style: none; }
  .return-to-shop .button { display: inline-flex; padding: 14px 20px; border: 2px solid var(--grafito); background: var(--lima); color: var(--tinta); text-decoration: none; font-weight: 600; }

  @media (max-width: 1100px) {
    .cierre-grid { grid-template-columns: 1fr; }
  }
  @media (max-width: 760px) {
    .formulario { padding: 20px; box-shadow: 6px 6px 0 var(--grafito); }
    .formulario .campos { grid-template-columns: 1fr; }
    .contenido { font-size: 17px; }
    .articulo-cta .btn { width: 100%; }
    .post-sin-imagen { width: 42%; aspect-ratio: auto; border-bottom: 0; border-right: 1.5px solid var(--grafito); font-size: 20px; }
    .post .post-extracto { display: none; }
    .posts-destacado .post:first-child { grid-column: auto; display: flex; flex-direction: column; }
    .posts-destacado .post:first-child > img, .posts-destacado .post:first-child > .post-sin-imagen { width: 100%; height: auto; aspect-ratio: 16 / 9; border-right: 0; border-bottom: 1.5px solid var(--grafito); }
    .posts-destacado .post:first-child > div { padding: 18px; }
    .posts-destacado .post:first-child h3 { font-size: 30px; }
    .posts-destacado .post:first-child .post-extracto { display: block; }
  }

  /* WordPress fija width/height en <img>: height:auto deja mandar al aspect-ratio. */
  .prod img, .post img, .otro img, .miniaturas img, .galeria > img, .hero-foto img { height: auto; }
  .hero-foto img { height: 100%; }

  /* Las anclas de la portada (#precios, #contacto) no son "página actual". */
  .nav-escritorio .menu-item-type-custom.current-menu-item > a { text-decoration: none; }
  .nav-escritorio .menu-item-type-custom.current-menu-item > a:hover { text-decoration: underline; }
  @media (max-width: 1100px) and (min-width: 761px) {
    .hero-foto { max-height: 320px; overflow: hidden; }
  }

  /* ==========================================================================
     Movimiento, página de preguntas y celular tipo app (2026-09-28)
     Todo el movimiento usa transform/opacity y se apaga con prefers-reduced-motion.
     ========================================================================== */

  /* Cabecera: sombra al bajar; en el celular se esconde al bajar y vuelve al subir. */
  .cabecera { transition: transform .28s ease, box-shadow .2s ease; }
  .cabecera.con-sombra { box-shadow: 0 6px 18px -12px rgba(28, 32, 22, .45); }

  /* Portada: entrada del hero */
  @keyframes rmx-sube { from { transform: translateY(26px); opacity: 0; } to { transform: none; opacity: 1; } }
  @keyframes rmx-entra-der { from { transform: translateX(34px); opacity: 0; } to { transform: none; opacity: 1; } }
  @keyframes rmx-acerca { from { transform: scale(1.09); } to { transform: scale(1); } }
  @keyframes rmx-barra { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  .hero-foto { overflow: hidden; }
  .hero-foto img { animation: rmx-acerca 7s cubic-bezier(.2, .7, .2, 1) both; transform-origin: 60% 40%; }
  .hero h1 em { animation: rmx-sube .7s .15s cubic-bezier(.2, .8, .2, 1) both; }
  .hero p.bajada { animation: rmx-sube .7s .3s cubic-bezier(.2, .8, .2, 1) both; }
  .hero .calc { animation: rmx-entra-der .8s .2s cubic-bezier(.2, .8, .2, 1) both; }

  /* Aparición al hacer scroll (la clase la pone sitio.js solo a lo que está bajo el pliegue) */
  .rv { opacity: 0; transform: translateY(28px); transition: opacity .7s cubic-bezier(.2, .8, .2, 1), transform .7s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--i, 0) * 70ms); }
  .rv.visto { opacity: 1; transform: none; }
  .subrayado { transform-origin: left; }
  .rv.visto .subrayado, .visto > .subrayado { animation: rmx-barra .8s .25s cubic-bezier(.2, .8, .2, 1) both; }

  /* Micro-interacciones */
  .btn:active { transform: translate(0, 0) scale(.97); box-shadow: none; }
  .prod { transition: transform .25s ease, box-shadow .25s ease; }
  .prod > a { display: block; overflow: hidden; }
  .prod img { transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
  .prod:hover { transform: translateY(-4px); box-shadow: 6px 6px 0 var(--lima); }
  .prod:hover img { transform: scale(1.05); }
  .post img { transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
  .post:hover img { transform: scale(1.03); }
  @keyframes rmx-pulso { 0% { transform: scale(1); } 40% { transform: scale(1.06); color: var(--lima-oscuro); } 100% { transform: scale(1); } }
  .total.cambia, [data-barra-total].cambia { animation: rmx-pulso .45s ease; }
  .beneficios svg { transition: transform .3s ease; }
  .beneficios li:hover svg { transform: translateY(-3px) rotate(-6deg); }
  .campo input, .campo select { transition: border-color .15s ease, box-shadow .2s ease; }

  /* ---------- Página de preguntas frecuentes ---------- */
  .faq-cabecera { padding-top: 48px; }
  .faq-cabecera h1 em { font-style: normal; color: var(--lima-oscuro); display: block; }
  .faq-intro { font-size: 19px; color: var(--gris); max-width: 58ch; margin: 0 0 24px; }
  .faq-temas { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; }
  .faq-temas a { display: inline-flex; align-items: center; gap: 8px; border: 1.5px solid var(--grafito); background: var(--blanco); padding: 10px 14px; text-decoration: none; font-weight: 600; font-size: 15px; transition: background .15s ease, transform .15s ease; }
  .faq-temas a:hover { background: var(--lima); transform: translateY(-2px); }
  .faq-temas svg, .faq-pagina .faq h2 svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; flex: none; }
  .faq-pagina .faq { scroll-margin-top: 96px; margin-top: 56px; }
  .faq-pagina .faq h2 { display: flex; align-items: center; gap: 12px; font-size: clamp(36px, 4vw, 52px); }
  .faq-pagina .faq h2 svg { width: 34px; height: 34px; stroke-width: 1.6; }
  .faq details p a { color: var(--tinta); font-weight: 600; }
  .faq summary { transition: color .15s ease; }
  .faq summary:hover { color: var(--lima-oscuro); }
  .faq summary::after { transition: transform .25s ease; }
  .faq details[open] summary::after { transform: rotate(180deg); }
  @keyframes rmx-abre { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
  .faq details[open] > p { animation: rmx-abre .3s ease; }
  .comparador { margin-top: 72px; }
  .comparador h2 { font-size: clamp(40px, 4.5vw, 60px); margin-bottom: 18px; }
  .comparador-tabla { overflow-x: auto; border: 1.5px solid var(--grafito); background: var(--blanco); }
  .comparador table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 680px; }
  .comparador th, .comparador td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--borde); vertical-align: top; }
  .comparador thead th { background: var(--grafito); color: var(--blanco); font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; font-weight: 500; }
  .comparador tbody th a { font-weight: 700; text-decoration: none; }
  .comparador tbody th a:hover { text-decoration: underline; }
  .comparador tbody tr { transition: background .15s ease; }
  .comparador tbody tr:hover { background: #f1f5df; }
  .comparador td.mono { white-space: nowrap; font-weight: 700; }
  .faq-cta { max-width: none; margin-top: 72px; }

  /* ---------- Barra inferior tipo app (celular) ---------- */
  .tabbar { display: none; }

  @media (max-width: 760px) {
    /* Cabecera tipo app: se esconde al bajar */
    .cabecera.oculta { transform: translateY(-100%); }
    .menu-movil .icono-btn.wsp { display: none; }
    .panel-menu a:not(.btn) { font-size: 40px; }

    /* Portada: la foto vuelve, detrás del titular */
    .hero { position: relative; isolation: isolate; }
    .hero-foto { display: block; position: absolute; inset: 0 0 auto 0; height: 360px; min-height: 0; z-index: -1; }
    .hero-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(34, 39, 30, .35) 0%, rgba(34, 39, 30, .82) 60%, var(--grafito) 100%); }
    .hero-panel { background: transparent; padding-top: 40px; }
    .hero::before { content: ""; position: absolute; inset: 360px 0 0 0; background: var(--grafito); z-index: -2; }
    .hero h1 { text-shadow: 0 2px 18px rgba(0, 0, 0, .35); }

    /* Beneficios como carrusel deslizable */
    .beneficios ul { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; padding: 14px var(--gutter); scrollbar-width: none; }
    .beneficios ul::-webkit-scrollbar { display: none; }
    .beneficios li, .beneficios li:last-child { flex: 0 0 auto; scroll-snap-align: start; border: 1.5px solid var(--grafito) !important; background: var(--blanco); padding: 10px 14px; white-space: nowrap; }

    /* Páginas con barra: dejar espacio abajo */
    body { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }

    .tabbar {
      display: grid; grid-template-columns: repeat(5, 1fr); align-items: end;
      position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); z-index: 30;
      background: rgba(34, 39, 30, .94); color: #cfd5c4; border: 1.5px solid var(--grafito);
      box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .55);
      padding: 6px 4px;
      -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
      animation: rmx-sube .5s .4s cubic-bezier(.2, .8, .2, 1) both;
    }
    .tab { display: grid; justify-items: center; gap: 3px; padding: 6px 2px 4px; text-decoration: none; color: inherit; font-size: 11px; font-weight: 600; letter-spacing: .01em; position: relative; -webkit-tap-highlight-color: transparent; }
    .tab-ico { position: relative; display: grid; place-items: center; width: 34px; height: 30px; transition: transform .2s ease; }
    .tab svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; }
    .tab-wsp svg { stroke: none; }
    .tab:active .tab-ico { transform: scale(.86); }
    .tab[aria-current="page"] { color: var(--lima); }
    .tab[aria-current="page"]::after { content: ""; position: absolute; top: -7px; left: 30%; right: 30%; height: 3px; background: var(--lima); }
    .tab-calc { color: var(--tinta); }
    .tab-calc .tab-ico { width: 56px; height: 56px; margin-top: -30px; background: var(--lima); border: 2px solid var(--grafito); box-shadow: 0 8px 18px -6px rgba(0, 0, 0, .5); }
    .tab-calc .tab-ico::before { content: ""; position: absolute; inset: -2px; border: 2px solid var(--lima); animation: rmx-onda 2.4s 1.5s ease-out infinite; pointer-events: none; }
    .tab-calc .tab-txt { color: #cfd5c4; }
    .tab-calc svg { width: 28px; height: 28px; stroke-width: 2; }
    @keyframes rmx-onda { from { transform: scale(1); opacity: .9; } to { transform: scale(1.5); opacity: 0; } }

    /* Barra de la ficha (total + pedir) con el mismo lenguaje */
    .barra-ficha {
      left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px));
      background: rgba(34, 39, 30, .95); color: var(--blanco); border: 1.5px solid var(--grafito);
      box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .55); padding: 8px 8px 8px 16px;
      -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
      animation: rmx-sube .5s .4s cubic-bezier(.2, .8, .2, 1) both;
    }
    .barra-ficha .barra-total { color: var(--blanco); }
    .barra-ficha .barra-total span { color: #cfd5c4; }

    .faq-cabecera { padding-top: 28px; }
    .faq-temas { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--gutter)); padding: 2px var(--gutter) 6px; scrollbar-width: none; }
    .faq-temas a { flex: none; }
    .faq-pagina .faq { margin-top: 40px; }
    .comparador table { min-width: 620px; font-size: 14px; }
  }

  /* Equipos con "reducir movimiento" (Windows sin efectos de animación, iPhone con Reducir movimiento):
     se apaga solo el movimiento brusco. Nada puede quedar invisible ni bloqueado. */
  @media (prefers-reduced-motion: reduce) {
    .rv, .rv-izq, .rv-der { opacity: 1 !important; transform: none !important; transition: none !important; }
    .h6-foto.activa img, .hero-slide.activa img { animation: none !important; }
    .h6-globo { animation: none !important; }
    .franja-van { display: none; }
  }

  /* ==========================================================================
     v3 (2026-09-28 tarde): hero con diapositivas, "Así funciona" con SVG animado,
     simulador de luz, cinta de testimonios, parallax.
     ========================================================================== */

  /* Hero con diapositivas */
  @media (min-width: 761px) { .hero-foto { position: relative; } }
  .hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.1s ease; }
  .hero-slide.activa { opacity: 1; }
  .hero-slide:first-child { position: relative; height: 100%; }
  .hero-slide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 6s linear; }
  .hero-slide.activa img { transform: scale(1); }
  .hero-foto img { animation: none; }
  [data-parallax] img { will-change: transform; }
  .hero-puntos { position: absolute; left: 18px; bottom: 18px; display: flex; gap: 6px; z-index: 2; }
  .hero-puntos button { width: 34px; height: 18px; padding: 7px 0; border: 0; background: none; cursor: pointer; }
  .hero-puntos span { display: block; height: 4px; background: rgba(251, 252, 248, .45); position: relative; overflow: hidden; }
  .hero-puntos span::after { content: ""; position: absolute; inset: 0; background: var(--lima); transform: scaleX(0); transform-origin: left; }
  .hero-puntos [aria-selected="true"] span::after { animation: rmx-avance var(--rmx-t, 4.8s) linear forwards; }
  .hero-puntos .visto span::after { transform: scaleX(1); }
  @keyframes rmx-avance { to { transform: scaleX(1); } }
  .hero-textos { display: grid; }
  .hero-texto { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.2, .8, .2, 1), visibility 0s .6s; }
  .hero-texto.activa { opacity: 1; visibility: visible; transform: none; transition: opacity .6s .15s ease, transform .6s .15s cubic-bezier(.2, .8, .2, 1), visibility 0s; }
  .hero-titulo { font-family: var(--display); font-weight: 800; line-height: .92; font-size: clamp(52px, 5.3vw, 80px); margin: 0; }
  .hero-titulo span { white-space: nowrap; }
  .hero-titulo em { font-style: normal; color: var(--lima); display: block; }
  .hero-chip { display: inline-block; margin-top: 24px; border: 1.5px solid var(--lima); color: var(--lima); padding: 9px 14px; font-size: 14px; text-decoration: none; transition: background .2s ease, color .2s ease; }
  .hero-chip:hover { background: var(--lima); color: var(--tinta); }

  /* Así funciona + simulador */
  .funciona { padding-block: clamp(44px, 5.5vw, 72px); background: var(--blanco); border-block: 1px solid var(--borde); }
  .funciona-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
  .funciona h2 em { font-style: normal; color: var(--lima-oscuro); }
  .funciona .eyebrow { margin: 0 0 6px; }
  .instala-cuerpo { display: grid; grid-template-columns: 1.3fr 1fr; gap: 20px; align-items: center; margin-top: 22px; }
  .instala-svg { width: 100%; height: auto; border: 1.5px solid var(--grafito); background: var(--mineral); box-shadow: 6px 6px 0 var(--lima); }
  .instala-svg * { vector-effect: non-scaling-stroke; }
  .i-muro { fill: var(--mineral); }
  .i-piso { stroke: var(--grafito); stroke-width: 2; }
  .i-ventana rect, .i-ventana path { fill: none; stroke: var(--grafito); stroke-width: 2; }
  .i-ventana rect:nth-child(2) { fill: #dfe7ea; }
  .i-ventana .i-brillo { stroke: #fbfcf8; stroke-width: 3; }
  .i-sop { fill: var(--grafito); }
  .i-chispa { fill: none; stroke: var(--lima); stroke-width: 3; opacity: 0; }
  .i-tubo { fill: var(--grafito); }
  .i-tela { fill: #cfd6bf; stroke: var(--grafito); stroke-width: 1.5; }
  .i-trama { stroke: #b9c1a8; stroke-width: 1; }
  .i-barra { fill: var(--grafito); }
  .i-tela-g { transform-box: view-box; transform-origin: 50% 84px; }
  .i-cadena { stroke: var(--grafito); stroke-width: 2; stroke-dasharray: 3 3; }
  .i-escalera path { fill: none; stroke: var(--lima-oscuro); stroke-width: 3; stroke-linecap: round; }
  .i-persona circle { fill: var(--grafito); }
  .i-persona path { fill: none; stroke: var(--grafito); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
  .i-taladro { fill: var(--lima); stroke: var(--grafito); stroke-width: 2; }
  .i-brazo { transform-box: view-box; transform-origin: 128px 122px; }
  .i-ok circle { fill: var(--lima); stroke: var(--grafito); stroke-width: 2; }
  .i-ok path { fill: none; stroke: var(--grafito); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
  .i-ok { transform-box: fill-box; transform-origin: center; opacity: 0; }
  .instala-pasos { list-style: none; counter-reset: p; margin: 0; padding: 0; display: grid; gap: 4px; }
  .instala-pasos li { counter-increment: p; display: grid; grid-template-columns: 38px 1fr; column-gap: 10px; padding: 10px 10px; border-left: 3px solid transparent; }
  .instala-pasos li::before { content: "0" counter(p); grid-row: span 2; font-family: var(--mono); font-weight: 700; font-size: 20px; color: var(--gris); }
  .instala-pasos strong { font-size: 17px; }
  .instala-pasos span { font-size: 14px; color: var(--gris); }

  /* Animación en bucle de 10 s: soportes (0-20%), tubo (20-35%), tela baja (35-60%), sello (60-90%) */
  .funciona.anima .i-brazo { animation: i-brazo 10s infinite; }
  .funciona.anima .i-persona { animation: i-persona 10s infinite; }
  .funciona.anima .i-ch1 { animation: i-ch1 10s infinite; }
  .funciona.anima .i-ch2 { animation: i-ch2 10s infinite; }
  .funciona.anima .i-sop1 { animation: i-sop1 10s infinite; }
  .funciona.anima .i-sop2 { animation: i-sop2 10s infinite; }
  .funciona.anima .i-tubo { animation: i-tubo 10s infinite; }
  .funciona.anima .i-tela-g { animation: i-tela 10s infinite; }
  .funciona.anima .i-cadena { animation: i-cadena 10s infinite; }
  .funciona.anima .i-ok { animation: i-ok 10s infinite; }
  .funciona.anima .instala-pasos li { animation: i-paso 10s infinite; animation-delay: calc(var(--p) * 2.5s - 10s); }
  @keyframes i-persona { 0%, 8% { transform: translateX(0); } 12%, 24% { transform: translateX(230px); } 30%, 100% { transform: translateX(0); } }
  @keyframes i-brazo { 0%, 2% { transform: rotate(0); } 4% { transform: rotate(-6deg); } 6% { transform: rotate(3deg); } 8% { transform: rotate(0); } 15% { transform: rotate(0); } 17% { transform: rotate(-6deg); } 19% { transform: rotate(3deg); } 21%, 100% { transform: rotate(0); } }
  @keyframes i-ch1 { 0%, 2% { opacity: 0; transform: scale(.4); } 5% { opacity: 1; transform: scale(1); } 9%, 100% { opacity: 0; transform: scale(1.6); } }
  @keyframes i-ch2 { 0%, 15% { opacity: 0; transform: scale(.4); } 18% { opacity: 1; transform: scale(1); } 22%, 100% { opacity: 0; transform: scale(1.6); } }
  .i-ch1, .i-ch2, .i-sop1, .i-sop2, .i-tubo { transform-box: fill-box; transform-origin: center; }
  @keyframes i-sop1 { 0%, 2% { opacity: 0; } 5%, 96% { opacity: 1; } 100% { opacity: 0; } }
  @keyframes i-sop2 { 0%, 15% { opacity: 0; } 18%, 96% { opacity: 1; } 100% { opacity: 0; } }
  @keyframes i-tubo { 0%, 24% { opacity: 0; transform: translateY(-40px); } 32%, 96% { opacity: 1; transform: none; } 100% { opacity: 0; } }
  @keyframes i-tela { 0%, 34% { transform: scaleY(0); } 58%, 96% { transform: scaleY(1); } 100% { transform: scaleY(0); } }
  @keyframes i-cadena { 0%, 30% { opacity: 0; } 36%, 96% { opacity: 1; } 100% { opacity: 0; } }
  @keyframes i-ok { 0%, 60% { opacity: 0; transform: scale(.3); } 66% { opacity: 1; transform: scale(1.12); } 70%, 90% { opacity: 1; transform: scale(1); } 94%, 100% { opacity: 0; transform: scale(1); } }
  @keyframes i-paso { 0%, 24.9% { background: #f1f5df; border-left-color: var(--lima-oscuro); } 25%, 100% { background: transparent; border-left-color: transparent; } }

  /* Simulador de luz */
  .simula-escena { margin-top: 22px; border: 1.5px solid var(--grafito); background: var(--mineral); overflow: hidden; }
  .simula-escena svg { display: block; width: 100%; height: auto; }
  .s-cuarto { fill: #e9ecdf; }
  .s-cielo { fill: #bfdbe6; }
  .s-sol { fill: #f4d35e; }
  .s-ciudad { fill: #8e9aa0; }
  .s-marco { fill: none; stroke: var(--grafito); stroke-width: 3; }
  .s-tubo { fill: var(--grafito); }
  .s-barra { fill: var(--grafito); }
  .s-tela { transform: translateY(calc((var(--baja) - 1) * 200px)); transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
  .s-tela-sun { opacity: .78; }
  .s-tela-black { fill: #2d3328; }
  .s-tela-sun, .s-tela-black, .s-tela-duo { transition: opacity .4s ease; }
  [data-tela="sun"] .s-tela-black, [data-tela="sun"] .s-tela-duo,
  [data-tela="black"] .s-tela-sun, [data-tela="black"] .s-tela-duo,
  [data-tela="duo"] .s-tela-sun, [data-tela="duo"] .s-tela-black { opacity: 0; }
  .s-sombra { fill: #11140e; pointer-events: none; opacity: calc(var(--baja) * .08); transition: opacity .4s ease; }
  [data-tela="black"] .s-sombra { opacity: calc(var(--baja) * .62); }
  [data-tela="duo"] .s-sombra { opacity: calc(var(--baja) * .3); }
  .simula-controles { display: grid; gap: 12px; margin-top: 14px; }
  .simula-telas { display: flex; gap: 8px; flex-wrap: wrap; }
  .simula-telas button { font: 600 15px var(--sans); padding: 10px 14px; border: 1.5px solid var(--grafito); background: var(--blanco); cursor: pointer; transition: background .15s ease, transform .15s ease; }
  .simula-telas button:hover { transform: translateY(-2px); }
  .simula-telas [aria-checked="true"] { background: var(--grafito); color: var(--lima); }
  .simula-rango { display: grid; gap: 4px; font-size: 14px; font-weight: 500; }
  .simula-rango input { width: 100%; accent-color: var(--lima-oscuro); }
  .simula-nota { margin: 0; font-size: 15px; color: var(--gris); min-height: 3em; }

  /* Testimonios en cinta que avanza sola (cuando hay más de 3) */
  .testimonios-cinta { display: flex; overflow: hidden; gap: 18px; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
  .testimonios-cinta .testi { flex: 0 0 min(380px, 80vw); animation: rmx-cinta 60s linear infinite; }
  .testimonios-cinta:hover .testi { animation-play-state: paused; }
  @keyframes rmx-cinta { to { transform: translateX(calc(-100% * var(--n, 3) - 18px * var(--n, 3))); } }
  .testi { transition: transform .25s ease, box-shadow .25s ease; }
  .testi:hover { box-shadow: 6px 6px 0 var(--lima); }
  .testi blockquote::before { content: "“"; display: block; font-family: var(--display); font-size: 64px; line-height: .6; color: var(--lima-oscuro); margin-bottom: 4px; }

  @media (max-width: 1100px) {
    .funciona-grid { grid-template-columns: 1fr; }
  }
  @media (max-width: 760px) {
    .hero-slide:first-child { position: absolute; }
    .hero-puntos { left: auto; right: var(--gutter); top: 16px; bottom: auto; }
    .hero-titulo { font-size: 52px; }
    .instala-cuerpo { grid-template-columns: 1fr; }
    .instala-pasos { grid-template-columns: 1fr 1fr; }
    .instala-pasos li { grid-template-columns: 1fr; padding: 8px; }
    .instala-pasos li::before { grid-row: auto; font-size: 16px; }
    .beneficios ul { justify-content: flex-start; }
  }

  /* ---------- Guía "Cómo medir" ---------- */
  .guia-cabecera { padding-top: 44px; }
  .guia-cabecera h1 em, .guia-convertir h2 em { font-style: normal; color: var(--lima-oscuro); display: block; }
  .guia-intro { font-size: 19px; color: var(--gris); max-width: 56ch; margin: 0 0 20px; }
  .guia-indice { list-style: none; counter-reset: g; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
  .guia-indice li { counter-increment: g; }
  .guia-indice a { display: inline-flex; gap: 8px; align-items: center; border: 1.5px solid var(--grafito); background: var(--blanco); padding: 8px 12px; font-weight: 600; font-size: 14px; text-decoration: none; transition: background .15s ease, transform .15s ease; }
  .guia-indice a::before { content: "0" counter(g); font-family: var(--mono); color: var(--lima-oscuro); }
  .guia-indice a:hover { background: var(--lima); transform: translateY(-2px); }
  .guia-paso { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: center; margin-top: 56px; scroll-margin-top: 90px; }
  .guia-paso-inv figure { order: 2; }
  .guia-paso figure { margin: 0; border: 1.5px solid var(--grafito); box-shadow: 8px 8px 0 var(--lima); background: var(--blanco); overflow: hidden; }
  .guia-paso figure img { width: 100%; height: auto; transition: transform .8s cubic-bezier(.2, .8, .2, 1); }
  .guia-paso figure:hover img { transform: scale(1.03); }
  .guia-num { font-size: 15px; font-weight: 700; color: var(--lima-oscuro); border: 1.5px solid var(--lima-oscuro); padding: 2px 8px; }
  .guia-texto h2 { font-size: clamp(38px, 4vw, 56px); margin: 10px 0 12px; }
  .guia-texto .eyebrow { margin: 14px 0 0; }
  .guia-texto p { font-size: 17px; margin: 0 0 12px; max-width: 46ch; }
  .guia-formula { display: inline-block; background: var(--grafito); color: var(--lima); font-size: 22px; font-weight: 700; padding: 10px 16px; }
  .guia-ojo { border-left: 3px solid var(--lima-oscuro); background: #f1f5df; padding: 8px 12px; font-size: 15px !important; }
  .guia-lista { margin: 0; padding-left: 20px; font-size: 17px; display: grid; gap: 6px; }
  .guia-donde { margin-top: 64px; background: var(--grafito); color: var(--blanco); padding: clamp(28px, 4vw, 48px); }
  .guia-donde h2 { font-size: clamp(40px, 4.5vw, 60px); }
  .guia-donde > p { color: #cfd5c4; margin: 6px 0 20px; }
  .guia-opciones { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .guia-opcion { display: grid; gap: 8px; border: 1.5px solid #4b5245; padding: 20px; text-decoration: none; color: var(--blanco); transition: border-color .2s ease, transform .2s ease, background .2s ease; }
  .guia-opcion:hover { border-color: var(--lima); background: var(--grafito-2); transform: translateY(-3px); }
  .guia-opcion svg { width: 84px; height: 63px; fill: none; stroke: #e6e9df; stroke-width: 2; }
  .guia-opcion svg .lima { stroke: var(--lima); stroke-width: 3; }
  .guia-opcion strong { font-family: var(--display); font-size: 32px; font-weight: 800; }
  .guia-opcion span { color: #cfd5c4; font-size: 15px; }
  .guia-convertir { margin-top: 64px; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: center; scroll-margin-top: 90px; }
  .guia-convertir h2 { font-size: clamp(40px, 4.5vw, 60px); margin-bottom: 12px; }
  .convertir-form { background: var(--blanco); border: 2px solid var(--grafito); box-shadow: 8px 8px 0 var(--lima); padding: 24px; display: grid; gap: 16px; }
  .convertir-caso { border: 0; padding: 0; margin: 0; display: flex; gap: 8px; flex-wrap: wrap; }
  .convertir-caso legend { font-size: 14px; font-weight: 500; margin-bottom: 6px; }
  .convertir-caso label { border: 1.5px solid var(--grafito); padding: 8px 12px; cursor: pointer; font-weight: 600; font-size: 15px; }
  .convertir-caso label:has(input:checked) { background: var(--grafito); color: var(--lima); }
  .convertir-caso input { accent-color: var(--lima-oscuro); }
  .convertir-res { display: grid; border-top: 1px solid var(--borde); padding-top: 12px; }
  .convertir-res span { font-weight: 600; }
  .convertir-res strong { font-size: clamp(34px, 4vw, 48px); line-height: 1.1; display: block; }
  .convertir-res small { color: var(--gris); font-family: var(--mono); font-size: 13px; }
  .guia-cta { max-width: none; margin-top: 64px; }
  @media (max-width: 900px) {
    .guia-paso, .guia-convertir, .guia-opciones { grid-template-columns: 1fr; }
    .guia-paso-inv figure { order: 0; }
    .guia-paso { margin-top: 40px; }
  }

  /* Celular: carruseles deslizables (más contenido a la vista, menos scroll) */
  @media (max-width: 760px) {
    .beneficios ul { flex-wrap: nowrap; }
    .hero-chip { font-size: 12px; padding: 8px 10px; }
    .productos, .posts { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin-inline: calc(-1 * var(--gutter)); padding: 4px var(--gutter) 14px; scrollbar-width: none; }
    .productos::-webkit-scrollbar, .posts::-webkit-scrollbar { display: none; }
    .productos > .prod { flex: 0 0 78%; scroll-snap-align: start; }
    .prod h3 { font-size: 24px; }
    .prod .precio { font-size: 24px; }
    .prod .btn { padding: 11px; }
    .posts > * { flex: 0 0 82%; scroll-snap-align: start; flex-direction: column; }
    .posts .post img { width: 100%; aspect-ratio: 16 / 9; border-right: 0; border-bottom: 1.5px solid var(--grafito); }
    .testimonios:not(.testimonios-cinta) { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin-inline: calc(-1 * var(--gutter)); padding: 4px var(--gutter) 14px; scrollbar-width: none; }
    .testimonios:not(.testimonios-cinta) > .testi { flex: 0 0 84%; scroll-snap-align: start; }
    .desliza { display: block; font-family: var(--mono); font-size: 12px; color: var(--gris); margin-top: 4px; }
  }
  .desliza { display: none; }

  /* ==========================================================================
     v4: escenas vectoriales animadas del carrusel principal (inc/escenas.php)
     ========================================================================== */
  .hero-slide .escena { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
  .hero-slide:first-child .escena { position: relative; }
  .escena * { vector-effect: non-scaling-stroke; }
  .escena rect, .escena path, .escena circle, .escena ellipse { stroke: var(--grafito); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
  .escena text { font-family: var(--display); font-weight: 800; fill: var(--grafito); stroke: none; }
  .e-cielo { fill: #d6e6ea; stroke: none !important; }
  .e-muro { fill: #eef0e8; stroke: none !important; }
  .e-muro-calido { fill: #ece4d4; stroke: none !important; }
  .e-cielo-dia { fill: #bfdbe6; }
  .e-sol { fill: #f4d35e; }
  .e-luna { fill: #f6f1d8; }
  .e-nube ellipse { fill: #fbfcf8; stroke: none; }
  .e-edificio { fill: #eef0e8; }
  .e-linea { fill: #cfd6bf; }
  .e-vidrio { fill: #cfe3ea; }
  .e-roller { transform-box: fill-box; transform-origin: 50% 0; transform: scaleY(var(--h, .6)); }
  .e-lima { fill: var(--lima); } .e-gris { fill: #8f978a; } .e-beige { fill: #e2d7bf; }
  .e-tubo { fill: var(--grafito); }
  .e-barra { fill: var(--grafito); }
  .e-suelo, .e-camino { fill: none; stroke-width: 3 !important; }
  .e-arbol path { fill: none; stroke-width: 4 !important; } .e-arbol circle { fill: #8ea85b; }
  .e-marco { fill: none; stroke-width: 3 !important; }
  .e-cerros, .e-jardin { fill: #9fb48a; }
  .e-cerro-lejos { fill: #c3cdb6; stroke: none !important; }
  .e-blackout { fill: #2d3328; transform-box: fill-box; transform-origin: 50% 0; transform: scaleY(.02); }
  .e-oscuro { fill: #0e120b; stroke: none !important; opacity: 0; pointer-events: none; }
  .e-noche rect { fill: #253043; } .e-noche { opacity: 0; }
  .e-estrella { fill: #fbfcf8; stroke: none !important; }
  .e-cama rect, .e-cama path { fill: #fbfcf8; } .e-cama .e-frazada { fill: var(--lima); } .e-almohada { fill: #fff !important; }
  .e-zzz text { font-size: 30px; fill: var(--lima); opacity: 0; }
  .e-lampara path { fill: #f4d35e; }
  .e-sunscreen { transform-box: fill-box; transform-origin: 50% 0; transform: scaleY(.04); }
  .e-rayo { fill: #f4d35e; stroke: none !important; opacity: .35; }
  .e-sofa rect { fill: #8f978a; } .e-sofa path { fill: none; stroke-width: 4 !important; }
  .e-planta > path { fill: #e2d7bf; } .e-hojas path { fill: none; stroke: #55691a !important; stroke-width: 6 !important; }
  .e-hojas { transform-box: fill-box; transform-origin: 50% 100%; }
  .e-duo-fijo rect, .e-duo-mov rect { stroke: none !important; }
  .e-duo-fijo rect { fill: rgba(251, 252, 248, .55); }
  .e-duo-mov rect { fill: #3a4033; }
  .e-cadena { fill: none; stroke-dasharray: 3 5; stroke-width: 3 !important; }
  .e-pomo { fill: var(--lima); }
  .e-flecha path { fill: none; stroke: var(--lima-oscuro) !important; stroke-width: 4 !important; }
  .e-cielo-ciclo { fill: #bfdbe6; }
  .e-doble-sun, .e-doble-black { transform-box: fill-box; transform-origin: 50% 0; transform: scaleY(.02); }
  .e-doble-black rect { fill: #2d3328; }
  .e-etq rect { fill: var(--blanco); } .e-etq text { font-size: 22px; text-anchor: middle; } .e-etq { opacity: .25; }
  .e-riel { fill: var(--grafito); }
  .e-lama { fill: #efe9dc; transform-box: fill-box; transform-origin: 50% 50%; }
  .e-casa rect { fill: #f3efe6; } .e-techo { fill: #b86f4c; }
  .e-furgon rect, .e-furgon > path { fill: var(--lima); } .e-furgon circle { fill: var(--grafito); } .e-furgon-logo { stroke-width: 4 !important; }
  .e-furgon { transform: translateX(-220px); }
  .e-baja { transform: scaleY(.05); }
  .e-sop { fill: var(--grafito); opacity: 0; }
  .e-chispa { fill: none; stroke: var(--lima) !important; stroke-width: 4 !important; opacity: 0; transform-box: fill-box; transform-origin: center; }
  .e-tubo-cae { opacity: 0; }
  .e-tela { fill: #cfd6bf; } .e-tela-baja { transform-box: fill-box; transform-origin: 50% 0; transform: scaleY(0); }
  .e-escalera path { fill: none; stroke: var(--lima-oscuro) !important; stroke-width: 5 !important; }
  .e-persona circle { fill: var(--grafito); } .e-persona path { fill: none; stroke-width: 7 !important; }
  .e-taladro { fill: var(--lima); }
  .e-brazo { transform-box: view-box; transform-origin: 160px 212px; }

  /* Animaciones: solo en la diapositiva activa (al activarse, se reinician) */
  .activa .e-roller { animation: e-roller 2.6s var(--d, 0s) cubic-bezier(.45, 0, .2, 1) infinite alternate; }
  @keyframes e-roller { from { transform: scaleY(.08); } to { transform: scaleY(var(--h, .7)); } }
  .activa .e-n1 { animation: e-nube 9s linear infinite alternate; }
  .activa .e-n2 { animation: e-nube 7s linear infinite alternate-reverse; }
  @keyframes e-nube { to { transform: translateX(60px); } }
  .activa .e-blackout { animation: e-bajar 1.4s .5s cubic-bezier(.5, 0, .2, 1) forwards; }
  .activa .e-e-oscuro, .activa .e-oscuro { animation: e-fundir 1.4s .7s ease forwards; }
  .activa .e-noche { animation: e-aparece 1s 1.6s ease forwards; }
  .activa .e-sol { animation: none; }
  .e-dormitorio .e-sol { transition: opacity .8s; }
  .activa.hero-slide .e-dormitorio .e-sol { animation: e-desaparece .8s .6s forwards; }
  .activa .e-zzz text { animation: e-zzz 2.4s ease-out infinite; }
  .activa .e-zzz text:nth-child(2) { animation-delay: .5s; } .activa .e-zzz text:nth-child(3) { animation-delay: 1s; }
  .activa .e-zzz { animation: e-aparece .3s 2.2s both; }
  @keyframes e-bajar { to { transform: scaleY(1); } }
  @keyframes e-fundir { to { opacity: .45; } }
  @keyframes e-aparece { from { opacity: 0; } to { opacity: 1; } }
  @keyframes e-desaparece { to { opacity: 0; } }
  @keyframes e-zzz { 0% { opacity: 0; transform: translate(0, 10px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(24px, -40px); } }
  .activa .e-sunscreen { animation: e-bajar-70 1.6s .4s cubic-bezier(.5, 0, .2, 1) forwards; }
  @keyframes e-bajar-70 { to { transform: scaleY(.72); } }
  .activa .e-rayo { animation: e-rayo 1.6s .4s ease forwards; }
  @keyframes e-rayo { to { opacity: .12; } }
  .activa .e-sol-mueve { animation: e-sol-mueve 6s ease-in-out infinite alternate; }
  @keyframes e-sol-mueve { to { transform: translate(-40px, 16px); } }
  .activa .e-hojas { animation: e-hojas 2.4s ease-in-out infinite alternate; }
  @keyframes e-hojas { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
  .activa .e-duo-mov { animation: e-duo 2.2s .3s cubic-bezier(.6, 0, .3, 1) infinite alternate; }
  @keyframes e-duo { from { transform: translateY(0); } to { transform: translateY(22px); } }
  .activa .e-cadena { animation: e-cadena .6s linear infinite; }
  @keyframes e-cadena { to { stroke-dashoffset: -8; } }
  .activa .e-flecha { animation: e-flecha 1.1s ease-in-out infinite alternate; }
  @keyframes e-flecha { to { transform: translateY(14px); } }
  .activa .e-doble-sun { animation: e-bajar 1.2s .3s cubic-bezier(.5, 0, .2, 1) forwards; }
  .activa .e-doble-black { animation: e-bajar 1.2s 2.1s cubic-bezier(.5, 0, .2, 1) forwards; }
  .activa .e-cielo-ciclo { animation: e-cielo 1.4s 1.6s ease forwards; }
  @keyframes e-cielo { to { fill: #253043; } }
  .e-sol-pone { transform-box: fill-box; } .e-luna-sale { opacity: 0; }
  .activa .e-sol-pone { animation: e-pone 1.4s 1.4s ease forwards; }
  @keyframes e-pone { to { transform: translateY(160px); opacity: 0; } }
  .activa .e-luna-sale { animation: e-aparece 1s 2s ease forwards; }
  .activa .e-etq-dia { animation: e-etq 1s .3s ease forwards; }
  .activa .e-etq-noche { animation: e-etq 1s 2.1s ease forwards; }
  @keyframes e-etq { to { opacity: 1; } }
  .activa .e-lama { animation: e-lama 1.6s calc(var(--i) * .09s) cubic-bezier(.5, 0, .2, 1) infinite alternate; }
  @keyframes e-lama { from { transform: scaleX(1); } to { transform: scaleX(.12); } }
  .activa .e-baja { animation: e-bajar-70b 1.2s var(--d) cubic-bezier(.5, 0, .2, 1) forwards; }
  @keyframes e-bajar-70b { to { transform: scaleY(.7); } }
  .activa .e-furgon { animation: e-furgon 2s .6s cubic-bezier(.3, .8, .3, 1) forwards; }
  @keyframes e-furgon { to { transform: translateX(40px); } }
  .activa .e-sop1 { animation: e-aparece .2s .5s forwards; } .activa .e-sop2 { animation: e-aparece .2s 1.3s forwards; }
  .activa .e-ch1 { animation: e-chispa .6s .4s ease-out; } .activa .e-ch2 { animation: e-chispa .6s 1.2s ease-out; }
  @keyframes e-chispa { from { opacity: 1; transform: scale(.3); } to { opacity: 0; transform: scale(1.8); } }
  .activa .e-persona { animation: e-persona 2.2s cubic-bezier(.5, 0, .3, 1) forwards; }
  @keyframes e-persona { 0%, 25% { transform: none; } 45%, 100% { transform: translateX(270px); } }
  .activa .e-brazo { animation: e-brazo .25s ease-in-out 6 alternate; }
  @keyframes e-brazo { to { transform: rotate(-7deg); } }
  .activa .e-tubo-cae { animation: e-tubo-cae .6s 1.8s cubic-bezier(.3, 1.4, .5, 1) forwards; }
  @keyframes e-tubo-cae { from { opacity: 0; transform: translateY(-50px); } to { opacity: 1; transform: none; } }
  .activa .e-tela-baja { animation: e-bajar 1.2s 2.4s cubic-bezier(.5, 0, .2, 1) forwards; }

  /* Burbujas de mensaje que entran desde los lados */
  .hero-burbuja { position: absolute; z-index: 2; background: var(--blanco); color: var(--tinta); border: 1.5px solid var(--grafito); box-shadow: 4px 4px 0 var(--lima); padding: 8px 12px; font: 600 14px var(--sans); white-space: nowrap; opacity: 0; pointer-events: none; }
  .hero-burbuja.b0 { top: 14%; left: 6%; transform: translateX(-40px); }
  .hero-burbuja.b1 { top: 30%; right: 6%; transform: translateX(40px); }
  .hero-slide.activa .hero-burbuja { animation: e-burbuja .6s cubic-bezier(.2, 1.3, .4, 1) forwards; }
  .hero-slide.activa .hero-burbuja.b0 { animation-delay: .5s; }
  .hero-slide.activa .hero-burbuja.b1 { animation-delay: 1.1s; }
  @keyframes e-burbuja { to { opacity: 1; transform: none; } }
  .hero-slide { transition: opacity .7s ease, transform .7s cubic-bezier(.2, .8, .2, 1); transform: scale(1.04); }
  .hero-slide.activa { transform: none; }
  @media (max-width: 760px) {
    .hero-burbuja { font-size: 12px; padding: 6px 9px; }
    .hero-burbuja { display: none; }
    .btn-cotizar-nav { display: none; }
  }

  /* ---------- Franjas persuasivas ---------- */
  .franja { overflow: hidden; padding-block: clamp(22px, 3vw, 34px); border-block: 1.5px solid var(--grafito); }
  .franja-lima { background: var(--lima); color: var(--tinta); }
  .franja-grafito { background: var(--grafito); color: var(--blanco); }
  .franja-in { display: grid; grid-template-columns: auto 1fr auto; gap: clamp(14px, 3vw, 36px); align-items: center; }
  .franja-grande { font-family: var(--display); font-weight: 900; font-size: clamp(34px, 4.6vw, 64px); line-height: .95; margin: 0; }
  .franja-chico { margin: 0; max-width: 30ch; font-size: 16px; font-weight: 500; }
  .franja-grafito .franja-chico { color: #cfd5c4; }
  .franja-ico { width: clamp(52px, 6vw, 76px); height: auto; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
  .franja-grafito .franja-ico { stroke: var(--lima); }
  .franja .franja-grande, .franja .franja-chico, .franja .franja-ico { transition: transform .9s cubic-bezier(.2, .8, .2, 1), opacity .9s ease; }
  .franja.fuera .franja-grande { transform: translateX(-80px); opacity: 0; }
  .franja.fuera .franja-chico { transform: translateX(80px); opacity: 0; }
  .franja.fuera .franja-ico { transform: scale(.4) rotate(-40deg); opacity: 0; }
  .franja .franja-chico { transition-delay: .15s; }
  .fr-aguja, .fr-aguja2 { transform-box: view-box; transform-origin: 32px 32px; animation: fr-gira 4s linear infinite; }
  .fr-aguja2 { animation-duration: 12s; }
  @keyframes fr-gira { to { transform: rotate(360deg); } }
  .fr-pulso { animation: fr-pulso 1.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
  @keyframes fr-pulso { 50% { transform: scale(1.8); } }
  .fr-cortina { fill: currentColor; transform-box: fill-box; transform-origin: 50% 0; animation: fr-cortina 2s ease-in-out infinite alternate; }
  @keyframes fr-cortina { from { transform: scaleY(.1); } to { transform: scaleY(1); } }
  .fr-rueda-g { animation: fr-rebote .5s ease-in-out infinite alternate; }
  @keyframes fr-rebote { to { transform: translateY(-2px); } }
  .fr-viento { animation: fr-viento .8s linear infinite; }
  @keyframes fr-viento { from { transform: translateX(6px); opacity: 1; } to { transform: translateX(-12px); opacity: 0; } }
  @media (max-width: 760px) {
    .franja-in { grid-template-columns: auto 1fr; }
    .franja-chico { grid-column: 1 / -1; }
  }

  /* Características que llegan desde los lados */
  .rv-izq { opacity: 0; transform: translateX(-60px); transition: opacity .8s ease, transform .8s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--i, 0) * 90ms); }
  .rv-der { opacity: 0; transform: translateX(60px); transition: opacity .8s ease, transform .8s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--i, 0) * 90ms); }
  .rv-izq.visto, .rv-der.visto { opacity: 1; transform: none; }

  /* Testimonios: cinta siempre en movimiento */
  .testimonios-cinta { display: flex; }
  @media (max-width: 760px) { .testimonios-cinta .testi { flex-basis: 84vw; } }

  /* ---------- Telón (modal con cortina) ---------- */
  .btn-cotizar-nav { padding: 12px 16px; }
  .telon { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; }
  .telon[hidden] { display: none; }
  .telon-tela { position: absolute; inset: 0; background: var(--grafito); transform-origin: 50% 0; transform: scaleY(0); overflow: hidden;
    background-image: repeating-linear-gradient(0deg, rgba(255, 255, 255, .025) 0 2px, transparent 2px 7px); }
  .telon-tubo { position: absolute; left: 0; right: 0; top: 0; height: 18px; background: #11140e; border-bottom: 3px solid var(--lima); }
  .telon-barra { position: absolute; left: 0; right: 0; bottom: 0; height: 14px; background: var(--lima); }
  .telon-dibujo { position: absolute; left: 0; right: 0; bottom: 14px; width: 100%; height: 40%; opacity: .5; }
  .telon-casas path, .telon-casas rect { fill: none; stroke: var(--lima-oscuro); stroke-width: 1.5; }
  .telon-tarjeta { position: relative; width: min(560px, 100%); background: var(--mineral); border: 2px solid var(--grafito); box-shadow: 10px 10px 0 var(--lima); padding: clamp(24px, 4vw, 40px); opacity: 0; transform: translateY(40px) scale(.96); max-height: calc(100vh - 32px); overflow-y: auto; }
  .telon-tarjeta h2 { font-size: clamp(42px, 6vw, 64px); margin: 6px 0 10px; }
  .telon-tarjeta h2 em { font-style: normal; color: var(--lima-oscuro); display: block; }
  .telon-bajada { font-size: 17px; color: var(--gris); margin: 0 0 18px; }
  .telon-acciones { display: grid; gap: 10px; }
  .telon-acciones .btn { width: 100%; font-size: 17px; }
  .telon-sellos { list-style: none; margin: 18px 0 8px; padding: 14px 0 0; border-top: 1px solid var(--borde); display: grid; gap: 8px; font-size: 15px; font-weight: 500; }
  .telon-sellos li { display: flex; gap: 10px; align-items: center; }
  .telon-sellos svg { width: 24px; height: 24px; fill: none; stroke: var(--lima-oscuro); stroke-width: 1.8; }
  .telon-link { display: inline-block; margin-top: 8px; font-weight: 600; font-size: 15px; }
  .telon-cerrar { position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; border: 1.5px solid var(--grafito); background: var(--blanco); cursor: pointer; display: grid; place-items: center; transition: transform .2s ease; }
  .telon-cerrar:hover { transform: rotate(90deg); }
  .telon-cerrar svg { width: 20px; height: 20px; stroke: var(--tinta); stroke-width: 2.4; fill: none; }
  .telon.abre .telon-tela { animation: telon-baja .75s cubic-bezier(.7, 0, .2, 1) forwards; }
  .telon.abre .telon-tela .telon-barra { animation: telon-rebote .4s .7s ease-out; }
  .telon.abre .telon-tarjeta { animation: telon-tarjeta .6s .65s cubic-bezier(.2, 1.2, .4, 1) forwards; }
  .telon.cierra .telon-tarjeta { animation: telon-tarjeta-sale .3s ease forwards; }
  .telon.cierra .telon-tela { transform: scaleY(1); animation: telon-sube .7s .2s cubic-bezier(.7, 0, .2, 1) forwards; }
  @keyframes telon-baja { from { transform: scaleY(0); } to { transform: scaleY(1); } }
  @keyframes telon-sube { from { transform: scaleY(1); } to { transform: scaleY(0); } }
  @keyframes telon-rebote { 40% { transform: translateY(6px); } }
  @keyframes telon-tarjeta { to { opacity: 1; transform: none; } }
  @keyframes telon-tarjeta-sale { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(30px) scale(.96); } }
  body.con-telon { overflow: hidden; }
  @media (prefers-reduced-motion: reduce) { .telon.abre .telon-tela { transform: scaleY(1); } .telon.abre .telon-tarjeta { opacity: 1; transform: none; } }

  /* ---------- Pie ilustrado ---------- */
  .pie-paisaje { position: relative; background: var(--mineral); margin-top: 0; }
  .pie-paisaje svg { display: block; width: 100%; height: clamp(150px, 18vw, 260px); }
  .pie-frase { position: absolute; left: var(--gutter); top: clamp(10px, 2vw, 30px); margin: 0; font-family: var(--display); font-weight: 900; font-size: clamp(34px, 4.5vw, 64px); line-height: .9; transform: rotate(-3deg); z-index: 1; }
  .pie-frase em { font-style: normal; color: var(--lima-oscuro); display: block; text-decoration: underline; text-decoration-color: var(--lima); text-decoration-thickness: 6px; text-underline-offset: 6px; }
  .pp-cerro { fill: #c9cfbd; }
  .pp-nieve { fill: #fbfcf8; }
  .pp-ciudad rect, .pp-ciudad path { fill: var(--grafito); }
  .pp-vidrio { fill: #f4d35e; opacity: .85; }
  .pp-roller { fill: var(--lima); transform-box: fill-box; transform-origin: 50% 0; transform: scaleY(var(--h)); animation: pp-roller 5s var(--d) ease-in-out infinite alternate; }
  @keyframes pp-roller { from { transform: scaleY(.1); } to { transform: scaleY(var(--h)); } }
  .pp-suelo { stroke: var(--grafito); stroke-width: 4; }
  .pie { border-top: 0; }
  @media (max-width: 760px) { .pie-frase { top: 6px; } }

  /* Carrusel del blog en la portada */
  .carrusel { position: relative; }
  .posts-carrusel { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 8px; }
  .posts-carrusel::-webkit-scrollbar { display: none; }
  .posts-carrusel > * { flex: 0 0 calc((100% - 36px) / 3); scroll-snap-align: start; }
  .carrusel-flecha { position: absolute; top: 34%; z-index: 2; width: 46px; height: 46px; border: 1.5px solid var(--grafito); background: var(--blanco); cursor: pointer; display: grid; place-items: center; transition: background .15s ease, transform .15s ease; }
  .carrusel-flecha:hover { background: var(--lima); transform: translateY(-2px); }
  .carrusel-flecha.prev { left: -22px; } .carrusel-flecha.next { right: -22px; }
  .carrusel-flecha svg { width: 22px; height: 22px; fill: none; stroke: var(--tinta); stroke-width: 2.4; }
  @media (max-width: 1100px) { .posts-carrusel > * { flex-basis: calc((100% - 18px) / 2); } }
  @media (max-width: 760px) { .posts-carrusel > * { flex-basis: 82%; } .carrusel-flecha { display: none; } }

  /* Así se vive: carrusel de fotos con personas */
  .vida { padding-block: clamp(44px, 5.5vw, 72px) 0; overflow: hidden; }
  .vida-cabeza { display: flex; justify-content: space-between; align-items: end; gap: 16px; }
  .vida h2 em { font-style: normal; color: var(--lima-oscuro); }
  .vida .eyebrow { margin: 0 0 6px; }
  .vida-flechas { display: flex; gap: 8px; }
  .vida-flechas button { width: 46px; height: 46px; border: 1.5px solid var(--grafito); background: var(--blanco); cursor: pointer; display: grid; place-items: center; transition: background .15s ease; }
  .vida-flechas button:hover { background: var(--lima); }
  .vida-flechas svg { width: 22px; height: 22px; fill: none; stroke: var(--tinta); stroke-width: 2.4; }
  .vida-pista { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 24px max(var(--gutter), calc((100vw - var(--ancho)) / 2 + var(--gutter))) 8px; }
  .vida-pista::-webkit-scrollbar { display: none; }
  .vida-foto { flex: 0 0 min(620px, 84vw); margin: 0; position: relative; scroll-snap-align: center; border: 1.5px solid var(--grafito); overflow: hidden; background: var(--grafito); }
  .vida-foto img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; transition: transform 1.2s cubic-bezier(.2, .8, .2, 1); }
  .vida-foto:hover img { transform: scale(1.05); }
  .vida-foto figcaption { position: absolute; left: 14px; bottom: 14px; right: 14px; display: grid; gap: 2px; background: rgba(251, 252, 248, .94); border: 1.5px solid var(--grafito); box-shadow: 4px 4px 0 var(--lima); padding: 10px 14px; transform: translateY(12px); opacity: .0; transition: transform .6s cubic-bezier(.2, .8, .2, 1), opacity .6s ease; }
  .vida-foto.actual figcaption, .vida-foto:hover figcaption { transform: none; opacity: 1; }
  .vida-foto figcaption strong { font-family: var(--display); font-size: 26px; line-height: 1; }
  .vida-foto figcaption span { font-size: 14px; color: var(--gris); }
  @media (max-width: 760px) { .vida-flechas { display: none; } }

  /* ==========================================================================
     Hero v4: foto real | mensaje + escena animada | calculadora sincronizada
     ========================================================================== */
  .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .hero-v4 { display: grid; grid-template-columns: 30fr 40fr 30fr; min-height: 600px; background: var(--grafito); }
  .hero-v4 .hero-foto { position: relative; overflow: hidden; min-height: 100%; }
  .hero-v4 .hero-slide { position: absolute; inset: 0; opacity: 0; transform: scale(1.06); transition: opacity 1s ease, transform 1.4s cubic-bezier(.2, .8, .2, 1); }
  .hero-v4 .hero-slide.activa { opacity: 1; transform: none; }
  .hero-v4 .hero-slide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); }
  .hero-v4 .hero-slide.activa img { animation: rmx-kenburns 9.5s linear forwards; }
  @keyframes rmx-kenburns { from { transform: scale(1.12) translateX(2%); } to { transform: scale(1) translateX(0); } }
  .hero-etiqueta { position: absolute; left: 16px; top: 16px; background: var(--lima); color: var(--tinta); border: 1.5px solid var(--grafito); padding: 6px 10px; font-size: 12px; font-weight: 700; transform: translateX(-120%); transition: transform .6s .5s cubic-bezier(.2, 1.2, .4, 1); }
  .hero-slide.activa .hero-etiqueta { transform: none; }
  .hero-v4 .hero-puntos { left: 16px; bottom: 16px; }
  .hero-v4 .hero-puntos button { width: 28px; }
  .hero-v4 .hero-puntos [aria-selected="true"] span::after { animation-duration: 9s; }
  .hero-medio { color: var(--blanco); padding: 34px clamp(20px, 2.6vw, 40px) 20px; display: grid; grid-template-rows: auto 1fr; gap: 12px; min-width: 0; }
  .hero-v4 .hero-titulo { font-size: clamp(44px, 4.2vw, 68px); }
  .hero-texto { transform: translateX(-30px); }
  .hero-texto.activa { transform: none; }
  .hero-texto .hero-titulo em { transition: letter-spacing .8s ease; }
  .hero-bajada { color: #d8ddd0; font-size: 16px; max-width: 42ch; margin: 12px 0 0; }
  .hero-v4 .hero-chip { margin-top: 12px; }
  .hero-escenas { position: relative; min-height: 220px; }
  .hero-escena { position: absolute; inset: 0; opacity: 0; transform: translateY(24px) scale(.97); transition: opacity .7s ease, transform .8s cubic-bezier(.2, .8, .2, 1); }
  .hero-escena.activa { opacity: 1; transform: none; transition-delay: .2s; }
  .hero-escena .escena { position: static; width: 100%; height: 100%; border: 1.5px solid #4b5245; background: var(--mineral); box-shadow: 6px 6px 0 var(--lima); }
  .hero-calc { padding: 34px clamp(16px, 2vw, 30px) 24px 0; display: flex; align-items: center; }
  .hero-calc .calc { width: 100%; animation: rmx-entra-der .8s .2s cubic-bezier(.2, .8, .2, 1) both; }
  .calc.sincroniza { animation: rmx-sincro .8s ease; }
  @keyframes rmx-sincro { 30% { box-shadow: 8px 8px 0 var(--lima), 0 0 0 6px rgba(181, 207, 82, .45); } }
  .calc.sincroniza select { animation: rmx-sincro-sel .8s ease; }
  @keyframes rmx-sincro-sel { 30% { background-color: #f1f5df; border-color: var(--lima-oscuro); } }

  /* Personas y objetos nuevos de las escenas */
  .e-cielo-tarde { fill: #f2c48d; }
  .e-lector circle, .e-durmiente circle, .e-trabajador circle, .e-tirador circle, .e-espectador circle, .e-caminante circle { fill: var(--grafito); }
  .e-lector path, .e-trabajador path, .e-tirador path, .e-espectador path, .e-caminante path { fill: none; stroke-width: 7 !important; }
  .e-libro path { fill: var(--lima); stroke-width: 2 !important; }
  .e-libro { transform-box: fill-box; transform-origin: 0 100%; }
  .activa .e-libro { animation: e-libro 1.8s ease-in-out infinite alternate; }
  @keyframes e-libro { to { transform: rotate(-6deg) translateY(-2px); } }
  .e-frazada-sube { fill: var(--lima); transform-box: fill-box; transform-origin: 50% 100%; }
  .activa .e-frazada-sube { animation: e-frazada 1s .2s ease forwards; }
  @keyframes e-frazada { from { transform: scaleY(.3); } to { transform: scaleY(1); } }
  .activa .e-sol-sale { animation: e-desaparece .8s .8s forwards; }
  .e-velador rect { fill: #e2d7bf; } .e-lampara-luz { fill: #f4d35e; }
  .e-dormitorio .e-lampara-luz { opacity: .3; }
  .activa.hero-escena .e-dormitorio .e-lampara-luz { animation: e-aparece .6s 2.4s forwards; }
  .e-escritorio path { fill: none; stroke-width: 4 !important; } .e-escritorio rect { fill: #cfe3ea; }
  .e-oscuro-suave { opacity: 0; }
  .activa .e-oscuro-suave { animation: e-fundir-suave 1.4s 3.4s ease forwards; }
  @keyframes e-fundir-suave { to { opacity: .28; } }
  .e-lampara-mesa > path { fill: none; stroke-width: 3 !important; }
  .e-doble .e-lampara-luz { opacity: .25; }
  .activa .e-doble .e-lampara-luz { animation: e-aparece .4s 4.2s forwards; }
  .activa .e-doble-sun { animation: e-bajar-70 1.2s .6s cubic-bezier(.5, 0, .2, 1) forwards; }
  .activa .e-doble-black { animation: e-bajar 1.3s 3.6s cubic-bezier(.5, 0, .2, 1) forwards; }
  .activa .e-cielo-ciclo { animation: e-cielo 1.6s 2.8s ease forwards; }
  .activa .e-sol-pone { animation: e-pone 1.6s 2.6s ease forwards; }
  .activa .e-luna-sale { animation: e-aparece 1s 3.4s ease forwards; }
  .activa .e-etq-dia { animation: e-etq .6s .4s ease forwards; }
  .activa .e-etq-noche { animation: e-etq .6s 3.6s ease forwards; }
  .e-brazo-cadena { transform-box: view-box; transform-origin: 120px 184px; }
  .activa .e-brazo-cadena { animation: e-tira .55s ease-in-out infinite alternate; }
  @keyframes e-tira { to { transform: translateY(10px) rotate(4deg); } }
  .e-luz-duo path { fill: #f4d35e; stroke: none !important; opacity: .1; }
  .activa .e-luz-duo path { animation: e-luz-duo 2.2s .3s ease-in-out infinite alternate; }
  @keyframes e-luz-duo { to { opacity: .4; } }
  .e-negro rect { fill: #22271e !important; }
  .e-cine .e-duo-fijo rect { fill: #22271e; opacity: .92; }
  .e-duo-cierra { transform: translateY(-17px); }
  .activa .e-duo-cierra { animation: e-duo-cierra 1.6s 1s cubic-bezier(.6, 0, .3, 1) forwards; }
  @keyframes e-duo-cierra { to { transform: translateY(0); } }
  .e-cine .e-oscuro { opacity: 0; }
  .activa .e-cine .e-oscuro { animation: e-fundir 1.4s 1.8s ease forwards; }
  .e-tele rect { fill: var(--grafito); } .e-tele path { fill: none; stroke-width: 4 !important; }
  .e-pantalla { fill: #3b4a5c !important; }
  .activa .e-pantalla { animation: e-pantalla 1.2s 2.2s ease-in-out infinite alternate; }
  @keyframes e-pantalla { from { fill: #5d7fa3; } to { fill: #b5cf52; } }
  .e-brillo-tele { fill: #9fc0e0; stroke: none !important; opacity: 0; }
  .activa .e-brillo-tele { animation: e-brillo 1.2s 2.2s ease-in-out infinite alternate; }
  @keyframes e-brillo { from { opacity: .08; } to { opacity: .22; } }
  .e-cabritas path { fill: #e8574b; stroke-width: 2 !important; } .e-cabritas circle { fill: #fbfcf8; stroke-width: 1.5 !important; }
  .e-caminante { transform: translateX(0); }
  .activa .e-caminante { animation: e-camina 5s 1.8s cubic-bezier(.4, 0, .4, 1) forwards; }
  @keyframes e-camina { to { transform: translateX(300px); opacity: .0; } }
  .e-pierna1, .e-pierna2 { transform-box: view-box; transform-origin: 90px 275px; }
  .activa .e-pierna1 { animation: e-paso .4s 1.8s ease-in-out 12 alternate; }
  .activa .e-pierna2 { animation: e-paso .4s 1.8s ease-in-out 12 alternate-reverse; }
  @keyframes e-paso { from { transform: rotate(-14deg); } to { transform: rotate(14deg); } }
  .activa .e-lama { animation: e-lama-abre 1.4s calc(var(--i) * .08s) cubic-bezier(.5, 0, .2, 1) forwards; }
  @keyframes e-lama-abre { to { transform: scaleX(.1); } }

  @media (max-width: 1100px) {
    .hero-v4 { grid-template-columns: 1fr 1fr; }
    .hero-v4 .hero-foto { grid-column: 1 / -1; height: 280px; min-height: 0; }
    .hero-calc { padding: 24px var(--gutter) 28px 0; }
  }
  @media (max-width: 760px) {
    .hero-v4 { grid-template-columns: 1fr; }
    .hero-v4 .hero-foto { position: relative; height: 230px; inset: auto; z-index: 0; display: block; }
    .hero-v4 .hero-foto::after { background: linear-gradient(180deg, transparent 50%, var(--grafito)); }
    .hero-v4::before { display: none; }
    .hero-medio { padding: 8px var(--gutter) 8px; }
    .hero-v4 .hero-titulo { font-size: 46px; }
    .hero-escenas { min-height: 0; aspect-ratio: 600 / 380; }
    .hero-calc { padding: 12px var(--gutter) 24px; }
    .hero-v4 .hero-puntos { top: auto; bottom: 12px; right: auto; left: var(--gutter); }
  }

  /* Preguntas frecuentes al final de la portada */
  .faq-portada { padding-block: clamp(44px, 5.5vw, 72px); background: var(--blanco); border-top: 1px solid var(--borde); }
  .faq-portada-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(24px, 4vw, 64px); align-items: start; }
  .faq-portada-cabeza { position: sticky; top: 100px; }
  .faq-portada-cabeza h2 { font-size: clamp(44px, 5vw, 68px); margin: 6px 0 10px; }
  .faq-portada-cabeza h2 em { font-style: normal; color: var(--lima-oscuro); display: block; }
  .faq-portada-cabeza p:not(.eyebrow) { color: var(--gris); font-size: 17px; margin: 0 0 20px; }
  .faq-portada-cabeza .eyebrow { margin: 0; }
  .faq-portada-lista { display: grid; gap: 10px; }
  .faq-item { border: 1.5px solid var(--grafito); background: var(--mineral); transition: box-shadow .25s ease, transform .25s ease, background .25s ease; }
  .faq-item:hover { transform: translateX(4px); }
  .faq-item[open] { background: var(--blanco); box-shadow: 6px 6px 0 var(--lima); }
  .faq-item summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 36px 1fr 24px; gap: 10px; align-items: center; padding: 16px 18px; font-weight: 600; font-size: 17px; }
  .faq-item summary::-webkit-details-marker { display: none; }
  .faq-item summary::after { content: "+"; font-family: var(--mono); font-size: 24px; transition: transform .3s ease; text-align: center; }
  .faq-item[open] summary::after { transform: rotate(45deg); }
  .faq-num { color: var(--lima-oscuro); font-size: 14px; font-weight: 700; }
  .faq-item p { margin: 0; padding: 0 18px 18px 64px; color: var(--gris); font-size: 16px; animation: rmx-abre .35s ease; }
  .faq-item p a { color: var(--tinta); font-weight: 600; }
  @media (max-width: 900px) {
    .faq-portada-grid { grid-template-columns: 1fr; }
    .faq-portada-cabeza { position: static; }
    .faq-item p { padding-left: 18px; }
  }
  /* Crédito */
  .pie .legal { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 20px; }
  .credito a { color: var(--lima); font-weight: 600; }
  @media (max-width: 760px) {
    .pie-paisaje svg { height: 200px; }
    .pie-frase { font-size: 30px; }
  }

  /* ==========================================================================
     Hero v5: UNA sola lámina. La foto real cubre todo el fondo; encima, el mensaje
     y la animación en trazo (sin recuadros) y la calculadora flotando a la derecha.
     ========================================================================== */
  .hero-v4 { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 380px); gap: clamp(20px, 3vw, 48px); align-items: center; min-height: 640px; padding: 40px max(var(--gutter), calc((100vw - var(--ancho)) / 2 + var(--gutter))); isolation: isolate; overflow: hidden; }
  .hero-v4 .hero-foto { position: absolute; inset: 0; z-index: -2; min-height: 0; height: auto; grid-column: auto; }
  .hero-v4 .hero-foto::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(22, 26, 18, .82) 0%, rgba(22, 26, 18, .55) 45%, rgba(22, 26, 18, .35) 70%, rgba(22, 26, 18, .6) 100%), linear-gradient(0deg, rgba(22, 26, 18, .55), transparent 40%); }
  .hero-v4 .hero-etiqueta { top: auto; bottom: 22px; left: auto; right: max(var(--gutter), calc((100vw - var(--ancho)) / 2 + var(--gutter))); z-index: 2; transform: translateY(160%); }
  .hero-v4 .hero-slide.activa .hero-etiqueta { transform: none; }
  .hero-v4 .hero-puntos { z-index: 2; left: max(var(--gutter), calc((100vw - var(--ancho)) / 2 + var(--gutter))); bottom: 26px; }
  .hero-medio { padding: 0; grid-template-rows: auto auto; gap: 8px; text-shadow: 0 2px 20px rgba(0, 0, 0, .35); }
  .hero-v4 .hero-titulo { font-size: clamp(52px, 5.6vw, 88px); }
  .hero-bajada { color: #eef0e8; font-size: 18px; }
  .hero-calc { padding: 0; }
  .hero-escenas { min-height: 0; height: clamp(190px, 22vw, 280px); max-width: 560px; }
  .hero-escena .escena { border: 0; background: none; box-shadow: none; filter: drop-shadow(0 3px 10px rgba(0, 0, 0, .35)); }

  /* La escena pasa a ser dibujo de línea blanca sobre la foto: sin muros, cielos ni cajas. */
  .hero-v6 .escena .e-muro, .hero-v6 .escena .e-muro-calido, .hero-v6 .escena .e-cielo, .hero-v6 .escena .e-cielo-dia, .hero-v6 .escena .e-cielo-tarde,
  .hero-v6 .escena .e-cielo-ciclo, .hero-v6 .escena .e-cerros, .hero-v6 .escena .e-jardin, .hero-v6 .escena .e-noche, .hero-v6 .escena .e-oscuro,
  .hero-v6 .escena .e-rayo, .hero-v6 .escena .e-brillo-tele, .hero-v6 .escena .e-luz-duo, .hero-v6 .escena .e-vidrio { display: none; }
  .hero-v6 .escena rect, .hero-v6 .escena path, .hero-v6 .escena circle, .hero-v6 .escena ellipse { fill: none; stroke: #fbfcf8 !important; }
  .hero-v6 .escena .e-marco, .hero-v6 .escena .e-suelo { stroke: rgba(251, 252, 248, .7) !important; }
  .hero-v6 .escena .e-tubo, .hero-v6 .escena .e-barra, .hero-v6 .escena .e-riel { fill: #fbfcf8; }
  .hero-v6 .escena .e-sunscreen rect, .hero-v6 .escena .e-doble-sun rect { fill: rgba(251, 252, 248, .28) !important; }
  .hero-v6 .escena .e-blackout, .hero-v6 .escena .e-doble-black rect, .hero-v6 .escena .e-negro rect, .hero-v6 .e-cine .e-duo-fijo rect { fill: rgba(17, 20, 14, .82) !important; stroke: #fbfcf8 !important; }
  .hero-v6 .escena .e-duo-fijo rect { fill: rgba(251, 252, 248, .25); }
  .hero-v6 .escena .e-duo-mov rect { fill: rgba(181, 207, 82, .75); }
  .hero-v6 .escena .e-lama { fill: rgba(251, 252, 248, .45); }
  .hero-v6 .escena .e-persona circle, .hero-v6 .escena circle[cx][r="15"], .hero-v6 .escena circle[r="16"] { fill: #fbfcf8; }
  .hero-v6 .escena .e-lector path, .hero-v6 .escena .e-trabajador path, .hero-v6 .escena .e-tirador path, .hero-v6 .escena .e-espectador path, .hero-v6 .escena .e-caminante path { stroke: #fbfcf8 !important; }
  .hero-v6 .escena .e-sofa rect, .hero-v6 .escena .e-cama rect, .hero-v6 .escena .e-tele rect:first-child, .hero-v6 .escena .e-escritorio rect, .hero-v6 .escena .e-velador rect { fill: rgba(251, 252, 248, .1); }
  .hero-v6 .escena .e-frazada-sube, .hero-v6 .escena .e-libro path, .hero-v6 .escena .e-pomo, .hero-v6 .escena .e-cabritas path { fill: var(--lima) !important; stroke: var(--lima) !important; }
  .hero-v6 .escena .e-sol { fill: #f4d35e; stroke: #f4d35e !important; }
  .hero-v6 .escena .e-luna, .hero-v6 .escena .e-estrella { fill: #fbfcf8; }
  .hero-v6 .escena .e-lampara-luz { fill: #f4d35e; stroke: #f4d35e !important; }
  .hero-v6 .escena .e-zzz text, .hero-v6 .escena .e-etq text { fill: var(--lima); }
  .hero-v6 .escena .e-etq rect { fill: rgba(17, 20, 14, .6); }
  .hero-v6 .escena .e-pantalla { fill: rgba(93, 127, 163, .6) !important; }
  .hero-v6 .escena .e-hojas path, .hero-v6 .escena .e-arbol circle { stroke: var(--lima) !important; }
  .hero-v6 .escena .e-escalera path { stroke: var(--lima) !important; }

  @media (max-width: 1100px) {
    .hero-v4 { grid-template-columns: 1fr; padding-top: 48px; padding-bottom: 72px; }
    .hero-calc { max-width: 440px; }
    .hero-v4 .hero-foto { grid-column: auto; height: auto; }
  }
  @media (max-width: 760px) {
    .hero-v4 { padding: 28px var(--gutter) 64px; min-height: 0; }
    .hero-v4 .hero-foto { position: absolute; height: auto; }
    .hero-v4 .hero-foto::after { background: linear-gradient(180deg, rgba(22, 26, 18, .45) 0%, rgba(22, 26, 18, .7) 45%, rgba(22, 26, 18, .92) 70%); }
    .hero-escenas { height: 190px; }
    .hero-v4 .hero-puntos { left: var(--gutter); bottom: 20px; }
    .hero-v4 .hero-etiqueta { display: none; }
  }
  /* Banner a pantalla completa */
  .hero-v4 { min-height: calc(100vh - 76px); min-height: calc(100vh - 76px); min-height: calc(100svh - 76px); }
  .admin-bar .hero-v4 { min-height: calc(100vh - 108px); min-height: calc(100svh - 108px); }
  .hero-v4 .hero-titulo { font-size: clamp(60px, 6.6vw, 112px); }
  .hero-v4 .hero-chip { background: var(--lima); color: var(--tinta); border-color: var(--lima); font-weight: 700; }
  @media (max-width: 760px) { .hero-v4 { min-height: calc(100vh - 62px); min-height: calc(100svh - 62px); } .hero-v4 .hero-titulo { font-size: 52px; } }

  /* Calculadora mini en el banner; al abrirla baja como una cortina roller */
  .hero-calc { position: relative; align-self: center; }
  .calc-mini { position: relative; width: 100%; text-align: left; display: grid; gap: 6px; padding: 26px 22px 20px; background: rgba(251, 252, 248, .96); color: var(--tinta); border: 2px solid var(--grafito); box-shadow: 8px 8px 0 var(--lima); cursor: pointer; font: inherit; transition: transform .25s ease, box-shadow .25s ease; animation: rmx-entra-der .8s .2s cubic-bezier(.2, .8, .2, 1) both; }
  .calc-mini:hover { transform: translate(-3px, -3px); box-shadow: 11px 11px 0 var(--lima); }
  .calc-mini-tubo { position: absolute; left: -2px; right: -2px; top: -2px; height: 10px; background: var(--grafito); }
  .calc-mini .eyebrow { margin-top: 4px; }
  .calc-mini-nombre { font-family: var(--display); font-size: 30px; font-weight: 800; line-height: 1; }
  .calc-mini-precio { display: flex; align-items: baseline; gap: 10px; font-size: 38px; font-weight: 700; letter-spacing: -.02em; }
  .calc-mini-precio small { font-size: 13px; color: var(--gris); font-weight: 500; letter-spacing: 0; }
  .calc-mini-cta { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; background: var(--lima); border: 2px solid var(--grafito); padding: 13px 14px; font-weight: 700; }
  .calc-mini-cta svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; animation: rmx-flecha 1.2s ease-in-out infinite alternate; }
  @keyframes rmx-flecha { to { transform: translateY(4px); } }
  .calc-mini.cambia .calc-mini-nombre, .calc-mini.cambia [data-mini-total] { animation: rmx-pulso .45s ease; display: inline-block; }

  .calc-panel { position: absolute; right: 0; top: 50%; width: 100%; transform: translateY(-50%); z-index: 5; clip-path: inset(0 0 100% 0); visibility: hidden; transition: clip-path .75s cubic-bezier(.7, 0, .2, 1), visibility 0s .75s; }
  .calc-panel .calc { animation: none; box-shadow: 8px 8px 0 var(--lima); padding-top: 34px; }
  .calc-panel-tubo { position: absolute; left: -4px; right: -4px; top: -4px; height: 14px; background: #11140e; border-bottom: 3px solid var(--lima); z-index: 2; }
  .calc-panel-barra { position: absolute; left: -2px; right: -2px; bottom: 0; height: 10px; background: var(--lima); border: 2px solid var(--grafito); transform: translateY(-100vh); }
  .calc-cerrar { position: absolute; top: 20px; right: 12px; z-index: 3; width: 40px; height: 40px; border: 1.5px solid var(--grafito); background: var(--blanco); cursor: pointer; display: grid; place-items: center; transition: transform .2s ease; }
  .calc-cerrar:hover { transform: rotate(90deg); }
  .calc-cerrar svg { width: 18px; height: 18px; fill: none; stroke: var(--tinta); stroke-width: 2.4; }
  .hero-calc.abierta .calc-panel { clip-path: inset(-20px -20px -20px -20px); visibility: visible; transition: clip-path .85s cubic-bezier(.7, 0, .2, 1), visibility 0s; }
  .hero-calc.abierta .calc-panel-barra { animation: rmx-barra-baja .85s cubic-bezier(.7, 0, .2, 1) forwards; }
  @keyframes rmx-barra-baja { from { transform: translateY(-600px); } to { transform: none; } }
  .hero-calc.abierta .calc-mini { opacity: 0; pointer-events: none; transition: opacity .2s ease; }
  @media (prefers-reduced-motion: reduce) { .calc-panel { transition: none; } }
  @media (max-width: 760px) {
    .calc-panel { position: absolute; top: 0; transform: none; }
    .calc-mini-precio { font-size: 32px; }
  }

  /* ==========================================================================
     Hero v6: banner a pantalla completa partido en diagonal.
     Derecha: foto real con zoom lento hacia la persona. Izquierda: titular gigante
     que entra por líneas, bajada y escena vectorial que se sale sobre la foto.
     ========================================================================== */
  .hero-v6 { position: relative; overflow: hidden; background: var(--grafito); color: var(--blanco); min-height: calc(100vh - 76px); min-height: calc(100svh - 76px); display: grid; grid-template-columns: minmax(0, 52%) 1fr; isolation: isolate; }
  .admin-bar .hero-v6 { min-height: calc(100vh - 108px); min-height: calc(100svh - 108px); }
  .h6-fotos { position: absolute; inset: 0 0 0 36%; z-index: -1; clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%); }
  .h6-foto { position: absolute; inset: 0; opacity: 0; clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%); transition: clip-path 1.1s cubic-bezier(.7, 0, .2, 1), opacity 0s 1.1s; }
  .h6-foto.activa { opacity: 1; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); transition: clip-path 1.1s cubic-bezier(.7, 0, .2, 1), opacity 0s; z-index: 1; }
  .h6-foto img { width: 100%; height: 100%; object-fit: cover; transform-origin: 38% 45%; }
  .h6-foto.activa img { animation: h6-zoom 9.5s cubic-bezier(.3, 0, .6, 1) forwards; }
  @keyframes h6-zoom { from { transform: scale(1.02); } to { transform: scale(1.22) translateX(-2%); } }
  .h6-fotos::after { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(90deg, rgba(22, 26, 18, .55), transparent 35%), linear-gradient(0deg, rgba(22, 26, 18, .45), transparent 30%); pointer-events: none; }
  .h6-franja { position: absolute; z-index: 3; inset: 0; background: var(--lima); clip-path: polygon(22% 0, calc(22% + 12px) 0, 12px 100%, 0 100%); animation: h6-franja 1.2s .2s cubic-bezier(.7, 0, .2, 1) both; }
  @keyframes h6-franja { from { transform: translateY(-100%); } to { transform: none; } }

  .h6-texto { position: relative; z-index: 2; padding: clamp(40px, 7vh, 90px) clamp(20px, 3vw, 40px) 120px max(var(--gutter), calc((100vw - var(--ancho)) / 2 + var(--gutter))); display: flex; flex-direction: column; }
  .hero-v6 .hero-textos { display: grid; }
  .hero-v6 .hero-texto { grid-area: 1 / 1; transform: none; }
  .h6-producto { display: inline-block; color: var(--lima); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 14px; }
  .h6-titulo { font-family: var(--display); font-weight: 900; font-size: clamp(64px, 7.4vw, 136px); line-height: .86; margin: 0; letter-spacing: -.01em; }
  .h6-titulo .l { display: block; overflow: hidden; padding-bottom: .04em; }
  .h6-titulo .l > * { display: inline-block; transform: translateY(105%); transition: transform .9s cubic-bezier(.2, .9, .2, 1); }
  .h6-titulo em { font-style: normal; color: var(--lima); }
  .hero-texto.activa .h6-titulo .l > * { transform: none; }
  .hero-texto.activa .h6-titulo .l:nth-child(2) > * { transition-delay: .12s; }
  .hero-texto.activa .h6-titulo .l:nth-child(3) > * { transition-delay: .24s; }
  .hero-texto.activa .h6-titulo em { animation: h6-respira 3s 1.2s ease-in-out infinite alternate; }
  @keyframes h6-respira { to { letter-spacing: .02em; } }
  .h6-bajada { font-size: clamp(17px, 1.3vw, 21px); color: #d8ddd0; max-width: 34ch; margin: 18px 0 0; opacity: 0; transform: translateY(14px); transition: opacity .6s .45s, transform .6s .45s; }
  .h6-chip { display: inline-flex; gap: 8px; align-self: flex-start; margin-top: 20px; background: transparent; color: var(--blanco); border: 1.5px solid var(--lima); padding: 10px 14px; text-decoration: none; font-size: 15px; opacity: 0; transform: translateY(14px); transition: opacity .6s .6s, transform .6s .6s, background .2s; }
  .h6-chip strong { color: var(--lima); }
  .h6-chip:hover { background: var(--lima); color: var(--tinta); } .h6-chip:hover strong { color: var(--tinta); }
  .hero-texto.activa .h6-bajada, .hero-texto.activa .h6-chip { opacity: 1; transform: none; }
  .hero-texto:not(.activa) { opacity: 0; visibility: hidden; transition: opacity .4s, visibility 0s .4s; }
  .hero-texto.activa { opacity: 1; visibility: visible; }

  /* La escena sale del lado oscuro y se mete en la foto */
  .h6-escenas { position: absolute; z-index: 4; left: max(var(--gutter), calc((100vw - var(--ancho)) / 2 + var(--gutter))); bottom: 70px; width: min(44vw, 640px); height: min(34vh, 330px); max-width: none; pointer-events: none; }
  .hero-v6 .hero-escena { transform: translateX(-40px) scale(.96); }
  .hero-v6 .hero-escena.activa { transform: none; transition-delay: .4s; }
  .hero-v6 .hero-escena .escena { filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .5)); }
  /* Las cortinas de la escena suben y bajan todo el rato */
  .hero-v6 .activa .e-blackout { animation: h6-sube-baja 3.4s .4s ease-in-out infinite alternate; }
  .hero-v6 .activa .e-sunscreen { animation: h6-sube-baja-70 3s .4s ease-in-out infinite alternate; }
  .hero-v6 .activa .e-doble-sun { animation: h6-sube-baja-70 3s .3s ease-in-out infinite alternate; }
  .hero-v6 .activa .e-doble-black { animation: h6-sube-baja 3s 1.8s ease-in-out infinite alternate; }
  .hero-v6 .activa .e-lama { animation: e-lama 1.8s calc(var(--i) * .08s) cubic-bezier(.5, 0, .2, 1) infinite alternate; }
  .hero-v6 .activa .e-duo-cierra { animation: e-duo 2s .6s cubic-bezier(.6, 0, .3, 1) infinite alternate; }
  @keyframes h6-sube-baja { from { transform: scaleY(.06); } to { transform: scaleY(1); } }
  @keyframes h6-sube-baja-70 { from { transform: scaleY(.06); } to { transform: scaleY(.8); } }
  .hero-v6 .hero-puntos { position: absolute; left: max(var(--gutter), calc((100vw - var(--ancho)) / 2 + var(--gutter))); bottom: 30px; z-index: 5; }
  .hero-v6 .hero-puntos [aria-selected="true"] span::after { animation-duration: 9s; }

  /* Globo flotante "Calcula acá" */
  .h6-globo { position: absolute; z-index: 6; right: max(var(--gutter), calc((100vw - var(--ancho)) / 2 + var(--gutter))); top: 16%; width: clamp(150px, 13vw, 190px); aspect-ratio: 1; border-radius: 50%; border: 2px solid var(--grafito); background: var(--lima); color: var(--tinta); display: grid; place-content: center; justify-items: center; gap: 6px; text-align: center; cursor: pointer; box-shadow: 8px 8px 0 var(--grafito); font: inherit; animation: h6-flota 3.2s ease-in-out infinite alternate; transition: transform .2s; }
  .h6-globo::after { content: ""; position: absolute; left: 22%; bottom: -14px; width: 26px; height: 26px; background: var(--lima); border: 2px solid var(--grafito); border-top: 0; border-left: 0; transform: rotate(35deg); }
  .h6-globo svg { width: 44px; height: 44px; fill: none; stroke: currentColor; stroke-width: 2.2; }
  .h6-globo-txt strong { display: block; font-family: var(--display); font-weight: 900; font-size: clamp(26px, 2.2vw, 34px); line-height: .9; }
  .h6-globo-txt small { font-size: 13px; font-weight: 600; }
  .h6-globo-onda { position: absolute; inset: -2px; border-radius: 50%; border: 3px solid var(--lima); animation: h6-onda 2.2s ease-out infinite; }
  .h6-globo:hover { animation-play-state: paused; transform: scale(1.06) rotate(-4deg); }
  @keyframes h6-flota { from { translate: 0 0; } to { translate: 0 -16px; } }
  @keyframes h6-onda { from { transform: scale(1); opacity: .9; } to { transform: scale(1.45); opacity: 0; } }

  /* Cinta de mensajes que corre abajo */
  .h6-cinta { position: absolute; z-index: 5; left: 0; right: 0; bottom: 0; height: 0; }
  .h6-cinta-in { display: none; }

  @media (max-width: 900px) {
    .hero-v6 { grid-template-columns: 1fr; min-height: 0; }
    .h6-fotos { position: relative; inset: auto; height: 48vh; height: 48svh; clip-path: polygon(0 0, 100% 0, 100% 84%, 0 100%); }
    .h6-franja { clip-path: polygon(0 calc(100% - 10px), 100% calc(84% - 10px), 100% 84%, 0 100%); }
    .h6-texto { padding: 12px var(--gutter) 230px; }
    .h6-titulo { font-size: clamp(52px, 13vw, 84px); }
    .h6-escenas { left: var(--gutter); right: var(--gutter); width: auto; bottom: 56px; height: 170px; }
    .h6-globo { top: calc(48vh - 150px); top: calc(48svh - 150px); right: var(--gutter); width: 124px; }
    .h6-globo svg { width: 32px; height: 32px; }
    .hero-v6 .hero-puntos { bottom: 22px; left: var(--gutter); }
  }

  /* ---------- Cotizador (cortina gigante + calculadora al centro) ---------- */
  .cotizador { position: fixed; inset: 0; z-index: 110; display: grid; place-items: center; padding: 16px; }
  .cotizador[hidden] { display: none; }
  .cotizador .telon-tela { position: absolute; inset: 0; background: var(--grafito); transform-origin: 50% 0; transform: scaleY(0); background-image: repeating-linear-gradient(0deg, rgba(255, 255, 255, .03) 0 2px, transparent 2px 8px); }
  .cotizador.abre .telon-tela { animation: telon-baja .8s cubic-bezier(.7, 0, .2, 1) forwards; }
  .cotizador.cierra .telon-tela { transform: scaleY(1); animation: telon-sube .8s .25s cubic-bezier(.7, 0, .2, 1) forwards; }
  .cot-tarjeta { position: relative; width: min(560px, 100%); max-height: calc(100vh - 32px); max-height: calc(100svh - 32px); overflow-y: auto; background: var(--mineral); border: 2px solid var(--grafito); box-shadow: 10px 10px 0 var(--lima); padding: 30px clamp(18px, 3vw, 30px) 24px; opacity: 0; transform: translateY(40px) scale(.96); }
  .cotizador.abre .cot-tarjeta { animation: telon-tarjeta .6s .7s cubic-bezier(.2, 1.2, .4, 1) forwards; }
  .cotizador.cierra .cot-tarjeta { animation: telon-tarjeta-sale .3s ease forwards; }
  .cot-pasos { list-style: none; display: flex; gap: 6px; padding: 0; margin: 0 0 14px; counter-reset: c; }
  .cot-pasos li { counter-increment: c; font: 600 12px var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--gris); border-top: 4px solid var(--borde); padding-top: 6px; flex: 1; transition: border-color .3s, color .3s; }
  .cot-pasos li::before { content: "0" counter(c) " "; }
  .cot-pasos li.activo { border-color: var(--lima-oscuro); color: var(--tinta); }
  .cot-paso { display: none; }
  .cot-paso.activo { display: block; animation: rmx-abre .45s ease; }
  .cot-tarjeta .calc { box-shadow: none; border: 0; padding: 0; background: none; }
  .cot-tarjeta .calc [data-pedir] { display: none; }
  .cot-seguir { width: 100%; margin-top: 14px; font-size: 17px; }
  .cot-resumen { display: grid; grid-template-columns: 96px 1fr; gap: 16px; align-items: center; padding-bottom: 16px; border-bottom: 1px solid var(--borde); }
  .cot-icono { width: 96px; height: 96px; background: var(--grafito); padding: 12px; box-shadow: 5px 5px 0 var(--lima); }
  .cot-icono, .cot-defs { overflow: visible; }
  .cot-icono use { fill: none; stroke: #fbfcf8; stroke-width: 2.4; }
  .cot-defs .i-negra, .cot-defs .i-luna { fill: #fbfcf8; }
  .cot-defs .i-negra { fill: #454c3e; }
  .cot-defs .i-banda { stroke: var(--lima); stroke-width: 5; }
  .cot-defs .i-banda-negra { stroke: #fbfcf8; stroke-width: 6; }
  .cot-defs .i-lama { stroke: var(--lima); stroke-width: 4; }
  .cot-paso.activo .cot-icono { animation: cot-icono .7s cubic-bezier(.2, 1.4, .4, 1); }
  @keyframes cot-icono { from { transform: scale(.4) rotate(-12deg); opacity: 0; } }
  .cot-resumen h2 { font-size: 32px; margin: 2px 0 6px; }
  .cot-resumen .eyebrow { margin: 0; }
  .cot-detalle { margin: 0; font-size: 15px; }
  .cot-detalle strong { font-size: 22px; }
  .cot-pregunta { font-weight: 700; font-size: 18px; margin: 16px 0 10px; }
  .cot-opciones { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .cot-op { display: grid; justify-items: center; gap: 8px; padding: 18px 10px; border: 2px solid var(--grafito); background: var(--blanco); font: 700 16px var(--sans); color: var(--tinta); text-decoration: none; cursor: pointer; transition: transform .2s, box-shadow .2s, background .2s; }
  .cot-op:hover { transform: translate(-3px, -3px); box-shadow: 5px 5px 0 var(--lima); background: #f1f5df; }
  .cot-op svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 2; }
  .cot-op .ico { stroke: none; }
  .cot-form { margin-top: 14px; display: grid; gap: 10px; }
  .cot-form .btn { width: 100%; }
  .cot-volver { margin-top: 12px; background: none; border: 0; padding: 4px 0; font: 600 14px var(--sans); cursor: pointer; text-decoration: underline; color: var(--gris); }
  .cot-paso[data-cot-paso="3"] { text-align: center; padding: 20px 0; }
  .cot-check { width: 90px; height: 90px; fill: none; stroke: var(--lima-oscuro); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
  .cot-check circle { stroke-dasharray: 180; stroke-dashoffset: 180; }
  .cot-check path { stroke-dasharray: 50; stroke-dashoffset: 50; }
  .cot-paso.activo .cot-check circle { animation: cot-trazo .6s ease forwards; }
  .cot-paso.activo .cot-check path { animation: cot-trazo .4s .5s ease forwards; }
  @keyframes cot-trazo { to { stroke-dashoffset: 0; } }
  .cot-paso[data-cot-paso="3"] h2 { font-size: 48px; margin: 10px 0 6px; }
  @media (max-width: 480px) { .cot-opciones { grid-template-columns: 1fr; } .cot-resumen { grid-template-columns: 72px 1fr; } .cot-icono { width: 72px; height: 72px; } }

  /* ---------- Juego: cortinas que se suben y bajan ---------- */
  .juego { padding-block: clamp(44px, 5.5vw, 72px); background: var(--grafito); color: var(--blanco); }
  .juego-cabeza { display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap; }
  .juego h2 em { font-style: normal; color: var(--lima); }
  .juego .eyebrow { color: #aab1a0; margin: 0 0 6px; }
  .juego-ayuda { display: flex; gap: 10px; align-items: center; color: #cfd5c4; max-width: 36ch; margin: 0; }
  .juego-ayuda svg { width: 28px; height: 28px; flex: none; fill: none; stroke: var(--lima); stroke-width: 2; animation: rmx-flecha 1s ease-in-out infinite alternate; }
  .juego-ventanas { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2.4vw, 32px); margin-top: 28px; }
  .juego-v { margin: 0; }
  .juego-marco { position: relative; aspect-ratio: 5 / 6; border: 6px solid #fbfcf8; outline: 2px solid var(--grafito); overflow: hidden; cursor: ns-resize; touch-action: none; box-shadow: 8px 8px 0 var(--lima); user-select: none; }
  .juego-marco:focus-visible { outline: 3px solid var(--lima); outline-offset: 4px; }
  .juego-afuera { position: absolute; inset: 0; width: 100%; height: 100%; }
  .juego-sol { transform-box: fill-box; transform-origin: center; animation: juego-sol 6s ease-in-out infinite alternate; }
  @keyframes juego-sol { to { transform: translate(-30px, 20px); } }
  .juego-tela { position: absolute; left: 0; right: 0; top: 0; height: calc(var(--baja) * 100%); transition: height .12s linear; }
  .arrastrando .juego-tela { transition: none; }
  .juego-sun .juego-tela { background: repeating-linear-gradient(90deg, rgba(223, 227, 212, .88) 0 3px, rgba(198, 205, 179, .88) 3px 6px); }
  .juego-black .juego-tela { background: #2d3328; }
  .juego-duo .juego-tela { background: repeating-linear-gradient(180deg, rgba(251, 252, 248, .55) 0 18px, #3a4033 18px 36px); }
  .juego-barra { position: absolute; left: -2px; right: -2px; bottom: -6px; height: 12px; background: var(--grafito); border-top: 2px solid var(--lima); display: grid; place-items: center; }
  .juego-barra span { width: 44px; height: 22px; margin-top: 22px; background: var(--lima); border: 2px solid var(--grafito); border-radius: 12px; }
  .juego-tubo { position: absolute; left: 0; right: 0; top: 0; height: 14px; background: #11140e; }
  .juego-cuarto { position: absolute; inset: 0; pointer-events: none; background: #0e120b; opacity: 0; }
  .juego-black .juego-cuarto { opacity: calc(var(--baja) * .25); }
  .juego-v figcaption { display: grid; grid-template-columns: 1fr auto; margin-top: 18px; gap: 2px 12px; }
  .juego-v figcaption strong { font-family: var(--display); font-size: 30px; line-height: 1; }
  .juego-v figcaption span { grid-column: 1; color: #cfd5c4; font-size: 15px; }
  .juego-v figcaption b { grid-row: 1 / span 2; grid-column: 2; align-self: center; color: var(--lima); font-size: 24px; }
  @media (max-width: 760px) {
    .juego-ventanas { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--gutter)); padding: 4px var(--gutter) 16px; scrollbar-width: none; }
    .juego-v { flex: 0 0 72%; scroll-snap-align: center; }
  }
  .hero-v6 .h6-titulo { font-size: clamp(64px, 7.4vw, 136px); }
  .hero-v6 .h6-titulo em { display: inline-block; animation: none; }
  .hero-v6 .hero-texto.activa .h6-titulo em { animation: h6-respira 3s 1.2s ease-in-out infinite alternate; }
  .hero-v6::before { display: none; }
  @media (max-width: 900px) { .hero-v6 .h6-titulo { font-size: clamp(52px, 13vw, 84px); } }
  .hero-v6 .hero-escena .escena { border: 0; background: none; box-shadow: none; }
  .hero-v6 .h6-titulo { font-size: clamp(56px, 6vw, 112px); }
  .h6-texto { max-width: 50vw; padding-bottom: 38vh; }
  .h6-escenas { left: 24vw; bottom: 64px; width: min(40vw, 620px); height: 34vh; }
  @media (max-width: 900px) {
    .h6-texto { max-width: none; padding-bottom: 230px; }
    .h6-escenas { left: var(--gutter); width: auto; height: 170px; }
  }

  /* ---------- Banner: el texto nunca cruza la diagonal; escena más grande ---------- */
  .h6-fotos { inset: 0 0 0 40%; clip-path: polygon(20% 0, 100% 0, 100% 100%, 0 100%); }
  .h6-franja { clip-path: polygon(20% 0, calc(20% + 12px) 0, 12px 100%, 0 100%); }
  .h6-texto { max-width: min(44vw, 700px); padding-bottom: 40vh; }
  .hero-v6 .h6-titulo { font-size: clamp(52px, 5.2vw, 104px); }
  .h6-escenas { left: max(var(--gutter), calc((100vw - var(--ancho)) / 2 + var(--gutter))); bottom: 56px; width: min(52vw, 820px); height: 42vh; }
  @media (max-width: 900px) {
    .h6-fotos { inset: auto; clip-path: polygon(0 0, 100% 0, 100% 84%, 0 100%); }
    .h6-franja { clip-path: polygon(0 calc(100% - 10px), 100% calc(84% - 10px), 100% 84%, 0 100%); }
    .h6-texto { max-width: none; padding-bottom: 240px; }
    .h6-escenas { width: auto; right: var(--gutter); height: 190px; }
  }

  /* ---------- Cotizador asistente ---------- */
  .cot-tarjeta { width: min(720px, 100%); }
  .cot-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .cot-h { font-size: clamp(36px, 4.4vw, 54px); margin: 4px 0 16px; }
  .cot-h em { font-style: normal; color: var(--lima-oscuro); }
  .cot-pasos li { font-size: 11px; }
  .cot-productos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .cot-prod { display: grid; justify-items: start; gap: 4px; text-align: left; padding: 14px; border: 2px solid var(--grafito); background: var(--blanco); cursor: pointer; font: inherit; color: var(--tinta); transition: transform .2s, box-shadow .2s, background .2s; animation: cot-entra .5s calc(var(--i) * 70ms) cubic-bezier(.2, 1.2, .4, 1) both; }
  @keyframes cot-entra { from { opacity: 0; transform: translateY(18px) scale(.95); } }
  .cot-prod svg { width: 48px; height: 48px; fill: none; stroke: var(--grafito); stroke-width: 2.4; }
  .cot-prod strong { font-family: var(--display); font-size: 22px; line-height: 1; }
  .cot-prod span { font-size: 14px; font-weight: 700; }
  .cot-prod small { font-size: 12px; color: var(--gris); line-height: 1.3; }
  .cot-prod:hover { transform: translate(-3px, -3px); box-shadow: 5px 5px 0 var(--lima); }
  .cot-prod[aria-checked="true"] { background: var(--grafito); color: var(--blanco); box-shadow: 5px 5px 0 var(--lima); }
  .cot-prod[aria-checked="true"] svg { stroke: #fbfcf8; }
  .cot-prod[aria-checked="true"] small { color: #cfd5c4; }
  .cot-prod[aria-checked="true"] span { color: var(--lima); }
  .cot-prod[aria-checked="true"] svg { animation: cot-icono .6s cubic-bezier(.2, 1.4, .4, 1); }
  .cot-defs .i-sol { fill: #f4d35e; stroke: none; }

  .cot-medir { display: grid; grid-template-columns: 1.1fr 1fr; gap: 20px; align-items: center; }
  .cot-vista { position: relative; height: 250px; display: flex; align-items: flex-end; gap: 6px; background: var(--mineral-2); border: 1.5px solid var(--grafito); padding: 12px 12px 0; overflow: hidden; }
  .cot-mono { width: 70px; flex: none; fill: none; stroke: var(--grafito); stroke-width: 6; stroke-linecap: round; }
  .cot-mono circle { fill: var(--grafito); }
  .cot-mono rect { fill: var(--lima); stroke-width: 2; }
  .cot-mono-brazo { transform-box: view-box; transform-origin: 45px 50px; animation: cot-mide 1.2s ease-in-out infinite alternate; }
  @keyframes cot-mide { from { transform: rotate(8deg); } to { transform: rotate(-14deg); } }
  .cot-ventana { position: relative; align-self: center; margin: 0 auto 26px; width: calc(var(--an, .7) * 170px); height: calc(var(--al, .7) * 190px); border: 5px solid #fbfcf8; outline: 2px solid var(--grafito); transition: width .25s cubic-bezier(.2, .8, .2, 1), height .25s cubic-bezier(.2, .8, .2, 1); }
  .cot-vidrio { position: absolute; inset: 0; background: linear-gradient(#bfdbe6 60%, #9fb48a 60%); overflow: hidden; }
  .cot-sol { position: absolute; right: 16%; top: 14%; width: 22px; height: 22px; border-radius: 50%; background: #f4d35e; }
  .cot-tela { position: absolute; left: 0; right: 0; top: 0; height: 70%; transform-origin: top; animation: cot-tela 2.4s ease-in-out infinite alternate; }
  @keyframes cot-tela { from { transform: scaleY(.25); } to { transform: scaleY(1); } }
  [data-tela="sun"] .cot-tela { background: repeating-linear-gradient(90deg, rgba(223, 227, 212, .9) 0 2px, rgba(198, 205, 179, .9) 2px 4px); }
  [data-tela="black"] .cot-tela { background: #2d3328; height: 100%; }
  [data-tela="doble"] .cot-tela { background: linear-gradient(90deg, #2d3328 50%, rgba(223, 227, 212, .9) 50%); }
  [data-tela="duo"] .cot-tela { background: repeating-linear-gradient(180deg, rgba(251, 252, 248, .75) 0 10px, #3a4033 10px 20px); height: 100%; }
  [data-tela="duobo"] .cot-tela { background: repeating-linear-gradient(180deg, #2d3328 0 10px, #11140e 10px 20px); height: 100%; }
  [data-tela="vert"] .cot-tela { background: repeating-linear-gradient(90deg, #efe9dc 0 12px, #d8cdb5 12px 14px); height: 100%; transform-origin: left; animation-name: cot-vert; }
  @keyframes cot-vert { from { transform: scaleX(.3); } to { transform: scaleX(1); } }
  .cot-tubo { position: absolute; left: -8px; right: -8px; top: -10px; height: 8px; background: var(--grafito); }
  .cot-cota { position: absolute; font-size: 12px; font-weight: 700; background: var(--lima); border: 1.5px solid var(--grafito); padding: 1px 6px; white-space: nowrap; }
  .cot-cota-an { left: 50%; bottom: -26px; transform: translateX(-50%); }
  .cot-cota-al { right: -8px; top: 50%; transform: translate(100%, -50%); }
  .cot-rangos { display: grid; gap: 16px; }
  .cot-rango { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; font-weight: 700; }
  .cot-rango input { grid-column: 1 / -1; width: 100%; height: 28px; accent-color: var(--lima-oscuro); cursor: grab; }
  .cot-rango output { font-size: 20px; }
  .cot-tip { margin: 0; font-size: 13px; color: var(--gris); }
  .cot-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 14px; }
  .cot-nav .cot-seguir { width: auto; margin: 0; }
  .cot-total { font-size: clamp(54px, 8vw, 84px); font-weight: 700; letter-spacing: -.03em; line-height: 1; margin: 16px 0 4px; }
  .cot-nota { font-size: 13px; background: #f1f5df; border-left: 3px solid var(--lima-oscuro); padding: 8px 10px; margin: 6px 0 0; }
  .cot-final { width: 220px; height: auto; margin: 0 auto; display: block; }
  .f-ventana { fill: #cfe3ea; stroke: var(--grafito); stroke-width: 2.5; }
  .f-tubo { fill: var(--grafito); }
  .f-tela { fill: var(--lima); stroke: var(--grafito); stroke-width: 2; transform-box: fill-box; transform-origin: top; transform: scaleY(0); }
  .f-escalera { fill: none; stroke: var(--lima-oscuro); stroke-width: 4; stroke-linecap: round; }
  .f-mono circle { fill: var(--grafito); } .f-mono path { fill: none; stroke: var(--grafito); stroke-width: 6; stroke-linecap: round; }
  .f-brazo { transform-box: view-box; transform-origin: 70px 48px; }
  .f-check circle { fill: var(--blanco); stroke: var(--grafito); stroke-width: 2.5; } .f-check path { fill: none; stroke: var(--lima-oscuro); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
  .f-check { transform-box: fill-box; transform-origin: center; opacity: 0; }
  .cot-paso.activo .f-brazo { animation: e-brazo .25s ease-in-out 6 alternate; }
  .cot-paso.activo .f-tela { animation: e-bajar 1s .9s cubic-bezier(.5, 0, .2, 1) forwards; }
  .cot-paso.activo .f-check { animation: telon-tarjeta .5s 2s cubic-bezier(.2, 1.4, .4, 1) forwards; transform: scale(.4); }
  .cot-paso[data-cot-paso="4"] { text-align: center; padding: 6px 0 10px; }
  .cot-paso[data-cot-paso="4"] h2 { font-size: 48px; margin: 6px 0; }
  @media (max-width: 640px) {
    .cot-productos { grid-template-columns: 1fr 1fr; }
    .cot-prod small { display: none; }
    .cot-medir { grid-template-columns: 1fr; }
    .cot-vista { height: 200px; }
  }

  /* Monos en el recorrido */
  .franja { position: relative; }
  .franja-mono { position: absolute; bottom: 4px; left: 0; width: 110px; height: auto; pointer-events: none; animation: fm-cruza 14s linear infinite; opacity: .9; }
  .franja-grafito .franja-mono { animation-direction: reverse; }
  .franja-mono circle { fill: currentColor; }
  .franja-mono path { fill: none; stroke: currentColor; stroke-width: 5; stroke-linecap: round; }
  .franja-grafito .franja-mono circle { fill: var(--lima); } .franja-grafito .franja-mono path { stroke: var(--lima); }
  .fm-rollo { fill: var(--blanco); stroke: var(--grafito); stroke-width: 2; }
  .fm-p1, .fm-p2 { transform-box: view-box; transform-origin: 40px 57px; animation: e-paso .35s ease-in-out infinite alternate; }
  .fm-p2 { animation-direction: alternate-reverse; }
  .fm-cuerpo { animation: fm-rebota .35s ease-in-out infinite alternate; }
  @keyframes fm-rebota { to { transform: translateY(-2px); } }
  @keyframes fm-cruza { from { transform: translateX(-140px); } to { transform: translateX(calc(100vw + 20px)); } }
  .faq-mono { width: 130px; height: auto; display: block; margin-bottom: 8px; }
  .faq-mono > circle { fill: var(--grafito); }
  .faq-mono > path, .fq-brazo path { fill: none; stroke: var(--grafito); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
  .fq-burbuja circle { fill: var(--lima); stroke: var(--grafito); stroke-width: 2.5; }
  .fq-burbuja path { fill: none; stroke: var(--grafito); stroke-width: 4; stroke-linecap: round; }
  .fq-burbuja { transform-box: fill-box; transform-origin: 0 100%; animation: fq-flota 1.8s ease-in-out infinite alternate; }
  @keyframes fq-flota { from { transform: translateY(3px) rotate(-4deg); } to { transform: translateY(-5px) rotate(4deg); } }
  .fq-brazo { transform-box: view-box; transform-origin: 50px 78px; animation: fq-rasca .5s ease-in-out infinite alternate; }
  @keyframes fq-rasca { to { transform: rotate(-6deg); } }
  .pp-instalador circle { fill: var(--grafito); }
  .pp-esc { fill: none; stroke: var(--lima-oscuro); stroke-width: 4; stroke-linecap: round; }
  .pp-cuerpo { fill: none; stroke: var(--grafito); stroke-width: 5; stroke-linecap: round; }
  .pp-brazo { transform-box: view-box; transform-origin: 770px 134px; animation: e-brazo .3s ease-in-out infinite alternate; }
  @media (prefers-reduced-motion: reduce) { .franja-mono { display: none; } }
  .cot-form[hidden] { display: none; }
  .cot-paso[data-cot-paso="3"] { text-align: left; padding: 0; }

  /* ==========================================================================
     Opción A (?diseno=a): foto total + panel editorial + módulo vectorial dentro del panel
     ========================================================================== */
  .hero-op-a { display: block; }
  .hero-op-a .h6-fotos { inset: 0; clip-path: none; }
  .hero-op-a .h6-foto { clip-path: none; transition: opacity 1.2s ease; }
  .hero-op-a .h6-foto.activa { transition: opacity 1.2s ease; }
  .hero-op-a .h6-franja { display: none; }
  .hero-op-a .h6-fotos::after { background: linear-gradient(90deg, rgba(22, 26, 18, .35), transparent 50%); }
  .hero-op-a .h6-texto { position: absolute; left: max(var(--gutter), calc((100vw - var(--ancho)) / 2 + var(--gutter))); top: 50%; transform: translateY(-50%); width: min(520px, 40vw); max-width: none; padding: 28px 28px 20px; background: rgba(28, 32, 22, .94); border-right: 6px solid var(--lima); box-shadow: 10px 10px 0 rgba(181, 207, 82, .35); animation: opa-panel .9s .2s cubic-bezier(.2, .9, .2, 1) both; }
  @keyframes opa-panel { from { transform: translate(-60px, -50%); opacity: 0; } to { transform: translate(0, -50%); opacity: 1; } }
  .hero-op-a .h6-titulo { font-size: clamp(46px, 4.2vw, 76px); }
  .hero-op-a .h6-bajada { font-size: 16px; margin-top: 12px; }
  .hero-op-a .h6-chip { margin-top: 14px; }
  .hero-op-a .h6-escenas { position: relative; left: auto; right: auto; bottom: auto; width: 100%; height: 170px; margin-top: 18px; border-top: 1px solid #4b5245; padding-top: 10px; }
  .hero-op-a .hero-puntos { position: static; margin-top: 14px; }
  .hero-op-a .h6-globo { right: max(var(--gutter), calc((100vw - var(--ancho)) / 2 + var(--gutter))); top: 22%; }
  @media (max-width: 900px) {
    .hero-op-a .h6-fotos { position: relative; height: 46vh; height: 46svh; }
    .hero-op-a .h6-fotos::after { background: linear-gradient(0deg, rgba(22, 26, 18, .5), transparent 40%); }
    .hero-op-a .h6-texto { position: relative; left: auto; top: auto; transform: none; width: auto; margin: -28px var(--gutter) 24px; animation: none; border-right: 0; border-top: 6px solid var(--lima); box-shadow: 6px 6px 0 rgba(181, 207, 82, .35); }
    .hero-op-a .h6-titulo { font-size: clamp(44px, 12vw, 64px); }
    .hero-op-a .h6-escenas { height: 150px; }
    .hero-op-a .h6-globo { top: calc(46vh - 150px); top: calc(46svh - 150px); }
  }
  @media (min-width: 901px) { .hero-op-a .h6-foto img { object-position: 70% 50%; } }
  .h6-estados { display: none; }
  .hero-op-a .h6-estados, .hero-op-b .h6-estados { display: grid; grid-template-columns: repeat(3, 1fr); list-style: none; margin: 10px 0 0; padding: 12px 0 0; border-top: 1px solid #4b5245; position: relative; }
  .h6-estados li { display: grid; justify-items: center; gap: 4px; font-size: 13px; color: #aab1a0; animation: op-estado 6s infinite; }
  .h6-estados li:nth-child(2) { animation-delay: 2s; } .h6-estados li:nth-child(3) { animation-delay: 4s; }
  .h6-estados svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; }
  @keyframes op-estado { 0%, 30% { color: var(--lima); transform: translateY(-3px); } 34%, 100% { color: #aab1a0; transform: none; } }

  /* Opción B (?diseno=b): 50/50 sin diagonal, vector protagonista */
  .hero-op-b { display: block; }
  .hero-op-b .h6-fotos { inset: 0 50% 0 0; clip-path: none; }
  .hero-op-b .h6-foto { clip-path: inset(0 100% 0 0); }
  .hero-op-b .h6-foto.activa { clip-path: inset(0 0 0 0); }
  .hero-op-b .h6-franja { clip-path: none; inset: 0 0 0 auto; width: 3px; }
  .hero-op-b .h6-fotos::after { background: linear-gradient(0deg, rgba(22, 26, 18, .35), transparent 35%); }
  .hero-op-b .h6-texto { margin-left: 50%; max-width: none; padding: clamp(36px, 6vh, 70px) max(var(--gutter), calc((100vw - var(--ancho)) / 2 + var(--gutter))) 26px clamp(32px, 4vw, 64px); min-height: inherit; }
  .hero-op-b .h6-titulo { font-size: clamp(50px, 5vw, 96px); }
  .hero-op-b .h6-escenas { position: relative; left: auto; bottom: auto; width: 100%; height: 34vh; margin-top: auto; }
  .hero-op-b .hero-escena { transform: translateY(40px); }
  .hero-op-b .hero-escena.activa { transform: none; }
  .hero-op-b .hero-puntos { position: static; margin-top: 14px; }
  .hero-op-b .h6-globo { right: auto; left: 50%; top: 42%; transform: translateX(-50%); }
  .hero-op-b .h6-globo:hover { transform: translateX(-50%) scale(1.06); }
  @media (max-width: 900px) {
    .hero-op-b .h6-fotos { position: relative; inset: auto; height: 44vh; height: 44svh; }
    .hero-op-b .h6-franja { inset: auto 0 0 0; width: auto; height: 3px; }
    .hero-op-b .h6-texto { margin-left: 0; padding: 24px var(--gutter) 28px; }
    .hero-op-b .h6-titulo { font-size: clamp(44px, 12vw, 64px); }
    .hero-op-b .h6-escenas { height: 190px; }
    .hero-op-b .h6-globo { left: auto; right: var(--gutter); top: calc(44vh - 140px); top: calc(44svh - 140px); transform: none; }
  }
  @media (min-width: 901px) { .hero-op-b .h6-globo { top: auto; bottom: 16%; } .hero-op-b .h6-foto img { object-position: 30% 50%; } }

  /* Opción C (?diseno=c): titular arriba + ventanal enmarcado con cortina real que revela la foto */
  .hero-op-c { display: flex; flex-direction: column; align-items: center; padding: clamp(24px, 4vh, 44px) var(--gutter) clamp(28px, 5vh, 56px); }
  .hero-op-c .h6-texto { order: 1; max-width: 1100px; width: 100%; padding: 0; text-align: center; align-items: center; }
  .hero-op-c .hero-textos { width: 100%; }
  .hero-op-c .h6-titulo { font-size: clamp(48px, 5.4vw, 100px); }
  .hero-op-c .h6-titulo .l { display: inline-block; margin: 0 .12em; }
  .hero-op-c .h6-bajada { margin: 10px auto 0; max-width: 60ch; }
  .hero-op-c .h6-chip { align-self: center; margin: 14px auto 0; }
  .hero-op-c .h6-fotos { order: 2; position: relative; inset: auto; z-index: 0; width: min(1120px, 100%); aspect-ratio: 21 / 7.4; margin-top: clamp(18px, 3vh, 30px); clip-path: none; border: 10px solid #fbfcf8; outline: 2px solid var(--grafito); box-shadow: 12px 12px 0 var(--lima); }
  .hero-op-c .h6-fotos::after { display: none; }
  .hero-op-c .h6-franja { inset: -26px -24px auto -24px; height: 18px; clip-path: none; background: #11140e; border-bottom: 3px solid var(--lima); animation: none; }
  .hero-op-c .h6-foto { clip-path: none; transition: opacity .01s .6s; }
  .hero-op-c .h6-foto.activa { transition: none; }
  .hero-op-c .h6-foto::before { content: ""; position: absolute; inset: 0; z-index: 2; background: repeating-linear-gradient(0deg, #2d3328 0 3px, #262b21 3px 7px); border-bottom: 10px solid var(--lima); transform-origin: top; transform: scaleY(1); }
  .hero-op-c .h6-foto.activa::before { animation: opc-cortina 9s cubic-bezier(.7, 0, .2, 1) forwards; }
  @keyframes opc-cortina { 0% { transform: scaleY(1); } 14% { transform: scaleY(.04); } 86% { transform: scaleY(.04); } 100% { transform: scaleY(1); } }
  .hero-op-c .h6-escenas { position: absolute; z-index: 3; left: auto; right: max(var(--gutter), calc((100vw - 1120px) / 2 - 150px)); bottom: clamp(28px, 5vh, 56px); width: 300px; height: 220px; }
  .hero-op-c .hero-puntos { position: static; justify-content: center; margin-top: 12px; order: 3; }
  .hero-op-c .h6-globo { top: auto; right: auto; left: max(var(--gutter), calc((100vw - 1120px) / 2 + 30px)); bottom: clamp(60px, 12vh, 120px); width: 150px; }
  .hero-op-c .h6-globo::before { content: ""; position: absolute; left: 50%; bottom: 100%; width: 2px; height: 60vh; background: #fbfcf8; }
  @media (max-width: 1100px) { .hero-op-c .h6-escenas { display: none; } }
  @media (max-width: 900px) {
    .hero-op-c .h6-fotos { aspect-ratio: 4 / 5; border-width: 7px; }
    .hero-op-c .h6-titulo { font-size: clamp(44px, 12vw, 64px); }
    .hero-op-c .h6-titulo .l { display: block; }
    .hero-op-c .h6-globo { width: 118px; left: auto; right: calc(var(--gutter) + 10px); bottom: 110px; top: auto; }
  }
  .hero-op-c .h6-fotos { overflow: visible; }
  .hero-op-c .h6-fotos .h6-foto { overflow: hidden; }
  .hero-op-c .h6-fotos .h6-globo { position: absolute; left: 6%; top: 18px; bottom: auto; right: auto; width: clamp(110px, 11vw, 150px); z-index: 6; }
  .hero-op-c .h6-fotos .h6-globo::before { height: 30px; }
  .hero-op-c .h6-fotos .h6-escenas { position: absolute; display: block; right: 2%; bottom: 0; left: auto; width: 34%; height: 70%; z-index: 5; }
  @media (max-width: 900px) { .hero-op-c .h6-fotos .h6-escenas { width: 70%; height: 40%; } }
  .hero-op-c .h6-fotos .h6-globo { left: auto; right: 5%; }
  .hero-op-c .h6-fotos .h6-escenas { right: auto; left: 1%; }

  /* Testimonios: cinta continua robusta */
  .testimonios-cinta { display: block; overflow: hidden; }
  .cinta-pista { display: flex; width: max-content; animation: cinta-mov 36s linear infinite; }
  .testimonios-cinta:hover .cinta-pista { animation-play-state: paused; }
  .cinta-pista > .testi { flex: 0 0 min(380px, 80vw); margin-right: 18px; animation: none !important; }
  @keyframes cinta-mov { from { transform: translateX(0); } to { transform: translateX(-50%); } }

  /* Franjas: fuera los monos; solo la camioneta "en ruta" en la franja de envíos */
  .franja-mono { display: none; }
  .franja-van { position: absolute; bottom: 6px; left: 0; width: 120px; height: auto; pointer-events: none; animation: fv-ruta 11s linear infinite; z-index: 0; }
  .franja-in { position: relative; z-index: 1; }
  .fv-cuerpo rect, .fv-cuerpo > path:not(.fv-vidrio):not(.fv-linea) { fill: var(--grafito); }
  .fv-vidrio { fill: #cfe3ea; }
  .fv-linea { stroke: var(--lima); stroke-width: 4; }
  .fv-rueda circle:first-child { fill: #11140e; } .fv-rueda circle:last-child { fill: var(--lima); }
  .fv-rueda { transform-box: fill-box; transform-origin: center; animation: fr-gira .5s linear infinite; }
  .fv-cuerpo { animation: fr-rebote .3s ease-in-out infinite alternate; }
  @keyframes fv-ruta { from { transform: translateX(-160px); } to { transform: translateX(100vw); } }
  .franja-lima .franja-van { opacity: .9; }
  @media (max-width: 760px) { .franja-van { width: 84px; bottom: 2px; } .franja { padding-bottom: 46px; } }

  /* Opción A definitiva: más aire y menos texto */
  .hero-op-a .h6-producto, .hero-op-a .h6-estados { display: none; }
  .hero-op-a .h6-texto { padding: 34px 34px 24px; width: min(500px, 38vw); }
  .hero-op-a .h6-bajada { max-width: 30ch; }
  .hero-op-a .h6-escenas { height: 150px; margin-top: 22px; }
  @media (max-width: 900px) {
    .hero-op-a { min-height: 0; }
    .hero-op-a .h6-fotos { height: 42vh; height: 42svh; }
    .hero-op-a .h6-texto { margin: -22px var(--gutter) 20px; padding: 22px 20px 18px; }
    .hero-op-a .h6-bajada { display: none; }
    .hero-op-a .h6-escenas { height: 130px; margin-top: 14px; }
    .hero-op-a .h6-globo { width: 104px; top: 14px; right: var(--gutter); box-shadow: 5px 5px 0 var(--grafito); }
    .hero-op-a .h6-globo svg { width: 26px; height: 26px; }
    .hero-op-a .h6-globo-txt strong { font-size: 22px; }
    .hero-op-a .h6-globo-txt small { display: none; }
    .hero-op-a .h6-globo::after { width: 18px; height: 18px; bottom: -10px; }
    .hero-op-a .h6-chip { font-size: 13px; padding: 9px 12px; }
  }
  @media (max-width: 900px) {
    .hero-op-a .h6-texto { width: auto; max-width: none; }
    .hero-op-a .h6-chip { display: flex; justify-content: space-between; align-self: stretch; }
  }
  @media (min-width: 901px) {
    .hero-op-a .h6-fotos { inset: 0 0 0 30%; }
    .hero-op-a .h6-foto img { object-position: 40% 50%; }
    .hero-op-a .h6-fotos::after { background: linear-gradient(90deg, rgba(34, 39, 30, 1), rgba(34, 39, 30, 0) 22%); }
  }

  /* Cotizador y telón: siempre visibles al abrir, con o sin animaciones */
  @media (prefers-reduced-motion: reduce) {
    .cotizador .telon-tela, .telon .telon-tela, .cot-tarjeta, .telon-tarjeta { animation: none !important; transition: none !important; }
    .cotizador.abre .telon-tela, .telon.abre .telon-tela { transform: scaleY(1); }
    .cotizador.abre .cot-tarjeta, .telon.abre .telon-tarjeta { opacity: 1; transform: none; }
    .cotizador.cierra, .telon.cierra { display: none; }
  }
  /* Respaldo para Safari < 14.1 (sin la propiedad inset) en las capas que cubren la pantalla */
  @supports not (inset: 0) {
    .cotizador, .telon, .cotizador .telon-tela, .telon .telon-tela, .h6-foto { top: 0; right: 0; bottom: 0; left: 0; }
    .hero-op-a .h6-fotos { top: 0; right: 0; bottom: 0; left: 30%; }
  }

  /* Banner A: la foto (con zoom) queda recortada dentro de su capa y se funde con el fondo */
  .hero-op-a .h6-fotos { overflow: hidden; }
  @media (min-width: 901px) {
    .hero-op-a .h6-fotos { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28%); mask-image: linear-gradient(90deg, transparent 0, #000 28%); }
    .hero-op-a .h6-fotos::after { background: linear-gradient(0deg, rgba(22, 26, 18, .35), transparent 35%); }
  }
  /* Testimonios fijos (3 o menos): siempre visibles; en celular, deslizables */
  @media (min-width: 1101px) { .testimonios:not(.testimonios-cinta) { grid-template-columns: repeat(3, 1fr); } }

  /* Pie: la frase va sobre el cielo, nunca encima de las casas */
  .pie-paisaje { padding-top: clamp(28px, 4vw, 48px); }
  .pie-frase { position: relative; left: auto; top: auto; margin: 0 0 0 max(var(--gutter), calc((100vw - var(--ancho)) / 2 + var(--gutter))); transform: rotate(-2deg); transform-origin: left bottom; }
  .pie-paisaje svg { margin-top: -10px; }
  @media (max-width: 760px) { .pie-frase { font-size: 34px; } .pie-paisaje svg { height: 150px; } }