/* Tipografía de la marca: Manrope (licencia OFL, autoalojada en /fonts; ver fonts/OFL-Manrope.txt).
   Variable: un solo archivo cubre todos los pesos. Solo subconjunto latino (incluye acentos y ñ). */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/fonts/manrope-latin-wght-normal.woff2") format("woff2");
}

:root {
    --primary: #0f2a44;
    --accent: #f28c28;
    /* Naranja oscurecido para texto sobre blanco (el naranja de marca no da contraste) */
    --accent-text: #b4530a;
    --text: #1f2933;
    --muted: #6b7280;
    --bg: #ffffff;
    --bg-soft: #f4f6f8;
  }
  
  * {
    box-sizing: border-box;
  }
  
  body {
    margin: 0;
    font-family: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--text);
    background: var(--bg);
    line-height: 1.6;
  }
  
  button, input, textarea, select {
    font-family: inherit;
  }

  .container {
    max-inline-size: 1100px;
    margin: auto;
    padding: 0 24px;
  }
  
  /* HEADER */
  
  .site-header {
    position: sticky;
    inset-block-start: 0;
    background: white;
    border-block-end: 1px solid #e5e7eb;
    z-index: 10;
  }
  
  .header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    block-size: 72px;
  }
  
  .brand {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  a.brand {
    text-decoration: none;
  }

  .brand-banner {
    display: block;
    block-size: 42px;
    inline-size: auto;
  }

  /* Portada: la marca es una banda naranja a todo el ancho (la barra del logo hecha fondo).
     El encabezado va fijo y transparente encima, solo con el menú; al bajar (clase
     is-scrolled, la pone main.js) se vuelve naranja con relieve y aparece el logo compacto. */
  .site-header-home {
    position: fixed;
    inset-inline: 0;
    background: transparent;
    border-block-end-color: transparent;
    transition: background-color .25s, border-color .25s, box-shadow .25s;
  }

  .site-header-home .header-inner {
    block-size: 64px;
    justify-content: flex-end;
  }

  .site-header-home .main-nav a {
    color: #23272f;
  }

  .site-header-home .main-nav a:hover {
    color: #fff;
  }

  .site-header-home .brand-compact {
    margin-inline-end: auto;
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s, visibility .25s;
  }

  /* Con scroll (portada) y siempre (demás páginas): la barra naranja del logo, con su brillo y relieve, hecha encabezado */
  .site-header-orange,
  .site-header-home.is-scrolled {
    background:
      linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,0) 50%),
      linear-gradient(180deg, #ffa43c, #f7901f 55%, #ea7a0c);
    border-block-end-color: #d9720a;
  }

  /* Páginas internas: encabezado naranja fijo, logo compacto siempre visible */
  .site-header-orange .main-nav a {
    color: #23272f;
  }

  .site-header-orange .main-nav a:hover {
    color: #fff;
  }

  .site-header-orange .brand-banner {
    block-size: 52px;
  }

  @media (max-width: 768px) {
    .site-header-orange .header-inner {
      block-size: auto;
      flex-wrap: wrap;
      justify-content: center;
      padding-block: 8px;
      row-gap: 4px;
    }

    .site-header-orange .main-nav {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
    }

    .site-header-orange .main-nav a {
      margin: 0 10px;
    }
  }

  .site-header-home.is-scrolled .brand-compact {
    opacity: 1;
    visibility: visible;
  }

  .site-header-home .brand-banner {
    block-size: 52px;
  }

  @media (max-width: 768px) {
    .site-header-home .header-inner {
      block-size: auto;
      flex-wrap: wrap;
      justify-content: center;
      padding-block: 10px;
      row-gap: 6px;
    }

    .site-header-home .brand-compact {
      display: none;
    }

    .site-header-home .main-nav {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
    }

    .site-header-home .main-nav a {
      margin: 0 10px;
    }
  }

  
  .brand-logo {
    block-size: 40px;
    inline-size: 40px;
  }

  .brand-name {
    font-weight: 700;
    font-size: 1.3rem;
    letter-spacing: -0.01em;
    color: var(--primary);
  }
  
  .brand-name span {
    color: var(--text);
  }
  
  .main-nav a {
    margin-inline-start: 24px;
    text-decoration: none;
    color: var(--text);
    font-weight: 500;
  }
  
  .main-nav a:hover {
    color: var(--primary);
  }

  /* BREADCRUMB (páginas de caso) */

  .breadcrumb {
    padding: 16px 0;
    background: var(--bg-soft);
    border-block-end: 1px solid #e5e7eb;
    font-size: 0.85rem;
  }

  .breadcrumb a {
    color: var(--muted);
    text-decoration: none;
  }

  .breadcrumb a:hover {
    color: var(--primary);
    text-decoration: underline;
  }

  .breadcrumb span[aria-hidden] {
    color: var(--muted);
    margin-inline: 8px;
  }

  .breadcrumb > .container > span:last-child {
    color: var(--text);
    font-weight: 500;
  }

  /* HERO */
  
  .hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #f8fafc, #ffffff);
    padding: 80px 0 60px;
  }

  /* La marca como parte de la composición: la S con sus esquinas de encuadre,
     entera y muy tenue. Sin las esquinas y cortada contra el borde se leía
     como un recorte suelto, no como el símbolo del logo. */
  .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("/img/s-watermark-marca.svg") no-repeat right 6% center / auto 300px;
    opacity: 0.06;
    pointer-events: none;
  }

  @media (max-width: 768px) {
    .hero::before {
      /* En celular el texto ocupa todo el ancho: chica y arriba, sin quedar detrás del título */
      background-position: right 16px top 24px;
      background-size: auto 110px;
    }
  }

  /* Banda de marca de la portada */
  .brand-band {
    padding: 88px 0 112px;
    /* El naranja se mantiene detrás de las letras y se desvanece hasta blanco por debajo */
    background:
      linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0) 40%),
      linear-gradient(180deg, #ffa43c 0%, #f7901f 40%, #f7901f 66%, #fff 100%);
  }

  .brand-band img {
    display: block;
    margin: 0 auto;
    inline-size: min(880px, 100%);
    block-size: auto;
  }

  @media (max-width: 768px) {
    .brand-band {
      padding-block: 118px 80px;
    }
  }

  /* Portada: la marca ya está en la banda, sin marca de agua detrás */
  .hero-home::before {
    display: none;
  }

  .hero-home {
    padding-block-start: 0;
    background: #fff;
  }

  .hero-inner {
    position: relative;
    max-inline-size: 720px;
    margin-inline: auto;
    text-align: center;
  }

  
  .hero-evolved {
    font-size: 1.2rem;
    color: var(--primary);
    margin-block-end: 16px;
  }
  
  .hero-claim {
    font-size: 1rem;
    color: var(--muted);
    margin-block-end: 12px;
  }
  
  .hero-exp {
    font-size: 0.95rem;
    color: var(--muted);
    margin-block-end: 32px;
  }
  
  .hero h1 {
    font-size: 2.8rem;
    line-height: 1.2;
    margin-block-end: 24px;
    color: var(--primary);
  }
  
  @media (max-width: 768px) {
    .hero h1 {
      font-size: 2.2rem;
    }
  }
  
  .hero h1 span {
    font-weight: 500;
    color: var(--text);
  }
  
  .hero p {
    font-size: 1.1rem;
    color: var(--muted);
    margin-block-end: 32px;
  }
  
  .hero-actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center;
  }
  
  /* Regla de color: el naranja es lo que se puede tocar (botones principales,
     enlaces de caso) y la S del logo. Lo decorativo va en azul marino/gris. */
  .btn-primary {
    display: inline-block;
    background: #f7901f;
    color: #1f2933;
    padding: 14px 28px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 500;
  }
  
  .btn-primary:hover {
    background: #ffa43c;
  }

  .btn-primary:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 2px;
  }
  
  .btn-secondary {
    display: inline-block;
    padding: 14px 28px;
    border-radius: 6px;
    border: 1px solid var(--primary);
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
  }
  
  .btn-secondary:hover {
    background: #f1f5f9;
  }
  
  /* HERO LEAD (párrafo introductorio debajo del hero) */

  .hero-lead {
    padding: 0 0 60px;
  }

  .hero-lead p {
    max-inline-size: 780px;
    margin-inline: auto;
    color: var(--text);
    font-size: 1.05rem;
    text-align: center;
  }

  /* SERVICES */
  
  .services {
    background: var(--bg-soft);
    padding: 80px 0;
  }
  
  .services h2 {
    font-size: 2rem;
    margin-block-end: 48px;
  }
  
  .service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 24px;
  }
  
  .service-card {
    background: white;
    padding: 28px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
  }
  
  .service-card h3 {
    margin-block-start: 0;
    color: var(--primary);
  }
  
  /* CASOS DESTACADOS */

  .cases {
    padding: 80px 0;
  }

  .cases h2 {
    font-size: 2rem;
    margin-block-end: 12px;
  }

  .cases-lead {
    color: var(--muted);
    margin-block-end: 40px;
    max-inline-size: 640px;
  }

  .cases-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
  }

  .case-card {
    background: var(--bg-soft);
    padding: 28px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
  }

  .case-card h3 {
    margin-block-start: 0;
    color: var(--primary);
  }

  .case-card p {
    font-size: 0.92rem;
    color: var(--text);
    margin-block-end: 14px;
  }

  .case-card p:last-child {
    margin-block-end: 0;
  }

  .case-link {
    color: var(--accent-text);
    font-weight: 600;
    text-decoration: none;
  }

  .case-link:hover {
    text-decoration: underline;
  }

  .case-label {
    display: block;
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #475569;
    margin-block-end: 2px;
  }

  /* CASO DESTACADO (página individual) */

  .case-detail {
    padding: 0 0 80px;
  }

  .case-block {
    max-inline-size: 780px;
    margin: 0 auto 56px;
  }

  .case-block:last-child {
    margin-block-end: 0;
  }

  .case-block h2 {
    font-size: 1.5rem;
    color: var(--primary);
    margin-block: 4px 16px;
  }

  .case-block p {
    color: var(--text);
    margin-block-end: 16px;
  }

  .case-block p:last-child {
    margin-block-end: 0;
  }

  .case-media {
    margin: 40px auto 0;
    max-inline-size: 780px;
  }

  .case-media img {
    inline-size: 100%;
    block-size: auto;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
  }

  /* Reemplazan los estilos en línea (la CSP del sitio no permite style="...") */

  .case-label-top,
  .hero .case-label-top {
    margin-block-end: 12px;
  }

  .contact-cta {
    text-align: center;
  }

  .contact-cta p {
    color: var(--muted);
    max-inline-size: 640px;
    margin-inline: auto;
    margin-block-end: 28px;
  }

  /* ABOUT */

  .about {
    padding: 80px 0;
  }
  
  /* CONTACT */
  
  .contact {
    background: var(--bg-soft);
    padding: 80px 0;
  }
  
  .contact-data {
    margin-block-start: 24px;
    color: var(--muted);
  }
  
  /* FOOTER */
  
  .site-footer {
    background: #111827;
    color: #9ca3af;
    padding: 32px 0;
    text-align: center;
    font-size: 0.9rem;
  }

  .site-footer .container::before {
    content: "";
    display: block;
    inline-size: 32px;
    block-size: 32px;
    margin: 0 auto 12px;
    background: url("/img/logo.svg") center / contain no-repeat;
  }
  
  /* CONTACT FORM */

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
  }
  
  .contact-info h2 {
    margin-block-start: 0;
  }
  
  .contact-form {
    background: white;
    padding: 32px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
  }
  
  .contact-form label {
    display: block;
    margin-block-end: 16px;
    font-size: 0.9rem;
    color: var(--muted);
  }
  
  .contact-form input,
  .contact-form textarea {
    inline-size: 100%;
    margin-block-start: 6px;
    padding: 10px 12px;
    border-radius: 6px;
    border: 1px solid #d1d5db;
    font-family: inherit;
    font-size: 0.95rem;
  }
  
  .contact-form input:focus,
  .contact-form textarea:focus {
    outline: none;
    border-color: var(--primary);
  }
  
  .contact-form input.error,
  .contact-form textarea.error {
    border-color: #ef4444;
  }
  
  /* Clase general para ocultar elementos */
  .hidden {
    display: none !important;
  }
  
  .error-message {
    display: block;
    color: #ef4444;
    font-size: 0.875rem;
    margin-block-start: 4px;
  }
  
  .error-message.hidden {
    display: none;
  }
  
  .success-message {
    padding: 16px;
    background-color: #d1fae5;
    border: 1px solid #10b981;
    border-radius: 6px;
    color: #065f46;
    margin-block-end: 20px;
  }
  
  /* Regla muy específica para ocultar mensaje de éxito */
  .success-message.hidden,
  div.success-message.hidden {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    block-size: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }
  
  .success-message p {
    margin: 0;
  }

  /* Honeypot: oculto para personas, visible para bots que ignoran CSS */
  .hp-field {
    position: absolute;
    left: -9999px;
    top: -9999px;
  }

  /* Banner de error del formulario (reemplaza alert() nativo) */
  .form-alert {
    padding: 16px;
    background-color: #fef2f2;
    border: 1px solid #ef4444;
    border-radius: 6px;
    color: #991b1b;
    margin-block-end: 20px;
    font-size: 0.9rem;
  }

  .form-alert.hidden {
    display: none !important;
  }
  
  /* Botón de envío: control de visibilidad de textos */
  #submit-btn {
    position: relative;
  }
  
  /* Estado inicial: mostrar solo "Enviar consulta" */
  #submit-btn #submit-text {
    display: inline-block;
  }
  
  /* Ocultar "Enviar consulta" cuando tiene clase hidden */
  #submit-btn #submit-text.hidden {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }
  
  /* "Enviando..." está oculto por defecto (cuando tiene clase hidden) */
  #submit-btn #submit-loading.hidden {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }
  
  /* Cuando se quita la clase hidden de "Enviando...", mostrarlo */
  #submit-btn #submit-loading:not(.hidden) {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  /* Cuando se muestra "Enviando...", forzar ocultar el texto normal */
  #submit-btn #submit-loading:not(.hidden) ~ #submit-text {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }
  
  @media (max-width: 768px) {
    .contact-grid {
      grid-template-columns: 1fr;
    }
  }
  
  .value-blocks {
    padding: 80px 0;
  }
  
  .value-blocks .block {
    margin-block-end: 48px;
  }
  
  .value-blocks h2 {
    font-size: 1.8rem;
    margin-block-end: 20px;
    color: var(--primary);
  }
  
  .value-blocks ul {
    list-style: none;
    padding: 0;
  }
  
  .value-blocks li {
    margin-block-end: 14px;
    padding-inline-start: 20px;
    position: relative;
  }
  
  .value-blocks li::before {
    content: "—";
    position: absolute;
    inset-inline-start: 0;
    color: #9aa5b1;
  }
 
  
  /* Accordion */
  
  .accordion {
    border-block-start: 1px solid #e5e7eb;
    padding-block-start: 20px;
  }
  
  .accordion summary {
    cursor: pointer;
    font-weight: 500;
    color: var(--primary);
  }
  
  .accordion ul {
    margin-block-start: 16px;
  }
  

  /* ACENTOS DE COLOR (sutiles): paleta de la marca = azul marino + naranja + celeste de las esquinas de la S */

  :root {
    --sky: #3b9ee4;
    --sky-text: #1a6aa8;
  }

  /* Títulos de sección: barrita naranja → celeste debajo */
  .services h2::after,
  .cases h2::after,
  .about h2::after,
  .contact-info h2::after,
  .value-blocks .block h2::after {
    content: "";
    display: block;
    inline-size: 56px;
    block-size: 4px;
    margin-block-start: 10px;
    border-radius: 2px;
    background: linear-gradient(90deg, #f7901f, var(--sky));
  }

  .services h2,
  .cases h2 {
    margin-block-end: 40px;
  }

  .cases .cases-lead {
    margin-block-start: -24px;
  }

  /* Tarjetas de servicios: filo superior de color, alternado naranja / celeste */
  .service-card {
    border-block-start: 4px solid #f7901f;
    box-shadow: 0 1px 2px rgba(15, 42, 68, .05);
  }

  .service-card:nth-child(even) {
    border-block-start-color: var(--sky);
  }

  /* Tarjetas de casos: filo celeste; "Resultado" destacado */
  .case-card {
    border-block-start: 4px solid var(--sky);
  }

  .case-card p:nth-of-type(3) .case-label {
    color: var(--sky-text);
  }

  /* "Ver caso completo": botón suave en vez de enlace suelto */
  .case-card p > .case-link {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 6px;
    background: #fff3e3;
    border: 1px solid #f7c98f;
    transition: background-color .15s, border-color .15s;
  }

  .case-card p > .case-link:hover {
    background: #f7901f;
    border-color: #f7901f;
    color: #1f2933;
    text-decoration: none;
  }

  /* Viñetas de "Cómo ayudamos": un guion de color por ítem */
  .value-blocks li::before {
    color: #f7901f;
    font-weight: 700;
  }

  .value-blocks li:nth-child(even)::before {
    color: var(--sky);
  }

  /* Nosotros: la frase clave como cita destacada */
  .about .claim {
    padding: 14px 20px;
    border-inline-start: 4px solid #f7901f;
    background: linear-gradient(90deg, #fff3e3, rgba(255, 243, 227, 0));
    color: var(--primary);
    font-size: 1.15rem;
    font-weight: 600;
  }

  /* Contacto: el campo enfocado toma el celeste de la marca */
  .contact-form input:focus,
  .contact-form textarea:focus {
    border-color: var(--sky);
    outline-color: var(--sky);
  }

  /* Pie: filo naranja → celeste arriba y logo (S con esquinas) un poco más grande */
  .site-footer {
    border-block-start: 4px solid transparent;
    border-image: linear-gradient(90deg, #f7901f, var(--sky)) 1;
  }

  .site-footer .container::before {
    inline-size: 40px;
    block-size: 40px;
  }


  /* MOVIMIENTO: las cajas aparecen subiendo y con fundido (la clase .reveal la agrega main.js;
     sin JS o con "reducir movimiento" se ven normales) */
  .reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .6s ease-out, transform .6s ease-out, box-shadow .2s ease;
  }

  .reveal.is-visible {
    opacity: 1;
    transform: none;
  }

  /* Al pasar el mouse, las tarjetas se despegan un poco */
  .service-card.is-visible:hover,
  .case-card.is-visible:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(15, 42, 68, .12);
  }

  @media (prefers-reduced-motion: reduce) {
    .reveal {
      opacity: 1;
      transform: none;
      transition: none;
    }
  }

  @media print {
    .reveal {
      opacity: 1;
      transform: none;
      transition: none;
    }
  }


  /* TIPOGRAFÍA: titulares con más carácter (Manrope pide espaciado más ceñido) */
  h1, h2, h3 {
    letter-spacing: -0.02em;
  }

  .hero h1 {
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.15;
  }

  .main-nav a {
    font-weight: 600;
  }

  /* MEDIOS: fotos con zoom lento y videos cortos (ver comercial/plan-media.md)
     Uso:
       <figure class="case-media media media-photo" data-zoom>            (data-zoom="in" | "out" | "pan")
         <div class="frame frame-browser"><div class="frame-view">
           <img src="/img/casos/x.webp" width="1600" height="1000" alt="..." loading="lazy">
         </div></div>
         <figcaption>...</figcaption>
       </figure>
       <figure class="case-media media media-video">
         <div class="frame frame-phone"><div class="frame-view">
           <video muted loop playsinline preload="none" poster="/img/casos/x.webp" width="..." height="...">
             <source src="/video/x.mp4" type="video/mp4"><source src="/video/x.webm" type="video/webm">
           </video>
         </div></div>
       </figure>
     Marcos: frame-browser | frame-phone | (sin marco: solo "frame"). main.js activa el zoom y el video al entrar en pantalla. */

  .media {
    margin: 40px auto 0;
    max-inline-size: 780px;
  }

  .media figcaption {
    margin-block-start: 10px;
    text-align: center;
    font-size: 0.85rem;
    color: var(--muted);
  }

  .frame {
    position: relative;
    border-radius: 12px;
    border: 1px solid #dfe3e8;
    background: #0f2a44;
    box-shadow: 0 14px 36px rgba(15, 42, 68, .16);
  }

  /* La imagen o el video se recortan acá: el zoom nunca se sale del marco ni pisa la barra */
  .frame-view {
    position: relative;
    overflow: hidden;
    border-radius: inherit;
  }

  .frame img,
  .frame video {
    display: block;
    inline-size: 100%;
    block-size: auto;
    border: 0;
    border-radius: 0;
  }

  /* Marco de navegador: barra con tres puntos y una "barra de direcciones" */
  .frame-browser {
    padding-block-start: 32px;
    background: #eef1f5;
    border-color: #d5dae1;
  }

  .frame-browser::before {
    content: "";
    position: absolute;
    inset-block-start: 12px;
    inset-inline-start: 14px;
    inline-size: 8px;
    block-size: 8px;
    border-radius: 50%;
    background: #ff6058;
    box-shadow: 14px 0 0 #ffbd2e, 28px 0 0 #28c940;
  }

  .frame-browser::after {
    content: "";
    position: absolute;
    inset-block-start: 7px;
    inset-inline: 84px 14px;
    block-size: 18px;
    border-radius: 9px;
    background: #fff;
  }

  .frame-browser .frame-view {
    border-radius: 0 0 11px 11px;
  }

  /* Marco de celular (para videos y fotos verticales) */
  .frame-phone {
    max-inline-size: 300px;
    margin-inline: auto;
    padding: 10px;
    border: 0;
    border-radius: 36px;
    background: #1f2933;
  }

  .frame-phone::before {
    content: "";
    position: absolute;
    inset-block-start: 14px;
    inset-inline-start: 50%;
    inline-size: 70px;
    block-size: 6px;
    margin-inline-start: -35px;
    border-radius: 3px;
    background: #0b1117;
    z-index: 2;
  }

  .frame-phone .frame-view {
    border-radius: 27px;
  }

  /* Foto con vida: zoom lento, solo mientras está a la vista (main.js agrega .is-active) */
  .media-photo[data-zoom] .frame img {
    transform-origin: 50% 40%;
    will-change: transform;
    animation: media-zoom-in 16s ease-in-out infinite alternate;
    animation-play-state: paused;
  }

  .media-photo[data-zoom="out"] .frame img {
    animation-name: media-zoom-out;
  }

  .media-photo[data-zoom="pan"] .frame img {
    transform-origin: 50% 50%;
    animation-name: media-zoom-pan;
  }

  .media-photo.is-active .frame img {
    animation-play-state: running;
  }

  @keyframes media-zoom-in {
    from { transform: scale(1); }
    to   { transform: scale(1.07) translate(-1.2%, -0.8%); }
  }

  @keyframes media-zoom-out {
    from { transform: scale(1.07) translate(1%, 0.6%); }
    to   { transform: scale(1); }
  }

  @keyframes media-zoom-pan {
    from { transform: scale(1.08) translateX(2.5%); }
    to   { transform: scale(1.08) translateX(-2.5%); }
  }

  /* Botón de pausa/reproducción (lo crea main.js; un video con movimiento siempre tiene que poder pausarse) */
  .media-toggle {
    position: absolute;
    inset-block-end: 10px;
    inset-inline-end: 10px;
    z-index: 3;
    inline-size: 34px;
    block-size: 34px;
    border: 0;
    border-radius: 50%;
    background: rgba(15, 42, 68, .72);
    color: #fff;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    opacity: .85;
    transition: opacity .15s, background-color .15s;
  }

  .media-toggle:hover,
  .media-toggle:focus-visible {
    opacity: 1;
    background: rgba(15, 42, 68, .92);
  }

  .media-toggle:focus-visible {
    outline: 3px solid #f7901f;
    outline-offset: 2px;
  }

  @media (max-width: 768px) {
    .media {
      margin-block-start: 28px;
    }

    .frame-phone {
      max-inline-size: 250px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .media-photo[data-zoom] .frame img {
      animation: none;
    }
  }

  /* CAJAS DE CASOS DE LA PORTADA: miniatura mínima arriba, título, una línea de resultado y botón */
  .cases .case-card {
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  .case-thumb {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #0f2a44;
    border-block-end: 1px solid #e5e7eb;
  }

  .case-thumb img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    transition: transform .7s ease;
  }

  .case-card:hover .case-thumb img {
    transform: scale(1.05);
  }

  .badge-video {
    position: absolute;
    inset-block-end: 12px;
    inset-inline-end: 12px;
    display: grid;
    place-items: center;
    inline-size: 38px;
    block-size: 38px;
    padding-inline-start: 3px;
    border-radius: 50%;
    background: rgba(15, 42, 68, .78);
    color: #fff;
    font-size: 13px;
  }

  .case-body {
    padding: 22px 26px 26px;
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .case-body h3 {
    margin-block-start: 0;
  }

  @media (min-width: 769px) {
    .cases .case-body h3 {
      min-block-size: 3.2em;   /* títulos de 1 o 2 líneas: el texto de abajo arranca parejo */
    }
  }

  .case-resumen {
    flex: 1;
    color: var(--text);
    font-size: 0.95rem;
  }

  @media (prefers-reduced-motion: reduce) {
    .case-card:hover .case-thumb img {
      transform: none;
    }
  }

  /* Video angosto (por ejemplo una conversación de chat): no se agranda más allá de su tamaño real para no verse borroso */
  .media-angosto {
    max-inline-size: 540px;
  }

  /* TARJETAS DE CIFRAS (páginas de caso): números grandes con su descripción */
  .stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    max-inline-size: 780px;
    margin: 40px auto 0;
  }

  .stat-card {
    background: var(--bg-soft);
    border-block-start: 4px solid var(--sky);
    border-radius: 10px;
    padding: 20px 14px 18px;
    text-align: center;
  }

  .stat-num {
    margin: 0 0 6px;
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--primary);
  }

  .stat-label {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.35;
    color: var(--text);
  }

  .stat-label small {
    display: block;
    margin-block-start: 2px;
    font-size: 0.8rem;
    color: var(--muted);
  }

  @media (max-width: 768px) {
    .stat-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  /* una sola tarjeta de cifras, centrada */
  .stat-grid.stat-grid-uno {
    grid-template-columns: minmax(0, 260px);
    justify-content: center;
    margin-block-end: 40px;
  }

  /* video al comienzo del detalle de un caso: aire antes del primer bloque */
  .case-detail .container > .case-media:first-child {
    margin-block-end: 40px;
  }


/* Bloque de texto después de una grilla de cifras (página Estados Unidos) */
.stat-grid + .case-block {
  margin-block-start: 56px;
}

/* FRANJA DE CIFRAS DE LA PORTADA (usa .stat-grid/.stat-card; los números cuentan con js/main.js) */
.stats-home {
  padding: 0 0 10px;
}

.stats-home h2 {
  margin: 0 0 8px;
  text-align: center;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--muted);
}

.stat-grid.stat-grid-home {
  max-inline-size: 980px;
  margin-block-start: 20px;
}

a.stat-card {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}

a.stat-card:hover,
a.stat-card:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(15, 42, 68, .12);
}

