/* LAGO Express — colores y tipografía del manual de marca (sep. 2026) */
:root {
  --azul: #215091;
  --naranja: #F39304;
  --indigo: #2D348A;
  --blanco: #FFFFFF;
  --gris: #7A808A;
  --tinta: #1F2A44;            /* texto corrido: azul muy oscuro, nunca negro puro */
  --tinte: #F1F4F9;            /* Azul LAGO al 6 % sobre blanco */
  --linea: #D5DDEA;
  --radio: 10px;
  --ancho: 1080px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--tinta);
  background: var(--blanco);
  -webkit-font-smoothing: antialiased;
  padding-bottom: 4.5rem;      /* espacio para el botón fijo en móvil */
}

img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { margin: 0; line-height: 1.15; text-wrap: balance; }
p { margin: 0; }

a { color: var(--azul); text-underline-offset: 3px; }
a:focus-visible { outline: 3px solid var(--naranja); outline-offset: 3px; border-radius: 4px; }

.contenedor { width: 100%; max-width: var(--ancho); margin: 0 auto; padding-inline: 1rem; }

/* Barra superior */
.barra { background: var(--blanco); border-bottom: 1px solid var(--linea); }
.barra__fila { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: .75rem; padding-bottom: .75rem; }
.barra__marca img { width: 112px; }
.barra__wa { font-weight: 600; font-size: .875rem; text-decoration: none; color: var(--azul); }
.barra__wa:hover { text-decoration: underline; }

