/* Servicios y Ubicación — lo propio de esas dos páginas. Lo común (barra,
   pie, colores, .reveal) está en base.css. */

/* ── Header de página interna (Servicios, y las que sigan) ────────────────
   Calco del <div className="relative h-64 md:h-80"> de Servicios.tsx: foto +
   velo verde + título. catalogo.html no lo usa (tiene su propio hero grande
   en la home real); esto es para las páginas "de adentro". */
.pagehero { position: relative; height: 16rem; overflow: hidden; }
@media (min-width: 768px) { .pagehero { height: 20rem; } }
.pagehero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pagehero-velo { position: absolute; inset: 0; background: rgba(30,122,62,.65); }
.pagehero-texto {
  position: relative; z-index: 1; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 1.25rem;
  opacity: 0; transform: translateY(20px); animation: pageheroIn .7s ease forwards;
}
@keyframes pageheroIn { to { opacity: 1; transform: translateY(0); } }
.pagehero-eyebrow { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--amarillo); margin: 0 0 .5rem; }
.pagehero-tit { font-size: 2.25rem; font-weight: 800; color: #fff; margin: 0; }
@media (min-width: 768px) { .pagehero-tit { font-size: 3.75rem; } }

/* ── Servicios ──────────────────────────────────────────────────────────── */
.servicios-intro { max-width: 640px; margin: 0 auto; padding: 4.5rem 1.5rem 0; text-align: center; }
.servicios-eyebrow { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--amarillo); margin: 0 0 .6rem; }
.servicios-h2 { font-size: 1.875rem; font-weight: 800; color: var(--verde); margin: 0 0 1rem; }
@media (min-width: 768px) { .servicios-h2 { font-size: 2.25rem; } }
.servicios-lead { font-size: 1rem; line-height: 1.6; color: var(--tinta-2); margin: 0; }

