/* Hoja compartida del sitio de Elefante Mental: la portada y las
   paginas internas de trabajos usan exactamente los mismos estilos. */
    /* ==========================================================
       Elefante Mental — v3
       - Intro: pantalla negra, aparece el (..), guiña el ojo y se
         desvanece. Una vez por sesion; se omite con
         prefers-reduced-motion.
       - Proyectos: de vuelta a las tarjetas sobre blanco (los
         paneles de color pleno no convencieron).
       - Se mantienen de la pasada a lo epic.net: pildoras chicas
         en mayusculas, statement central, micro-tagline.
       ========================================================== */
    :root {
      --tinta: #333333;      /* carbon oficial */
      --papel: #fafafa;      /* el blanco-gris del sitio viejo */
      --blanco: #ffffff;
      --naranja: #f29f05;
      --violeta: #c94dff;
      --celeste: #11a0d9;
      --rojo: #e93f31;
      --verde: #4aba66;
      /* el celeste original del sitio viejo, y su variante oscura
         para texto (4.97:1 sobre blanco). Los demas colores de la marca
         quedan SOLO para el logo y el intro. */
      --celeste-viejo: #5fa7c8;
      --celeste-texto: #3e7695;
      --gris: #6a6a6a;
      --linea: #dcdcdc;
      --ancho: 1120px;
      --display: 'Fraunces', Georgia, serif;
      --sans: 'Figtree', 'Segoe UI', sans-serif;
    }
    * { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body {
      font-family: var(--sans); font-weight: 400; font-size: 17px;
      line-height: 1.65; color: var(--tinta); background: var(--papel);
      background-image: radial-gradient(circle, #ececec 1px, transparent 1px);
      background-size: 26px 26px;
    }
    h1, h2, h3 {
      font-family: var(--display);
      font-variation-settings: 'SOFT' 100, 'WONK' 1;
      font-weight: 850; line-height: 1.04; color: var(--tinta);
      letter-spacing: -0.01em;
    }
    a { color: var(--celeste-texto); }
    :focus-visible { outline: 3px solid var(--celeste-texto); outline-offset: 2px; border-radius: 6px; }
    img { display: block; max-width: 100%; }
    .contenedor { max-width: var(--ancho); margin: 0 auto; padding: 0 28px; }

    /* antetitulo entre parentesis: ( proyectos ) */
    .antetitulo {
      font-weight: 600; font-size: 13px; letter-spacing: 0.22em;
      text-transform: uppercase; color: var(--tinta); margin-bottom: 16px;
    }
    .antetitulo b { font-family: var(--display); font-weight: 850; letter-spacing: 0; font-size: 17px; position: relative; top: 1px; }

    /* ----- aparicion al hacer scroll, a lo epic.net -----
       Los bloques suben con easing expo y en cascada (el guion les asigna
       el retraso segun su orden en la seccion). Los titulos se revelan
       palabra por palabra desde una mascara. Los fondos no cambian. */
    .aparece {
      opacity: 0; transform: translateY(34px);
      transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
                  transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .aparece.visto { opacity: 1; transform: none; }
    /* titulos: cada palabra sube desde atras de un corte invisible */
    .titulo-rev .palabra {
      display: inline-block; overflow: hidden; vertical-align: top;
      padding: 0.08em 0.06em 0.14em; margin: -0.08em -0.06em -0.14em;
    }
    .titulo-rev .palabra-int {
      display: inline-block; transform: translateY(120%);
      transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .titulo-rev.visto .palabra-int { transform: none; }
    /* las capturas se asientan con un zoom suave al entrar */
    .navegador img { transform: scale(1.07); transition: transform 1.3s cubic-bezier(0.16, 1, 0.3, 1); }
    .aparece.visto .navegador img, .visto .navegador img { transform: scale(1); }
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      .aparece { opacity: 1; transform: none; transition: none; }
      .titulo-rev .palabra-int { transform: none; transition: none; }
      .navegador img { transform: none; transition: none; }
    }

    /* ---------- pildoras a lo epic: chicas, mayusculas, flecha ---------- */
    .pildora {
      display: inline-flex; align-items: center; gap: 9px;
      font-family: var(--sans); font-weight: 600; font-size: 12px;
      letter-spacing: 0.14em; text-transform: uppercase;
      color: var(--tinta); background: transparent;
      border: 1.5px solid currentColor; border-radius: 999px;
      padding: 10px 20px; text-decoration: none; cursor: pointer;
      transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
    }
    .pildora .flecha { font-family: var(--sans); font-weight: 400; transition: transform 0.15s ease; }
    .pildora:hover { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }
    .pildora:hover .flecha { transform: translateX(3px); }
    .pildora--llena { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }
    .pildora--llena:hover { background: #000; }
    .sello {
      display: inline-flex; align-items: center; gap: 9px;
      font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
      border: 1.5px dashed var(--gris); color: var(--gris);
      border-radius: 999px; padding: 8px 16px;
    }

    /* ---------- intro: carga de puntitos -> caen los parentesis ->
       crece en blanco y negro -> guiña -> viaja a su lugar y toma color --- */
    #intro {
      position: fixed; inset: 0; z-index: 100;
      background: #000;
      display: flex; align-items: center; justify-content: center;
      transition: background 0.8s ease;
    }
    #intro.transparente { background: transparent; pointer-events: none; }
    .intro-fila {
      font-family: var(--display); font-weight: 900;
      font-variation-settings: 'SOFT' 100;
      font-size: clamp(60px, 9vw, 92px); line-height: 1;
      display: flex; align-items: center; gap: 0.2em;
      transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.3, 1);
    }
    /* los puntitos de "carga": blancos, se prenden de a uno */
    .intro-fila .punto {
      width: 0.17em; height: 0.17em; border-radius: 50%;
      background: #f2f2f2; opacity: 0; transform: scale(0.4);
      transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.2, 0.7, 0.3, 1.4),
                  width 0.4s ease, margin 0.4s ease, background 0.6s ease;
    }
    .intro-fila .punto.prendido { opacity: 1; transform: scale(1); }
    /* los parentesis caen desde arriba y la fila les hace lugar */
    .intro-fila .paren {
      color: #f2f2f2; width: 0; display: flex; justify-content: center;
      opacity: 0; transform: translateY(-1.3em);
      transition: width 0.35s ease, opacity 0.3s ease,
                  transform 0.5s cubic-bezier(0.3, 0.7, 0.3, 1.25), color 0.6s ease;
    }
    .intro-fila .paren.cayo { width: 0.42em; opacity: 1; transform: none; }
    /* los puntos que quedaron afuera caen y desaparecen */
    .intro-fila .punto.cae {
      opacity: 0; transform: translateY(70vh);
      transition: transform 0.65s cubic-bezier(0.55, 0, 0.85, 0.36), opacity 0.6s ease 0.15s;
    }
    .intro-fila .punto.colapsa { width: 0; margin: 0 -0.1em; }
    /* lo que queda, (..) en blanco, crece al centro */
    .intro-fila.crece { transform: scale(2.6); }
    .intro-fila.viaja { transition: transform 0.85s cubic-bezier(0.3, 0.7, 0.2, 1); }
    /* al viajar a su lugar del heroe, toma los colores de la marca */
    .intro-fila.coloreada .p-izq { color: var(--verde); }
    .intro-fila.coloreada .p-der { color: var(--rojo); }
    .intro-fila.coloreada .ojo-a { background: var(--celeste); }
    .intro-fila.coloreada .ojo-b { background: var(--naranja); }
    /* el guiño, todavia en blanco y negro */
    .intro-fila .ojo-b.guina { animation: intro-guino 0.55s ease; transform-origin: center; }
    @keyframes intro-guino {
      0%, 100% { transform: scaleY(1); }
      45%, 60% { transform: scaleY(0.06); }
    }

    /* ---------- cabecera con micro-tagline centrado ---------- */
    header {
      position: sticky; top: 0; z-index: 10;
      background: color-mix(in srgb, var(--papel) 88%, transparent);
      backdrop-filter: blur(10px);
      border-bottom: 1px solid var(--linea);
    }
    .cabecera { position: relative; display: flex; align-items: center; gap: 16px; padding: 14px 28px; max-width: 1380px; margin: 0 auto; }
    .marca img { height: 44px; width: auto; }
    .lema {
      position: absolute; left: 50%; transform: translateX(-50%);
      font-size: 10px; font-weight: 600; letter-spacing: 0.32em;
      text-transform: uppercase; color: var(--gris); white-space: nowrap;
    }
    nav { margin-left: auto; display: flex; align-items: center; gap: 26px; }
    nav a:not(.pildora) {
      text-decoration: none; color: var(--tinta); font-weight: 500; font-size: 15px;
      letter-spacing: 0.02em;
    }
    nav a:not(.pildora):hover { color: var(--celeste-texto); }

    /* ---------- heroe ---------- */
    .heroe { padding: 110px 0 120px; overflow: hidden; }
    .heroe .contenedor { display: grid; grid-template-columns: 1.25fr 1fr; gap: 48px; align-items: center; }
    .heroe h1 { font-size: clamp(2.8rem, 6vw, 5rem); margin-bottom: 28px; }
    .heroe h1 .c1 { color: var(--celeste-texto); }
    .heroe h1 .c2 { color: var(--celeste-texto); font-style: italic; }
    .heroe p { font-size: 19px; max-width: 52ch; margin-bottom: 38px; color: #4a4a4a; }
    .heroe-acciones { display: flex; gap: 14px; flex-wrap: wrap; }

    /* el (..): parentesis tipograficos + ojos (en el heroe siguen el cursor) */
    .mirada {
      font-family: var(--display); font-weight: 900;
      font-variation-settings: 'SOFT' 100;
      font-size: clamp(170px, 24vw, 300px); line-height: 1;
      display: flex; align-items: center; justify-content: center; gap: 0.02em;
      user-select: none;
    }
    .mirada .p1 { color: var(--verde); }
    .mirada .p2 { color: var(--rojo); }
    .mirada .ojos { display: flex; gap: 0.14em; padding: 0 0.06em; }
    .mirada .ojo {
      width: 0.23em; height: 0.23em; border-radius: 50%;
      position: relative; top: 0.05em;
      transition: transform 0.08s linear;
    }
    .mirada .ojo:first-child { background: var(--celeste); }
    .mirada .ojo:last-child { background: var(--naranja); }

    /* ---------- secciones ---------- */
    section { padding: 100px 0; }
    section h2 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 18px; }
    .seccion-intro { max-width: 58ch; margin-bottom: 52px; font-size: 18px; color: #4a4a4a; }

    /* ---------- proyectos: tarjetas sobre blanco ---------- */
    #proyectos { background: var(--blanco); border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
    .antetitulo b { color: var(--celeste-texto); }
    .proyectos-grilla { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
    .proyecto { display: flex; flex-direction: column; gap: 18px; }
    .navegador {
      border-radius: 18px; overflow: hidden; background: var(--blanco);
      box-shadow: 0 1px 2px rgba(51,51,51,0.08), 0 12px 32px rgba(51,51,51,0.12);
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    .proyecto:hover .navegador { transform: translateY(-6px); box-shadow: 0 2px 4px rgba(51,51,51,0.08), 0 22px 44px rgba(51,51,51,0.16); }
    .navegador-barra { display: flex; gap: 7px; padding: 12px 16px; background: var(--papel); }
    .navegador-barra i { width: 11px; height: 11px; border-radius: 50%; }
    .navegador-barra i { background: #d6d6d6; }
    .navegador img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
    .proyecto-etiqueta { font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
    .proyecto-etiqueta { color: var(--celeste-texto); }
    .proyecto h3 { font-size: 24px; margin: 4px 0 8px; }
    .proyecto p { font-size: 16px; color: #4a4a4a; }
    .proyecto .sello { margin-top: 14px; align-self: flex-start; }

    /* ---------- portfolio: la grilla del sitio viejo ----------
       Miniaturas cuadradas en blanco y negro; el color aparece al pasar
       el mouse, como en elefante.webflow.io. */
    #portfolio { background: var(--blanco); border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
    .portfolio-grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 26px; }
    .obra img {
      width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px;
      filter: grayscale(1); transition: filter 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease;
    }
    .obra:hover img { filter: none; transform: translateY(-4px); box-shadow: 0 12px 28px rgba(51,51,51,0.16); }
    .obra h3 { font-size: 17px; margin: 12px 0 2px; }
    .obra p { font-size: 14px; color: var(--gris); line-height: 1.45; }
    @media (prefers-reduced-motion: reduce) { .obra img { filter: none; } }

    /* ---------- servicios ---------- */
    .servicios-grilla { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
    .servicio {
      background: var(--blanco); border-radius: 18px; padding: 34px 32px;
      box-shadow: 0 1px 2px rgba(51,51,51,0.06);
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    .servicio:hover { transform: translateY(-4px); box-shadow: 0 10px 28px rgba(51,51,51,0.12); }
    .servicio .numero {
      font-family: var(--display); font-style: italic; font-weight: 700;
      font-size: 30px; display: block; margin-bottom: 10px;
    }
    .servicio .numero { color: var(--celeste-texto); }
    .servicio h3 { font-size: 21px; margin-bottom: 10px; }
    .servicio p { font-size: 16px; color: #4a4a4a; }

    /* ---------- estudio: statement central ---------- */
    #estudio { background: var(--tinta); background-image: radial-gradient(circle, #3d3d3d 1px, transparent 1px); background-size: 26px 26px; padding: 130px 0; }
    #estudio .contenedor { text-align: center; }
    #estudio .antetitulo { color: var(--papel); }
    #estudio .antetitulo b { color: var(--celeste-viejo); }
    .statement {
      font-family: var(--display); font-variation-settings: 'SOFT' 100, 'WONK' 1;
      font-weight: 700; font-size: clamp(1.7rem, 3.6vw, 2.9rem); line-height: 1.3;
      color: var(--papel); max-width: 26ch; margin: 18px auto 0;
    }
    .statement b { font-weight: 850; font-style: italic; }
    .statement b { color: var(--celeste-viejo); }
    #estudio .coda { color: #c9c9c9; font-size: 17px; max-width: 52ch; margin: 34px auto 0; }
    #estudio .lockup { margin: 56px auto 0; width: 280px; opacity: 0.95; }

    /* ---------- contacto ---------- */
    .contacto-grilla { display: grid; grid-template-columns: 1fr 1.25fr; gap: 60px; align-items: start; }
    form {
      background: var(--blanco); border-radius: 22px; padding: 40px 36px;
      box-shadow: 0 1px 2px rgba(51,51,51,0.06), 0 16px 40px rgba(51,51,51,0.10);
      display: grid; gap: 20px;
    }
    label { font-weight: 600; font-size: 14px; color: var(--tinta); display: grid; gap: 8px; }
    label .opcional { font-weight: 400; color: var(--gris); }
    input, select, textarea {
      font: inherit; font-weight: 400; color: var(--tinta);
      background: var(--papel); border: 2px solid transparent;
      border-radius: 12px; padding: 13px 15px; width: 100%; min-height: 50px;
    }
    textarea { min-height: 130px; resize: vertical; }
    input:focus, select:focus, textarea:focus { outline: none; border-color: var(--celeste); background: var(--blanco); }
    .aviso-formulario { display: none; font-size: 15px; color: var(--celeste-texto); background: #e7f4fa; border-radius: 12px; padding: 13px 15px; }
    .datos-contacto { margin-top: 10px; display: grid; gap: 10px; font-size: 16px; color: #57595b; }
    .datos-contacto b { font-weight: 600; color: var(--celeste-texto); margin-right: 6px; }
    .datos-contacto a { color: #57595b; text-decoration: none; }
    .datos-contacto a:hover { color: var(--celeste-texto); }

    /* ---------- pie ---------- */
    footer { background: var(--tinta); padding: 44px 0; }
    .pie { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
    .pie img { height: 42px; }
    .pie small { color: #b5b5b5; font-size: 14px; margin-left: auto; }

    /* ---------- movil ---------- */
    @media (max-width: 1060px) { .lema { display: none; } }
    @media (max-width: 860px) {
      .heroe { padding: 48px 0 72px; }
      .heroe .contenedor { grid-template-columns: 1fr; gap: 20px; }
      .heroe .mirada { order: -1; font-size: 140px; justify-content: flex-start; }
      section { padding: 68px 0; }
      .proyectos-grilla, .servicios-grilla, .contacto-grilla { grid-template-columns: 1fr; }
      nav a:not(.pildora) { display: none; } /* menu movil propio: pendiente de la v2.3 */
      .cabecera { padding: 12px 20px; }
      .marca img { height: 38px; }
    }

    /* ---------- paginas internas de trabajos ---------- */
    .trabajo-cabecera { padding: 90px 0 40px; }
    .trabajo-cabecera h1 { font-size: clamp(2.4rem, 5vw, 3.8rem); margin-bottom: 18px; }
    .trabajo-cabecera p { font-size: 18px; color: #57595b; max-width: 60ch; }
    .galeria { display: grid; gap: 30px; padding-bottom: 40px; }
    .galeria img { width: 100%; border-radius: 14px; box-shadow: 0 2px 6px rgba(51,51,51,0.08), 0 14px 36px rgba(51,51,51,0.10); }
    .trabajo-nav { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; padding: 26px 0 90px; }
    .trabajo-nav .separador { flex: 1; }
    /* la tarjeta del portfolio ahora es un enlace */
    a.obra { display: block; text-decoration: none; color: inherit; }

    /* ================= arreglos de la auditoria movil =================== */
    /* 1. menu movil: hamburguesa + panel con las secciones */
    .menu-boton {
      display: none; flex-direction: column; justify-content: center;
      align-items: center; gap: 5px; width: 44px; height: 44px;
      background: none; border: none; border-radius: 10px; cursor: pointer;
    }
    .menu-boton i { display: block; width: 22px; height: 2.5px; background: var(--tinta); border-radius: 2px; }
    .menu-panel { display: none; }
    .marca .logo-icono { display: none; }
    @media (max-width: 860px) {
      .menu-boton { display: inline-flex; }
      .menu-panel.abierto {
        display: block; position: absolute; top: 100%; left: 0; right: 0;
        background: var(--blanco); border-bottom: 1px solid var(--linea);
        box-shadow: 0 18px 32px rgba(51, 51, 51, 0.14); padding: 6px 20px 14px;
      }
      .menu-panel a {
        display: flex; align-items: center; min-height: 48px; padding: 2px 8px;
        font-weight: 500; font-size: 17px; color: var(--tinta);
        text-decoration: none; border-bottom: 1px solid var(--linea);
      }
      .menu-panel a:last-child { border-bottom: 0; }
      /* el lockup completo cede el lugar al isotipo: asi entran la
         pildora de Contacto y el menu sin desbordar los 375px */
      .marca .logo-completo { display: none; }
      .marca .logo-icono { display: block; height: 30px; }
    }
    /* 2. en pantallas tactiles no hay hover: el portfolio va directo en color */
    @media (hover: none) { .obra img { filter: none; } }
    /* 3. objetivos tactiles de 44px o mas */
    @media (pointer: coarse), (max-width: 860px) {
      .pildora { min-height: 44px; }
      .marca { min-height: 44px; display: inline-flex; align-items: center; }
      .datos-contacto span { min-height: 44px; display: flex; align-items: center; }
    }
    @media (max-width: 860px) {
      /* 4. portfolio a dos columnas: la pagina pierde ~3000px de alto */
      .portfolio-grilla { grid-template-columns: 1fr 1fr; gap: 18px 14px; }
      .obra h3 { font-size: 15px; margin: 8px 0 2px; }
      .obra p { font-size: 13px; }
      /* 5. servicios mas compactos */
      .servicios-grilla { gap: 16px; }
      .servicio { padding: 24px 22px; }
      .servicio .numero { font-size: 24px; margin-bottom: 6px; }
      /* 6. navegacion de las paginas de trabajos, apilada a lo ancho */
      .trabajo-nav { flex-direction: column; align-items: stretch; }
      .trabajo-nav .separador { display: none; }
      .trabajo-nav .pildora { justify-content: center; }
    }

    /* ================= heroe movil centrado ============================
       Pedido del cliente: en el celular, el heroe va centrado (logo,
       antetitulo, titular, parrafo y botones). Las demas secciones se
       mantienen alineadas a la izquierda. */
    @media (max-width: 860px) {
      .heroe .contenedor > div:first-child { text-align: center; }
      .heroe p { margin-left: auto; margin-right: auto; }
      .heroe-acciones { justify-content: center; }
      .heroe .mirada { justify-content: center; }
    }

    /* ================= servicios con micro-escenas (opcion A del lab) ==== */
    .servicio { position: relative; overflow: hidden; padding-bottom: 150px; }
    .mini-escena {
      position: absolute; right: 18px; bottom: 10px; width: 190px; height: 130px;
      pointer-events: none;
    }
    .mini-escena path, .mini-escena circle, .mini-escena rect {
      fill: none; stroke: var(--celeste-viejo); stroke-width: 2.5;
      stroke-linecap: round; stroke-linejoin: round;
      stroke-dasharray: 1; stroke-dashoffset: 1;
    }
    @keyframes trazo  { to { stroke-dashoffset: 0; } }
    @keyframes trazo2 { to { stroke-dashoffset: 0; } }
    @keyframes relleno  { to { fill-opacity: 1; stroke-dashoffset: 0; } }
    @keyframes relleno2 { to { fill-opacity: 1; stroke-dashoffset: 0; } }
    /* se dibuja al entrar en pantalla (el observador pone .visto)... */
    .servicio.visto .t1 { animation: trazo 0.6s ease forwards 0.15s; }
    .servicio.visto .t2 { animation: trazo 0.6s ease forwards 0.55s; }
    .servicio.visto .t3 { animation: trazo 0.6s ease forwards 0.95s; }
    /* ...y se redibuja al pasar el mouse (otro nombre de animacion
       con el mismo contenido reinicia el dibujo) */
    .servicio:hover .t1 { animation: trazo2 0.6s ease forwards 0.05s; }
    .servicio:hover .t2 { animation: trazo2 0.6s ease forwards 0.45s; }
    .servicio:hover .t3 { animation: trazo2 0.6s ease forwards 0.85s; }
    .mini-escena .pinta { fill-opacity: 0; }
    .servicio.visto .p1 { animation: relleno 0.45s ease forwards 1.5s; }
    .servicio.visto .p2 { animation: relleno 0.45s ease forwards 1.7s; }
    .servicio.visto .p3 { animation: relleno 0.45s ease forwards 1.9s; }
    .servicio:hover .p1 { animation: relleno2 0.45s ease forwards 1.3s; }
    .servicio:hover .p2 { animation: relleno2 0.45s ease forwards 1.5s; }
    .servicio:hover .p3 { animation: relleno2 0.45s ease forwards 1.7s; }
    /* los ojos del mini (..): son el logo, van en sus colores */
    .mini-escena .ojo-c { fill: #11a0d9; stroke: #11a0d9; }
    .mini-escena .ojo-n { fill: #f29f05; stroke: #f29f05; }
    @media (max-width: 860px) {
      .servicio { padding-bottom: 132px; }
      .mini-escena { width: 170px; height: 116px; right: 12px; bottom: 8px; }
    }
    @media (prefers-reduced-motion: reduce) {
      .mini-escena path, .mini-escena circle, .mini-escena rect { stroke-dashoffset: 0; }
      .mini-escena .pinta { fill-opacity: 1; }
      .servicio .t1, .servicio .t2, .servicio .t3,
      .servicio .p1, .servicio .p2, .servicio .p3 { animation: none !important; }
    }

    /* ================= formulario conectado ============================ */
    /* el campo trampa queda fuera de la pantalla (los robots igual lo ven) */
    .campo-trampa { position: absolute; left: -5000px; top: -5000px; width: 1px; height: 1px; overflow: hidden; }
    .aviso-formulario.aviso-error { color: var(--rojo-texto, #c92c1f); background: #fdeeed; }