/* Portada */
.portada { background: var(--azul); color: var(--blanco); padding: 2.5rem 0 3rem; }
.portada__rejilla { display: grid; gap: 2.5rem; }
.portada h1 { font-size: clamp(2rem, 7.5vw, 3.4rem); font-weight: 800; letter-spacing: -0.02em; max-width: 14ch; }
.portada__bajada { margin-top: 1rem; font-size: 1.0625rem; max-width: 38ch; color: rgba(255,255,255,.9); }
.portada__acciones { margin-top: 1.75rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.enlace-claro { color: var(--blanco); font-weight: 600; }

.boton {
  display: inline-block;
  font: inherit; font-weight: 600;
  padding: .85rem 1.4rem;
  border-radius: 999px;
  text-decoration: none;
  text-align: center;
}
.boton--naranja { background: var(--naranja); color: var(--indigo); }
.boton--naranja:hover { background: #FFA41F; }
.boton:focus-visible { outline-color: var(--blanco); }

/* La etiqueta de tarifas: el elemento propio de la página */
.etiqueta {
  position: relative;
  background: var(--blanco);
  color: var(--tinta);
  border-radius: var(--radio);
  overflow: hidden;
  max-width: 440px;
  box-shadow: 0 18px 40px rgba(16, 32, 70, .35);
}
.etiqueta__banda {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  background: var(--indigo); color: var(--blanco);
  padding: .8rem 1.25rem;
}
.etiqueta__banda h2 { font-size: 1rem; font-weight: 600; }
.etiqueta__banda span { font-size: .8125rem; color: rgba(255,255,255,.8); }

.etiqueta__tarifas { margin: 0; padding: .25rem 1.25rem; }
.etiqueta__fila {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1rem 0;
}
.etiqueta__fila + .etiqueta__fila { border-top: 2px dashed var(--linea); }
.etiqueta__fila dt { display: flex; align-items: center; gap: .75rem; font-weight: 600; font-size: 1.0625rem; color: var(--azul); }
.etiqueta__fila dd { margin: 0; text-align: right; line-height: 1; }
.etiqueta__precio { display: block; font-size: clamp(2.25rem, 10vw, 2.9rem); font-weight: 800; color: var(--indigo); letter-spacing: -0.02em; }
.etiqueta__unidad { display: block; margin-top: .35rem; font-size: .8125rem; color: var(--gris); }

.etiqueta__incluye {
  margin: 0 1.25rem; padding: .9rem 0 1rem;
  border-top: 2px solid var(--azul);
  font-size: .875rem;
}
.etiqueta__codigo {
  height: 30px; margin: 0 1.25rem 1.1rem;
  background: repeating-linear-gradient(90deg,
    var(--tinta) 0 2px, transparent 2px 5px,
    var(--tinta) 5px 6px, transparent 6px 9px,
    var(--tinta) 9px 12px, transparent 12px 14px,
    var(--tinta) 14px 15px, transparent 15px 19px);
  opacity: .85;
}

/* Secciones */
.seccion { padding: 3.5rem 0; }
.seccion--tinte { background: var(--tinte); }
.titulo { font-size: clamp(1.6rem, 5vw, 2.1rem); font-weight: 800; color: var(--indigo); letter-spacing: -0.01em; }
.nota { margin-top: 1rem; color: var(--gris); max-width: 52ch; }

/* Pasos: sí son una secuencia, por eso van numerados */
.pasos { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 2rem; counter-reset: paso; }
.paso { counter-increment: paso; position: relative; padding-left: 4.25rem; }
.paso img { position: absolute; left: 0; top: 0; width: 52px; }
.paso h3 { font-size: 1.125rem; font-weight: 600; color: var(--azul); }
.paso h3::before { content: counter(paso) ". "; color: var(--naranja); font-weight: 800; }
.paso p { margin-top: .35rem; max-width: 46ch; }

/* Detalles del precio */
.dos-columnas { display: grid; gap: 2rem; }
.detalles { list-style: none; margin: 0; padding: 0; }
.detalles li { padding: 1.1rem 0; border-top: 1px solid var(--linea); }
.detalles li:last-child { border-bottom: 1px solid var(--linea); }
.detalles h3 { font-size: 1rem; font-weight: 600; color: var(--azul); }
.detalles p { margin-top: .25rem; }

/* Tiempos */
.tiempos { margin-top: 2rem; display: grid; gap: 1.25rem; }
.tiempo { border: 2px solid var(--linea); border-radius: var(--radio); padding: 1.25rem 1.25rem 1.25rem 5.25rem; position: relative; }
.tiempo img { position: absolute; left: 1.25rem; top: 1.25rem; width: 48px; }
.tiempo h3 { font-size: 1rem; font-weight: 600; color: var(--azul); }
.tiempo__dias { font-size: 1.75rem; font-weight: 800; color: var(--indigo); line-height: 1.2; }

/* Oficina */
.direccion { margin-top: 1rem; font-size: 1.125rem; max-width: 34ch; }
.horario { margin: 0; }
.horario div { display: flex; justify-content: space-between; gap: 1rem; padding: .8rem 0; border-top: 1px solid var(--linea); }
.horario div:last-child { border-bottom: 1px solid var(--linea); }
.horario dt { font-weight: 600; }
.horario dd { margin: 0; text-align: right; }

/* Cierre */
.cierre { background: var(--azul); color: var(--blanco); padding: 3rem 0; }
.cierre__fila { display: grid; gap: 1.5rem; justify-items: start; }
.cierre h2 { font-size: clamp(1.5rem, 5vw, 2rem); font-weight: 800; max-width: 24ch; }

/* Pie */
.pie { background: var(--indigo); color: rgba(255,255,255,.85); padding: 2.5rem 0 3rem; font-size: .9375rem; }
.pie__rejilla { display: grid; gap: 1.5rem; }
.pie img { width: 130px; }
.pie__contacto { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.pie a { color: var(--blanco); }
.pie__legal { font-size: .8125rem; color: rgba(255,255,255,.7); }

/* Botón fijo de WhatsApp (solo móvil) */
.wa-fijo {
  position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 10;
  background: var(--naranja); color: var(--indigo);
  font-weight: 600; text-align: center; text-decoration: none;
  padding: .85rem 1rem; border-radius: 999px;
  box-shadow: 0 6px 18px rgba(16, 32, 70, .3);
}

@media (min-width: 760px) {
  body { padding-bottom: 0; }
  .wa-fijo { display: none; }
  .contenedor { padding-inline: 2rem; }
  .barra__marca img { width: 140px; }
  .portada { padding: 4.5rem 0 5rem; }
  .portada__rejilla { grid-template-columns: 1.15fr 1fr; align-items: center; gap: 3rem; }
  .etiqueta { justify-self: end; width: 100%; transform: rotate(1.5deg); }
  .pasos { grid-template-columns: repeat(2, 1fr); gap: 2.5rem 3rem; }
  .dos-columnas { grid-template-columns: 1fr 1.3fr; gap: 3rem; }
  .tiempos { grid-template-columns: repeat(2, 1fr); }
  .seccion { padding: 5rem 0; }
  .cierre__fila { grid-template-columns: 1fr auto; align-items: center; }
  .pie__rejilla { grid-template-columns: auto 1fr; align-items: start; gap: 1rem 3rem; }
  .pie__legal { grid-column: 1 / -1; padding-top: 1.25rem; border-top: 1px solid rgba(255,255,255,.15); }
}

@media (min-width: 1000px) {
  .pasos { grid-template-columns: repeat(4, 1fr); }
  .paso { padding-left: 0; }
  .paso img { position: static; margin-bottom: 1rem; }
}