/* ============================================================
   COPIAS MONTERO — Collado Villalba
   Web genuina. No comparte maqueta con Sofía, Il Tizzone ni Espada.

   El sistema de color sale del propio oficio: las cuatro tintas de imprenta
   (cian, magenta, amarillo y negro). Cada servicio lleva la suya, y el
   separador entre secciones es una barra de control de color, como la que
   sale al margen de una prueba de impresión. Eso no lo tiene ninguna otra
   web de Villalba porque no le pertenece a nadie más.

   El azul dominante es el de SU logotipo.
   ============================================================ */

/* Quicksand: geométrica redondeada, la más cercana a la de su logotipo y su
   tarjeta. Distinta de las tres anteriores (Hanken, Didact, Barlow). */
@font-face {
  font-family: 'Quicksand';
  src: url('fonts/quicksand.woff2') format('woff2');
  font-weight: 300 700;
  font-display: swap;
}

:root {
  /* ---------- CLARO, de papel (por defecto) ---------- */
  --papel: #f8f7f4;
  --papel2: #ffffff;
  --tinta: #16233d;
  --gris: #6f7484;
  --azul: #1e4d8c;        /* EL de su logotipo */
  --azul-vivo: #2a63ad;
  --linea: rgba(22, 35, 61, 0.14);
  --sombra: rgba(30, 77, 140, 0.18);

  /* Las cuatro tintas */
  --cian: #00a0d2;
  --magenta: #d4006e;
  --amarillo: #f2b705;
  --negro: #1a1a1a;

  --texto: 'Quicksand', system-ui, -apple-system, sans-serif;
  --ancho: 1280px;
}

/* ---------- OSCURO ---------- */
[data-tema="oscuro"] {
  --papel: #131722;
  --papel2: #1b2130;
  --tinta: #eef1f6;
  --gris: #9aa2b4;
  --azul: #4b8ede;
  --azul-vivo: #6ba5ef;
  --linea: rgba(238, 241, 246, 0.14);
  --sombra: rgba(0, 0, 0, 0.6);
  --cian: #3fc4ec;
  --magenta: #f04f9a;
  --amarillo: #ffd23f;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--magenta); outline-offset: 3px; }

.envoltura { width: min(100% - 2.4rem, var(--ancho)); margin-inline: auto; }

h1, h2, h3 {
  font-family: var(--texto);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.018em;
  margin: 0;
}
h2 { font-size: clamp(2rem, 4.4vw, 3.4rem); margin-bottom: 1.1rem; }
p { margin: 0 0 1rem; }
.guia { color: var(--gris); font-size: 1.05rem; max-width: 50ch; }

/* ============================================================
   LA BARRA DE CONTROL DE COLOR — el elemento firma
   Es la tira de parches que sale al margen de una prueba de imprenta para
   comprobar que las tintas entran bien. Aquí separa las secciones.
   ============================================================ */
.tira {
  display: flex;
  height: 8px;
}
.tira span { flex: 1; }
.tira span:nth-child(1) { background: var(--cian); }
.tira span:nth-child(2) { background: var(--magenta); }
.tira span:nth-child(3) { background: var(--amarillo); }
.tira span:nth-child(4) { background: var(--negro); }
[data-tema="oscuro"] .tira span:nth-child(4) { background: var(--tinta); }

.rotulo {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--azul);
  margin: 0 0 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
/* Cuatro puntitos de tinta delante del rótulo */
.rotulo::before {
  content: '';
  width: 34px; height: 8px; flex: none;
  background:
    radial-gradient(circle at 12.5% 50%, var(--cian) 45%, transparent 46%),
    radial-gradient(circle at 37.5% 50%, var(--magenta) 45%, transparent 46%),
    radial-gradient(circle at 62.5% 50%, var(--amarillo) 45%, transparent 46%),
    radial-gradient(circle at 87.5% 50%, var(--azul) 45%, transparent 46%);
}

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 50px;
  padding: 0 1.7rem;
  border: 2px solid var(--azul);
  border-radius: 999px;
  background: var(--azul);
  color: #fff;
  font-family: var(--texto);
  font-size: 0.92rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  white-space: nowrap;
}
.boton:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -10px var(--sombra); }
.boton--hueco { background: transparent; color: var(--tinta); border-color: var(--linea); }
.boton--hueco:hover { border-color: var(--azul); box-shadow: none; }

/* ============================================================
   CABECERA
   ============================================================ */