a.stat-card:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.stat-num span {
  font-variant-numeric: tabular-nums;
}

@media (max-width: 480px) {
  .stat-grid-home .stat-num {
    font-size: 1.6rem;
  }
}

/* Etiqueta de estado en la tarjeta de un producto (Conversa) y cifras con texto en vez de número */
.case-card .case-estado {
  display: inline-block;
  margin-block-end: 8px;
  padding: 3px 10px;
  border-radius: 999px;
  background: #e8f2fb;
  color: var(--sky-text);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.stat-num.stat-num-texto {
  font-size: 1.15rem;
  line-height: 1.25;
  min-block-size: 2.5em;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Botón de descarga de la presentación (sección Contacto) */
.contact-pdf {
  margin-block-start: 20px;
}

/* Botón flotante de WhatsApp (lo agrega js/main.js en todas las páginas) */
.wa-float {
    position: fixed;
    inset-inline-end: 20px;
    inset-block-end: 20px;
    z-index: 900;
    inline-size: 58px;
    block-size: 58px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #25d366;
    color: #fff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
    transition: transform .2s, box-shadow .2s;
}
.wa-float svg { inline-size: 32px; block-size: 32px; }
.wa-float:hover,
.wa-float:focus-visible { transform: scale(1.08); box-shadow: 0 8px 24px rgba(0, 0, 0, .32); }
.wa-float:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }
@media (max-width: 768px) {
    .wa-float { inset-inline-end: 16px; inset-block-end: 16px; inline-size: 52px; block-size: 52px; }
    .wa-float svg { inline-size: 28px; block-size: 28px; }
}
@media print { .wa-float { display: none; } }