/* Estilos compartidos por la portada y las paginas de servicio.
   Salieron del bloque <style> en linea de index.html: no los dupliques. */
  html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
  body { font-family: 'Inter', sans-serif; background: #ffffff; color: #0f172a; }
  ::selection { background: #A3704C; color: #ffffff; }
  ::-webkit-scrollbar { width: 9px; }
  ::-webkit-scrollbar-track { background: #f1f5f9; }
  ::-webkit-scrollbar-thumb { background: #cbd5e1; }
  ::-webkit-scrollbar-thumb:hover { background: #A3704C; }

  .page { display: none; }
  .page.is-active { display: block; animation: pageIn .6s cubic-bezier(.22,1,.36,1) both; }
  @keyframes pageIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

  [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1); }
  [data-reveal].revealed { opacity: 1; transform: none; }

  .eyebrow { font-size: 10px; letter-spacing: .32em; text-transform: uppercase; font-weight: 500; }

  .navlink { position: relative; }
  .navlink::after { content:''; position:absolute; left:0; bottom:-7px; height:1px; width:100%; background:#A3704C; transform: scaleX(0); transform-origin: right; transition: transform .45s cubic-bezier(.22,1,.36,1); }
  .navlink:hover::after, .navlink.is-current::after { transform: scaleX(1); transform-origin: left; }
  .navlink.is-current { color:#A3704C; }

  .card-img { transition: transform 1.1s cubic-bezier(.22,1,.36,1); }
  .group:hover .card-img { transform: scale(1.06); }


  .field { border: 0; border-bottom: 1px solid #e2e8f0; background: transparent; padding: 14px 2px; width: 100%; font-size: 14px; color: #0f172a; transition: border-color .4s ease; }
  .field:focus { outline: none; border-color: #A3704C; }
  .field::placeholder { color: #94a3b8; }
  select.field { appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='1.5'><polyline points='6 9 12 15 18 9'/></svg>"); background-repeat: no-repeat; background-position: right 2px center; cursor: pointer; }

  .wa-pulse::before { content:''; position:absolute; inset:0; border-radius:9999px; background:#25D366; opacity:.35; animation: waPulse 2.6s cubic-bezier(.22,1,.36,1) infinite; }
  @keyframes waPulse { 0% { transform: scale(1); opacity:.35; } 70% { transform: scale(1.7); opacity:0; } 100% { opacity:0; } }

  .lb { opacity: 0; pointer-events: none; transition: opacity .4s ease; }
  .lb.open { opacity: 1; pointer-events: auto; }

  .marquee { animation: marquee 34s linear infinite; }
  @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-100%); } }

  /* ---------- INFOGRAFÍA ANIMADA DEL HERO ---------- */
  .blueprint .draw    { stroke-dasharray: 100; stroke-dashoffset: 100; }
  .blueprint.run .draw{ animation: bpDraw 1.4s cubic-bezier(.65,0,.35,1) forwards; animation-delay: var(--bd, 0s); }
  @keyframes bpDraw { to { stroke-dashoffset: 0; } }

  .blueprint .pop     { opacity: 0; transform: translateY(8px); transform-box: fill-box; transform-origin: center; }
  .blueprint.run .pop { animation: bpPop .6s cubic-bezier(.22,1,.36,1) forwards; animation-delay: var(--bd, 0s); }
  @keyframes bpPop { to { opacity: 1; transform: none; } }

  .blueprint .slidein     { opacity: 0; transform: translateX(-16px); transform-box: fill-box; }
  .blueprint.run .slidein { animation: bpSlide .7s cubic-bezier(.22,1,.36,1) forwards; animation-delay: var(--bd, 0s); }
  @keyframes bpSlide { to { opacity: 1; transform: none; } }

  .blueprint .led      { opacity: 0; }
  .blueprint.run .led  { animation: bpLed 2.6s ease-in-out infinite; animation-delay: var(--bd, 0s); }
  @keyframes bpLed { 0%,100% { opacity: .25; } 50% { opacity: 1; } }

  /* Planta del vestidor: las 3 distribuciones se turnan */
  .blueprint .plan      { opacity: 0; }
  .blueprint.run .plan  { animation: bpPlan 10.5s ease-in-out infinite; animation-delay: var(--bd, 0s); }
  @keyframes bpPlan { 0% { opacity: 0; } 3%,33% { opacity: 1; } 36%,100% { opacity: 0; } }

  .bp-tab { transition: color .35s ease, border-color .35s ease; }

  @media (prefers-reduced-motion: reduce) {
    .blueprint .draw, .blueprint .pop, .blueprint .slidein, .blueprint .led, .blueprint .plan,
    .blueprint.run .draw, .blueprint.run .pop, .blueprint.run .slidein, .blueprint.run .led, .blueprint.run .plan {
      animation: none !important; opacity: 1; transform: none; stroke-dashoffset: 0;
    }
    .blueprint .plan.is-secondary { display: none; }
    .marquee { animation: none; }
    html { scroll-behavior: auto; }
  }

  /* ---------- COLLAGE VERTICAL EN MOVIMIENTO ----------
     Columnas que se desplazan en sentidos alternos, con las fotos
     desvaneciéndose al entrar y al salir por arriba y por abajo.
     El truco del bucle: cada columna contiene su contenido DUPLICADO
     y se desplaza un -50%, así el salto es invisible.
     Los márgenes van en los hijos (margin-bottom) y no como gap del
     contenedor: con gap, el -50% no cuadra y se nota el corte. */
  .collage {
    --collage-hueco: 16px;
    --collage-alto: 540px;
    /* Ancho del desvanecido en los bordes. En píxeles y no en %, para que
       no crezca con la altura de la galería. Subir este número difumina
       más; bajarlo deja las fotos aún más limpias. */
    --collage-fundido: 34px;
    display: flex;
    gap: var(--collage-hueco);
    height: var(--collage-alto);
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--collage-fundido), #000 calc(100% - var(--collage-fundido)), transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0, #000 var(--collage-fundido), #000 calc(100% - var(--collage-fundido)), transparent 100%);
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
  }
  @media (min-width: 640px) { .collage { --collage-alto: 660px; } }
  @media (min-width: 1024px) { .collage { --collage-hueco: 28px; --collage-alto: 820px; } }

  .collage-col { flex: 1 1 0; min-width: 0; }

  .collage-track { display: flex; flex-direction: column; will-change: transform; }
  .collage-track > * { margin-bottom: var(--collage-hueco); }

  .collage-track.sube { animation: collageSube var(--dur, 32s) linear infinite; }
  .collage-track.baja { animation: collageBaja var(--dur, 32s) linear infinite; }
  @keyframes collageSube { from { transform: translateY(0); }    to { transform: translateY(-50%); } }
  @keyframes collageBaja { from { transform: translateY(-50%); } to { transform: translateY(0); } }

  /* Se detiene al pasar el ratón: si no, acertar con el clic en una
     foto en movimiento es una lotería. */
  /* La pausa al pasar el ratón SOLO en dispositivos con ratón de verdad.
     En táctil, el navegador deja pegado el :hover tras un toque y no lo
     suelta hasta que tocas en otro sitio: la animación se quedaba
     congelada para siempre. (hover: hover) excluye móviles y tablets. */
  @media (hover: hover) and (pointer: fine) {
    .collage:hover .collage-track { animation-play-state: paused; }
  }
  /* El teclado sí puede pausar en cualquier dispositivo: no se queda pegado. */
  .collage:focus-within .collage-track { animation-play-state: paused; }

  @media (prefers-reduced-motion: reduce) {
    .collage-track { animation: none !important; }
  }

  /* ---------- CINTA HORIZONTAL CONTINUA ----------
     Misma idea que el collage pero en horizontal: la fila lleva su
     contenido duplicado y se desplaza un -50% sin parar. El hueco
     entre fotos es el padding de cada diapositiva, no un gap del
     contenedor, así el bucle cuadra exacto. */
  .cinta {
    --cinta-fundido: 40px;
    overflow: hidden;
    /* Imprescindible dentro de una rejilla o un flex: sin esto el
       contenedor se estira hasta el ancho de todas las tarjetas. */
    min-width: 0;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--cinta-fundido), #000 calc(100% - var(--cinta-fundido)), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 var(--cinta-fundido), #000 calc(100% - var(--cinta-fundido)), transparent 100%);
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
  }

  .cinta-pista { will-change: transform; }
  .cinta-pista > * { width: 74%; }
  @media (min-width: 640px)  { .cinta-pista > * { width: 44%; } }
  @media (min-width: 1024px) { .cinta-pista > * { width: 30%; } }

  /* El desplazamiento NO puede ser -50%: la pista es un flex que mide
     lo que el contenedor, no la suma de sus diapositivas (que desbordan).
     El JS mide el ancho real de la primera mitad y lo escribe aquí. */
  .cinta-pista.rueda { animation: cintaRueda var(--cinta-dur, 55s) linear infinite; }
  @keyframes cintaRueda {
    from { transform: translateX(0); }
    to   { transform: translateX(var(--cinta-avance, -50%)); }
  }

  /* Se detiene al pasar el ratón: las fotos abren el lightbox y hay
     que poder acertar con el clic. */
  /* Mismo motivo que en el collage: en táctil el :hover se queda pegado. */
  @media (hover: hover) and (pointer: fine) {
    .cinta:hover .cinta-pista { animation-play-state: paused; }
  }
  .cinta:focus-within .cinta-pista { animation-play-state: paused; }

  @media (prefers-reduced-motion: reduce) {
    .cinta-pista { animation: none !important; }
  }

  /* ---------- TARJETAS DE RESEÑA ---------- */
  /* Van más anchas que las fotos: son texto y hay que poder leerlas. */
  .cinta-resenas > * { width: 86%; }
  @media (min-width: 640px)  { .cinta-resenas > * { width: 52%; } }
  @media (min-width: 1024px) { .cinta-resenas > * { width: 34%; } }

  .resena {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid rgba(226, 232, 240, .8);
    border-radius: 16px;
    padding: 26px 24px;
  }

  .avatar {
    flex-shrink: 0;
    width: 38px; height: 38px;
    border-radius: 9999px;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
  }
  .av-1 { background: #A3704C; }
  .av-2 { background: #334155; }
  .av-3 { background: #8A5C3C; }
  .av-4 { background: #64748b; }

  .estrellas { color: #A3704C; font-size: 12px; letter-spacing: 1px; margin-top: 4px; }

  /* La G de Google en SVG incrustado: una sola definición para las 16
     tarjetas y sin depender de ningún archivo externo. */
  .logo-g {
    flex-shrink: 0;
    width: 16px; height: 16px;
    margin-top: 3px;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><path fill='%23EA4335' d='M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z'/><path fill='%234285F4' d='M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z'/><path fill='%23FBBC05' d='M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z'/><path fill='%2334A853' d='M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z'/></svg>");
  }

  .resena-texto {
    margin-top: 18px;
    font-size: 13.5px;
    line-height: 1.75;
    font-weight: 300;
    color: #475569;
    /* Recorte a 7 líneas para que todas las tarjetas midan igual. */
    display: -webkit-box;
    -webkit-line-clamp: 7;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* ---------- PESTAÑAS ----------
     El estado activo cuelga de aria-selected, no de una clase suelta:
     así el marcado accesible y lo que se ve no se pueden desincronizar. */
  .pestana {
    padding: 14px 32px;
    border-radius: 9999px;
    border: 1px solid #e2e8f0;
    background: transparent;
    color: #64748b;
    font-size: 10px;
    letter-spacing: .32em;
    text-transform: uppercase;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    transition: background-color .4s ease, border-color .4s ease, color .4s ease;
  }
  .pestana:hover { border-color: #0f172a; color: #0f172a; }
  .pestana[aria-selected="true"] { background: #A3704C; border-color: #A3704C; color: #fff; }
  .pestana:focus-visible { outline: 2px solid #0f172a; outline-offset: 3px; }

  /* ---------- FAQ ---------- */
  .faq summary { list-style: none; cursor: pointer; }
  .faq summary::-webkit-details-marker { display: none; }
  .faq details[open] .faq-chevron { transform: rotate(180deg); }
  .faq .faq-chevron { transition: transform .35s cubic-bezier(.22,1,.36,1); }
  .faq details[open] summary .faq-q { color: #A3704C; }

  .skip-link { position: absolute; left: -9999px; }
  .skip-link:focus { left: 1rem; top: 1rem; z-index: 100; background: #0f172a; color: #fff; padding: .75rem 1.25rem; border-radius: 9999px; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; }