.cabecera {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.2rem;
  padding: 0.7rem clamp(1rem, 3vw, 2.2rem);
  background: color-mix(in srgb, var(--papel) 94%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease;
}
.cabecera--fija { border-bottom-color: var(--linea); }
.marca { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; }
.marca img { width: 50px; height: 50px; border-radius: 50%; }
.marca__txt { display: flex; flex-direction: column; line-height: 1.12; }
.marca__txt b { font-size: 1.06rem; font-weight: 700; }
.marca__txt span { font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gris); }
.cabecera__der { display: flex; align-items: center; gap: 0.55rem; }
.tema {
  display: grid; place-items: center;
  width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--linea); border-radius: 50%;
  background: transparent; color: var(--tinta); cursor: pointer;
  transition: border-color 0.2s ease;
}
.tema:hover { border-color: var(--azul); }
.tema svg { width: 18px; height: 18px; }
.tema__sol { display: none; }
[data-tema="oscuro"] .tema__sol { display: block; }
[data-tema="oscuro"] .tema__luna { display: none; }

/* ============================================================
   PORTADA
   ============================================================ */
.portada { padding-block: clamp(2.6rem, 6vw, 4.6rem) clamp(2rem, 4vw, 3.4rem); }
.portada__rejilla { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.portada h1 { font-size: clamp(2.5rem, 5.6vw, 4.6rem); margin-bottom: 1.1rem; }
.portada h1 em { font-style: normal; color: var(--azul); }
.portada__bajada { color: var(--gris); font-size: clamp(1.02rem, 1.3vw, 1.16rem); max-width: 44ch; margin-bottom: 1.8rem; }
.portada__acciones { display: flex; gap: 0.7rem; flex-wrap: wrap; }
.portada__foto {
  /* Sin proporción fija la foto es casi cuadrada, se hace altísima en su
     columna y empuja el titular fuera de la primera pantalla. */
  aspect-ratio: 4 / 3;
  border-radius: 6px; overflow: hidden;
  box-shadow: 0 24px 60px -30px var(--sombra);
  border: 1px solid var(--linea);
}
.portada__foto img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 940px) { .portada__rejilla { grid-template-columns: 1fr; } }

/* ============================================================
   FRANJA DE DATOS
   ============================================================ */
.franja { background: var(--azul); color: #fff; }
.franja__rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1px; background: rgba(255,255,255,.22); }
.dato { background: var(--azul); padding: 1.6rem 1.4rem; display: flex; flex-direction: column; gap: 0.15rem; }
.dato b { font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 700; line-height: 1; }
.dato span { font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.86; }
.dato .estrellas { letter-spacing: 2px; font-size: 0.9rem; color: var(--amarillo); opacity: 1; }

/* ============================================================
   SERVICIOS — cada uno con su tinta
   ============================================================ */
.servicios { padding-block: clamp(3.2rem, 7vw, 5.4rem); }
.tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); gap: 1.2rem; margin-top: 2.2rem; }
.tarjeta {
  position: relative;
  background: var(--papel2);
  border: 1px solid var(--linea);
  border-radius: 6px;
  padding: 1.8rem 1.6rem 1.6rem;
  display: flex; flex-direction: column; gap: 0.6rem;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  overflow: hidden;
}
.tarjeta:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -24px var(--sombra); }
/* La franja de tinta del servicio, arriba */
.tarjeta::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 5px; background: var(--t); }
.tarjeta--cian { --t: var(--cian); }
.tarjeta--magenta { --t: var(--magenta); }
.tarjeta--amarillo { --t: var(--amarillo); }
.tarjeta h3 { font-size: 1.4rem; }
.tarjeta p { font-size: 0.95rem; color: var(--gris); margin: 0; }

/* ============================================================
   ENVIAR EL ARCHIVO — el objeto útil
   ============================================================ */