.servicios-fila {
  max-width: 1000px; margin: 3.5rem auto 0; padding: 0 1.5rem;
  display: flex; flex-direction: column; align-items: center; gap: 2rem;
}
@media (min-width: 768px) { .servicios-fila { flex-direction: row; gap: 3rem; } }
.servicios-fila-inv { flex-direction: column-reverse; }
@media (min-width: 768px) { .servicios-fila-inv { flex-direction: row-reverse; } }
.servicios-img { flex: 1; width: 100%; max-width: 340px; object-fit: contain; filter: drop-shadow(0 10px 24px rgba(0,0,0,.15)); }
.servicios-texto { flex: 1; text-align: center; }
@media (min-width: 768px) { .servicios-texto { text-align: left; } }
.servicios-h3 { font-size: 1.5rem; font-weight: 800; color: var(--verde); margin: 0 0 .8rem; }
@media (min-width: 768px) { .servicios-h3 { font-size: 1.875rem; } }
.servicios-p { font-size: 1rem; line-height: 1.6; color: var(--tinta-2); margin: 0 0 1rem; }
.servicios-dato { display: flex; align-items: center; justify-content: center; gap: .5rem; font-size: .85rem; color: var(--tinta-2); }
@media (min-width: 768px) { .servicios-dato { justify-content: flex-start; } }
.servicios-dato svg { width: 15px; height: 15px; flex: none; fill: none; stroke: var(--verde); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Franja oscura de "Puerta a Puerta": mismo verde que el pie, para separarla
   visualmente de las otras dos filas (blancas). Coreografía calcada de
   PuertaAPuertaSection (Framer Motion): el camión cruza toda la pantalla
   (2.2s linear), recién ahí aparece el título (.55s), recién ahí el
   contenido (.65s) -- disparada por bindPuertaAnimacion() en servicios.js,
   que va sumando las clases anim-camion/anim-titulo/anim-contenido. */
.servicios-puerta { background: var(--verde); padding: 3.5rem 0 4rem; margin-top: 4rem; overflow: hidden; }
.servicios-puerta-camion-wrap {
  position: relative; height: 4rem; margin-bottom: 2.5rem;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.servicios-puerta-camion { position: absolute; left: -110vw; opacity: 1; }
.servicios-puerta.anim-camion .servicios-puerta-camion { animation: puertaCamionCruza 2.2s linear forwards; }
@keyframes puertaCamionCruza { to { left: 110vw; } }
.servicios-puerta-camion svg { width: 44px; height: 44px; fill: none; stroke: var(--amarillo); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.servicios-puerta-tit {
  position: relative; margin: 0; text-align: center;
  color: rgba(255,255,255,.9); font-size: 1.1rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em;
  opacity: 0; transform: translateY(16px); transition: opacity .55s ease-out, transform .55s ease-out;
}
@media (min-width: 768px) { .servicios-puerta-tit { font-size: 1.4rem; } }
.servicios-puerta.anim-titulo .servicios-puerta-tit { opacity: 1; transform: translateY(0); }
.servicios-puerta-contenido {
  opacity: 0; transform: translateY(50px); transition: opacity .65s ease-out, transform .65s ease-out;
}
.servicios-puerta.anim-contenido .servicios-puerta-contenido { opacity: 1; transform: translateY(0); }
.servicios-puerta .servicios-h3 { color: #fff; }
.servicios-puerta .servicios-p { color: rgba(255,255,255,.75); }
.servicios-puerta .servicios-dato { color: var(--amarillo); font-weight: 700; text-transform: uppercase; font-size: .78rem; letter-spacing: .08em; }
.servicios-puerta .servicios-dato svg { stroke: var(--amarillo); }
.servicios-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-bottom: 1.2rem; }
@media (min-width: 768px) { .servicios-chips { justify-content: flex-start; } }
.servicios-chips span {
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); color: #fff;
  font-size: .72rem; font-weight: 700; padding: .4em 1em; border-radius: 99px;
}

.servicios-fila-clara { padding-bottom: 4.5rem; }

/* ── Ubicación ──────────────────────────────────────────────────────────── */
/* Calco de UbicacionContent.tsx: mapa + tarjeta de datos + zonas de entrega. */
.ubicacion { padding: 4.5rem 1.75rem 5rem; max-width: 1100px; margin: 0 auto; }
.ubicacion-eyebrow { text-align: center; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--amarillo); margin: 0 0 .5rem; }
.ubicacion-h2 { text-align: center; font-size: 1.875rem; font-weight: 800; color: var(--verde); margin: 0 0 2.4rem; }
@media (min-width: 768px) { .ubicacion-h2 { font-size: 2.25rem; } }
.ubicacion-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.2rem; align-items: start; }
.ubicacion-mapa { width: 100%; height: 380px; border: 0; border-radius: var(--radio); box-shadow: var(--sombra-alta); }
.ubicacion-card {
  background: var(--verde-suave); border: 1px solid rgba(30,122,62,.12); border-radius: var(--radio);
  padding: 1.4rem; display: flex; flex-direction: column; gap: 1.1rem; margin-bottom: 1.4rem;
}
.ubicacion-dato { display: flex; align-items: flex-start; gap: .75rem; }
.ubicacion-dato svg { width: 18px; height: 18px; flex: none; margin-top: .1rem; fill: none; stroke: var(--verde); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ubicacion-dato strong { display: block; font-size: .85rem; font-weight: 800; color: var(--verde); }
.ubicacion-dato span { font-size: .85rem; color: var(--tinta-2); }
.ubicacion-zonas-label { display: block; font-size: .78rem; font-weight: 800; color: var(--verde); text-transform: uppercase; letter-spacing: .1em; margin-bottom: .7rem; }
.ubicacion-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.6rem; }
.ubicacion-chips span { background: var(--amarillo-suave); color: var(--verde); font-size: .74rem; font-weight: 700; padding: .4em 1em; border-radius: 99px; }
.ubicacion-cta {
  display: inline-flex; align-items: center; gap: .5rem; text-decoration: none;
  background: var(--amarillo); color: var(--verde-hondo); font-weight: 800; font-size: .82rem;
  padding: .75em 1.4em; border-radius: 99px; transition: opacity .2s ease;
}
.ubicacion-cta:hover { opacity: .88; }
.ubicacion-cta svg { width: 16px; height: 16px; fill: none; stroke: var(--verde-hondo); stroke-width: 2.2; }
@media (max-width: 768px) {
  .ubicacion-grid { grid-template-columns: 1fr; }
  .ubicacion-mapa { height: 280px; }
}


/* Estilo nuevo: título en la condensada itálica + línea amarilla abajo. */
.pagehero { border-bottom: 5px solid var(--amarillo); }
.pagehero-eyebrow { font-weight: 800; letter-spacing: .14em; color: var(--amarillo); }
.pagehero-tit {
  font-family: var(--fuente-titular); font-weight: 800; font-style: italic;
  text-transform: uppercase; letter-spacing: .04em; line-height: .95;
  text-shadow: 4px 4px 0 var(--verde-hondo);
}
.servicios-h2, .servicios-h3, .ubicacion-h2 {
  font-family: var(--fuente-titular); font-weight: 800; font-style: italic;
  text-transform: uppercase; letter-spacing: .04em; line-height: 1;
}
.ubicacion-cta {
  font-family: var(--fuente-titular); font-weight: 800; font-size: 1.05rem; letter-spacing: .05em;
  box-shadow: 0 3px 0 var(--verde-hondo);
}
/* La condensada a igual tamaño se ve más chica: un escalón más grande. */
.pagehero-tit { font-size: 3rem; }
.servicios-h2, .ubicacion-h2 { font-size: 2.4rem; }
.servicios-h3 { font-size: 2rem; }
@media (min-width: 768px) {
  .pagehero-tit { font-size: 5rem; }
  .servicios-h2, .ubicacion-h2 { font-size: 3rem; }
  .servicios-h3 { font-size: 2.5rem; }
}