.enviar { background: var(--papel2); border-block: 1px solid var(--linea); padding-block: clamp(3rem, 6vw, 4.6rem); }
.enviar__rejilla { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (max-width: 940px) { .enviar__rejilla { grid-template-columns: 1fr; } }
.pasos { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; counter-reset: n; }
.pasos li { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; }
.pasos li::before {
  counter-increment: n; content: counter(n);
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 700; font-size: 0.9rem; color: #fff;
  background: var(--azul); flex: none;
}
.pasos li:nth-child(1)::before { background: var(--cian); }
.pasos li:nth-child(2)::before { background: var(--magenta); }
.pasos li:nth-child(3)::before { background: var(--amarillo); color: var(--negro); }
.pasos b { display: block; }
.pasos span { color: var(--gris); font-size: 0.95rem; }
.correo {
  display: inline-flex; align-items: center; gap: 0.6rem;
  margin-top: 1.4rem; padding: 0.9rem 1.4rem;
  border: 2px dashed var(--linea); border-radius: 6px;
  font-weight: 700; text-decoration: none; word-break: break-all;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.correo:hover { border-color: var(--azul); color: var(--azul); }

/* ============================================================
   VISITA
   ============================================================ */
.visita { padding-block: clamp(3.2rem, 7vw, 5.4rem); }
.visita__rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); }
@media (max-width: 940px) { .visita__rejilla { grid-template-columns: 1fr; } }
.horario { border-collapse: collapse; width: 100%; max-width: 26rem; margin-top: 1.4rem; }
.horario th { text-align: left; font-weight: 500; padding: 0.5rem 0; border-bottom: 1px solid var(--linea); }
.horario td { text-align: right; padding: 0.5rem 0; border-bottom: 1px solid var(--linea); font-weight: 700; font-variant-numeric: tabular-nums; }
.horario tr.cerrado th, .horario tr.cerrado td { color: var(--gris); font-weight: 500; }
.ficha { display: grid; gap: 1.1rem; margin: 1.6rem 0 0; }
.ficha > div { padding-bottom: 1.1rem; border-bottom: 1px solid var(--linea); }
.ficha dt { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gris); margin-bottom: 0.2rem; }
.ficha dd { margin: 0; font-size: 1.1rem; }
.ficha dd a { text-decoration: none; border-bottom: 2px solid var(--linea); }
.ficha dd a:hover { border-color: var(--azul); color: var(--azul); }
.mapa { min-height: 340px; border: 1px solid var(--linea); border-radius: 6px; overflow: hidden; background: var(--papel2); }
.mapa iframe { width: 100%; height: 100%; min-height: 340px; border: 0; }
.mapa__aviso {
  width: 100%; min-height: 340px; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.5rem; padding: 2rem; border: 0; background: var(--papel2);
  font-family: var(--texto); font-size: 0.9rem; color: var(--gris);
  text-align: center; cursor: pointer; transition: background 0.25s ease;
}
.mapa__aviso:hover { background: var(--papel); }
.mapa__aviso b { font-size: 1.2rem; font-weight: 700; color: var(--tinta); }
.mapa__aviso svg { width: 28px; height: 28px; color: var(--magenta); }

/* ============================================================
   CIERRE Y PIE
   ============================================================ */
.cierre { background: var(--azul); color: #fff; padding-block: clamp(3rem, 6vw, 4.6rem); text-align: center; }
.cierre h2 { max-width: 20ch; margin-inline: auto; }
.cierre .guia { color: rgba(255,255,255,.8); margin: 1rem auto 1.8rem; }
.cierre .boton { background: #fff; color: var(--azul); border-color: #fff; }
.cierre .boton--hueco { background: transparent; color: #fff; border-color: rgba(255,255,255,.45); }
.cierre__acciones { display: flex; gap: 0.7rem; justify-content: center; flex-wrap: wrap; }

.pie { padding-block: 2.2rem 1.6rem; }
.pie__rejilla { display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap; align-items: center; }
.pie__legal { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.pie__legal a { font-size: 0.84rem; color: var(--gris); text-decoration: none; display: inline-flex; align-items: center; min-height: 24px; }
.pie__legal a:hover { color: var(--azul); }
.pie__nota { margin: 1.6rem 0 0; padding-top: 1.2rem; border-top: 1px solid var(--linea); font-size: 0.82rem; color: var(--gris); }

.llamar {
  position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 70;
  display: grid; place-items: center;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--azul); color: #fff;
  box-shadow: 0 10px 26px -8px var(--sombra);
  transition: transform 0.2s ease;
}
.llamar:hover { transform: scale(1.06); }
.llamar svg { width: 25px; height: 25px; }

.revela { opacity: 0; transform: translateY(20px); transition: opacity 0.65s cubic-bezier(0.22,1,0.36,1), transform 0.65s cubic-bezier(0.22,1,0.36,1); }
.revela.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .revela { opacity: 1; transform: none; transition: none; }
  .boton:hover, .llamar:hover, .tarjeta:hover { transform: none; }
}

@media (max-width: 720px) {
  .cabecera { padding: 0.6rem 0.9rem; }
  .marca img { width: 42px; height: 42px; }
  .marca__txt span { font-size: 0.76rem; letter-spacing: 0.13em; }
  .rotulo { font-size: 0.78rem; }
  .dato span, .ficha dt, .pie__legal a, .pie__nota { font-size: 0.84rem; }
  .tarjeta p, .pasos span { font-size: 0.98rem; }
}


/* El bajo-logotipo y los rótulos bajaban de 12 px en pantallas estrechas. */
@media (max-width: 720px) {
  .marca__txt span { font-size: 0.76rem; letter-spacing: 0.12em; }
  .dato .estrellas { font-size: 0.95rem; }
}