/* ===== Colores y medidas (variables) ===== */
:root {
  --marfil: #FAF8F3;
  --blanco: #FFFFFF;
  --arena: #E6DCCB;
  --tinta: #1C1A17;
  --texto-2: #4A443E;
  --dorado-oscuro: #7D5F2F;
  --dorado: #B08D57;
  --etiqueta-fondo: #F2EDE4;
  --texto-sobre-tinta: #D6CFC2;
  --etiqueta-fondo-0: rgba(242, 237, 228, 0); /* mismo color que --etiqueta-fondo, transparente */
  --velo: rgba(28, 26, 23, .55); /* fondo oscuro detrás del menú */
  /* borde de botones y campos: 3,2:1 sobre marfil y 3,4:1 sobre blanco (mínimo WCAG 3:1) */
  --borde-control: #968A77;

  --ancho-max: 720px;
  --alto-encabezado: 76px;
  --radio-caja: 20px;
  --radio-campo: 14px;
  --margen: 24px;

  /* marca de agua de fondo: sube o baja este número para verla más o menos (0 = invisible) */
  --marca-agua-opacidad: .05;
}

/* ===== Base ===== */
*, *::before, *::after { box-sizing: border-box; }

html {
  /* el marfil va en <html> para que la marca de agua (z-index 0) quede encima de él y debajo del contenido (z-index 1) */
  background: var(--marfil);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* la barra fija no debe tapar lo que recibe el foco con el teclado */
  scroll-padding-bottom: 110px;
}

/* Desplazamiento suave solo si la persona no pidió menos movimiento */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: transparent; /* el fondo marfil está en <html> */
  color: var(--tinta);
  font-family: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-size: 1.125rem;
  line-height: 1.6;
  overflow-x: hidden;
  overflow-wrap: break-word;
  overflow-wrap: anywhere; /* con texto muy grande, una palabra larga se parte en vez de salirse */
}

h1, h2, h3, h4, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }

a { color: inherit; }

[hidden] { display: none !important; }

.ico {
  display: block;
  flex: none;
  width: 24px;
  height: 24px;
}

/* Enlace para saltar al contenido: invisible hasta que recibe el foco con el teclado */
.saltar {
  position: absolute;
  left: 16px;
  top: 0;
  transform: translateY(-200%);
  z-index: 100;
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 20px;
  border-radius: 999px;
  background: var(--tinta);
  color: var(--marfil);
  font-weight: 700;
  text-decoration: none;
}
.saltar:focus { transform: translateY(12px); }
main:focus { outline: none; }

/* Contenido por encima de la marca de agua (capa propia con z-index 0) */
main,
.pie {
  position: relative;
  z-index: 1;
}

/* Foco visible para teclado */
:focus-visible {
  outline: 3px solid var(--tinta);
  outline-offset: 3px;
  border-radius: 6px;
}
.pymes :focus-visible { outline-color: var(--marfil); }

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

/* ===== Encabezado ===== */
.encabezado {
  /* en celular el encabezado se va con el scroll; fijo desde 768 px.
     relative + z-index lo ponen por encima de la marca de agua (z-index 0) y por debajo de barra (30), fondo (60), menú (70) y bienvenida (1000) */
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  min-height: var(--alto-encabezado);
  background: transparent; /* en celular se ve la marca de agua; desde 768 px se vuelve marfil (ver más abajo) */
  border-bottom: 1px solid var(--arena);
}

.encabezado-interior {
  padding: 8px var(--margen);
  /* menú a la izquierda y la marca en el centro exacto del encabezado
     (las dos columnas de los lados miden lo mismo) */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
}
.encabezado-interior .menu-boton { grid-column: 1; justify-self: start; }
.encabezado-interior .marca { grid-column: 2; justify-self: center; }

/* Botón del menú: sin JavaScript no se muestra (no podría abrir nada) */
.menu-boton {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  flex: none;
  min-width: 48px;
  min-height: 48px;
  margin-left: -6px; /* el ícono queda alineado con el margen del contenido */
  padding: 2px 6px;
  border: 0;
  border-radius: var(--radio-campo);
  background: transparent;
  color: var(--tinta);
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.1;
  cursor: pointer;
}
.js .menu-boton { display: flex; }

.marca {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  text-decoration: none;
}

.mono {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
  font-size: 2.5rem; /* 40 px en celular */
  line-height: 1;
  color: var(--tinta);
}

.mono-linea {
  display: block;
  width: 2px;
  height: 0.8333em; /* sigue al tamaño del monograma */
  background: var(--dorado);
}

.marca-texto {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--texto-2);
}

/* ===== Secciones ===== */
.seccion {
  padding: 48px var(--margen);
  scroll-margin-top: 0; /* encabezado no fijo en celular */
}
/* la portada deja ver el encabezado al volver arriba */
.portada { scroll-margin-top: var(--alto-encabezado); }

.divisor {
  height: 0;
  margin: 0 var(--margen);
  border: 0;
  border-top: 1px solid var(--arena);
}

h2 {
  font-size: 1.875rem;
  line-height: 1.2;
  font-weight: 700;
  margin-bottom: 12px;
}

h3 {
  font-size: 1.375rem;
  line-height: 1.3;
  font-weight: 700;
}

.intro {
  color: var(--texto-2);
  margin-bottom: 24px;
}

/* ===== Botones ===== */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 60px;
  padding: 0 28px;
  border-radius: 999px;
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
}
.boton .ico { width: 26px; height: 26px; }

.boton-tinta {
  background: var(--tinta);
  color: var(--marfil);
}

.boton-dorado {
  background: var(--dorado);
  color: var(--tinta);
}

/* ===== Portada ===== */
.portada { padding-top: 48px; }

.sobretitulo {
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--dorado-oscuro);
  margin-bottom: 16px;
}

h1 {
  font-size: 2.5rem;
  line-height: 1.15;
  font-weight: 700;
  margin-bottom: 20px;
}

.portada-texto {
  font-size: 1.25rem;
  line-height: 1.55;
  color: var(--texto-2);
  margin-bottom: 32px;
}

/* ===== Cómo funciona ===== */
.pasos li {
  display: flex;
  gap: 16px;
  padding: 20px 0;
  border-top: 1px solid var(--arena);
}
.pasos li:first-child { border-top: 0; padding-top: 8px; }
.pasos li:last-child { padding-bottom: 0; }

.paso-num {
  flex: none;
  min-width: 40px;
  font-size: 1.5rem;
  line-height: 1.3;
  font-weight: 700;
  color: var(--dorado-oscuro);
}

.pasos p { color: var(--texto-2); margin-top: 4px; }

/* ===== Cajas (áreas y tarifas) ===== */
.caja {
  background: var(--blanco);
  border: 1px solid var(--arena);
  border-radius: var(--radio-caja);
  overflow: hidden;
}

/* ===== Áreas ===== */
.alternar {
  display: none;
  flex-wrap: wrap;
  gap: 10px;
  margin: 16px 0 20px;
}
.js .alternar { display: flex; }

.alternar-boton {
  flex: 1 1 auto;
  min-height: 52px;
  padding: 6px 16px;
  border: 2px solid var(--borde-control);
  border-radius: 999px;
  background: var(--blanco);
  color: var(--tinta);
  font: inherit;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.alternar-boton[aria-pressed="true"] {
  background: var(--tinta);
  border-color: var(--tinta);
  color: var(--marfil);
}

/* Sin JavaScript se ven los dos paneles (reemplaza al antiguo <noscript><style>) */
html:not(.js) .panel[hidden] { display: block !important; }
/* ...y se separan */
.panel + .panel { margin-top: 20px; }

.fila {
  padding: 24px;
  border-top: 1px solid var(--arena);
}
.fila:first-child { border-top: 0; }
.fila { scroll-margin-top: 16px; }

/* Resaltado breve al llegar desde el menú */
.fila.resaltada { animation: resaltar 1.5s ease-out; }
@keyframes resaltar {
  0%, 20% { background-color: var(--etiqueta-fondo); }
  100% { background-color: var(--etiqueta-fondo-0); }
}

.fila-cabeza {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.fila-icono {
  display: flex;
  color: var(--dorado-oscuro);
}
.fila-icono .ico { width: 36px; height: 36px; }

.etiqueta {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--etiqueta-fondo);
  color: var(--dorado-oscuro);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
}

.fila h3 { margin-bottom: 6px; }
.fila p { color: var(--texto-2); }

/* Empresas: ícono junto al título y filas más cortas */
.fila-empresa {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 14px;
  padding-block: 18px;
}
.fila-empresa > * { grid-column: 1 / -1; }
.fila-empresa > .fila-cabeza {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
}
.fila-empresa > h3 {
  grid-column: 2;
  grid-row: 1;
  margin-bottom: 4px;
}
.fila-empresa .fila-icono .ico {
  width: 30px;
  height: 30px;
  margin-top: -1px; /* alineado con la primera línea del título */
}
.fila-empresa .mas { margin-top: 8px; }
.fila-empresa .consultar { margin-top: 2px; }

/* Botón "Ver lo que incluye": sin JavaScript no se muestra y las listas quedan visibles */
.mas {
  display: none;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin-top: 12px;
  padding: 4px 16px;
  border: 2px solid var(--borde-control);
  border-radius: 999px;
  background: var(--blanco);
  color: var(--dorado-oscuro);
  font: inherit;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
}
.js .mas { display: inline-flex; }
.mas .ico {
  width: 20px;
  height: 20px;
  transition: transform .25s ease;
}
.mas[aria-expanded="true"] .ico { transform: rotate(180deg); }

/* Lista que se despliega */
.incluye {
  display: grid;
  grid-template-rows: 1fr;
}
.incluye > ul {
  min-height: 0;
  overflow: hidden;
  padding-top: 14px;
}
.js .incluye {
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows .3s ease, visibility .3s;
}
.js .incluye.abierto {
  grid-template-rows: 1fr;
  visibility: visible;
}

.incluye li {
  position: relative;
  padding: 4px 0 4px 22px;
  color: var(--texto-2);
}
.incluye li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 16px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--dorado);
}

.consultar {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 8px;
  font-weight: 700;
  color: var(--dorado-oscuro);
}

/* ===== Tarifas ===== */
.grupo-titulo {
  padding: 24px 24px 8px;
  font-size: 1.25rem;
  color: var(--texto-2);
}
.grupo-titulo:not(:first-child) {
  border-top: 1px solid var(--arena);
}

.tarifa {
  padding: 16px 24px;
}
.tarifa + .tarifa { border-top: 1px solid var(--arena); }
.tarifa-destacada { background: var(--etiqueta-fondo); }

.tarifa-linea {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  column-gap: 16px;
  row-gap: 0;
}

.tarifa h4 {
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.35;
  font-weight: 700;
}

.precio {
  font-size: 1.25rem;
  line-height: 1.35;
  font-weight: 700;
  color: var(--dorado-oscuro);
}

.tarifa p { color: var(--texto-2); margin-top: 4px; }

.tarifas-boton {
  padding: 24px;
  border-top: 1px solid var(--arena);
}

/* ===== Para pymes ===== */
.pymes-externo {
  padding: 48px 16px;
}

.pymes {
  background: var(--tinta);
  color: var(--marfil);
  border-radius: var(--radio-caja);
  padding: 32px 24px;
}

.pymes-linea {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--dorado);
  margin-bottom: 12px;
}

.pymes h2 { color: var(--marfil); margin-bottom: 16px; }

.pymes-texto {
  color: var(--texto-sobre-tinta);
  margin-bottom: 24px;
}

.pymes-lista {
  display: grid;
  gap: 14px;
  margin-bottom: 32px;
}
.pymes-lista li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.pymes-lista .ico {
  width: 28px;
  height: 28px;
  margin-top: 1px;
  color: var(--dorado);
}

/* ===== Sobre mí ===== */
.sobre-cabeza {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}
.sobre-cabeza h2 { margin: 0; }

/* Foto de Damaris: círculo de 96 px, recortada al centro */
.foto {
  flex: none;
  display: block;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--arena); /* color de espera mientras carga la foto */
  object-fit: cover;
}

.linea {
  height: 0;
  margin: 24px 0;
  border: 0;
  border-top: 1px solid var(--arena);
}

.datos { display: grid; gap: 8px; }
.datos li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-height: 44px;
  padding: 6px 0;
}
.datos .ico {
  width: 28px;
  height: 28px;
  margin-top: 1px;
  color: var(--dorado-oscuro);
}

/* Botón secundario "Quiénes somos" (abre un PDF en otra pestaña) */
.boton-sobre {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  margin-top: 24px;
  padding: 6px 20px;
  border: 2px solid var(--borde-control);
  border-radius: 999px;
  background: var(--blanco);
  color: var(--tinta);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
}
.boton-sobre .ico { width: 24px; height: 24px; color: var(--dorado-oscuro); }
.boton-sobre .ico-externo { width: 22px; height: 22px; color: var(--tinta); }

/* ===== Preguntas ===== */
.preguntas { margin-top: 20px; }

.pregunta {
  padding: 20px 0;
  border-top: 1px solid var(--arena);
}
.pregunta:first-child { border-top: 0; padding-top: 0; }
.pregunta:last-child { padding-bottom: 0; }

.pregunta h3 { margin-bottom: 6px; }
.pregunta p { color: var(--texto-2); }

/* ===== Contacto ===== */
.campo { margin-bottom: 20px; }

.campo label {
  display: block;
  margin-bottom: 8px;
  font-weight: 700;
}

.select-envoltorio { position: relative; }

.select-envoltorio select {
  display: block;
  width: 100%;
  min-height: 58px;
  padding: 6px 52px 6px 18px;
  border: 2px solid var(--borde-control);
  border-radius: var(--radio-campo);
  background: var(--blanco);
  color: var(--tinta);
  font: inherit;
  font-size: 1.125rem;
  appearance: none;
  -webkit-appearance: none;
  text-overflow: ellipsis;
}

.select-envoltorio > .ico {
  position: absolute;
  right: 18px;
  top: 50%;
  width: 22px;
  height: 22px;
  transform: translateY(-50%);
  color: var(--tinta);
  pointer-events: none;
}

.mensaje {
  margin-bottom: 20px;
  padding: 16px 20px;
  background: var(--etiqueta-fondo);
  border: 1px solid var(--arena);
  border-radius: var(--radio-campo);
}
.mensaje-titulo {
  font-size: 1rem;
  font-weight: 700;
  color: var(--dorado-oscuro);
  margin-bottom: 4px;
}

.nota {
  margin-top: 24px;
  color: var(--texto-2);
}

.correo {
  display: block;
  min-height: 44px;
  margin-top: 12px;
  padding-block: 2px;
  color: var(--dorado-oscuro);
  font-weight: 700;
  overflow-wrap: anywhere;
}
.correo-intro {
  display: flex;
  align-items: center;
  gap: 10px;
}
.correo .ico { width: 24px; height: 24px; flex: none; }
/* la dirección va en su propia línea, con todo el ancho de la columna */
.correo-dir {
  display: block;
  font-size: 1rem;
  text-decoration: underline;
}
.correo-intro span { text-decoration: underline; }
@media (min-width: 345px) {
  .correo-dir { white-space: nowrap; }
}

/* ===== Pie de página ===== */
.pie {
  border-top: 1px solid var(--arena);
  /* espacio para que la barra fija no tape el pie */
  padding: 24px var(--margen) calc(60px + 24px + 24px + env(safe-area-inset-bottom, 0px));
}

.pie-interior {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
  color: var(--texto-2);
}

.pie-instagram {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--dorado-oscuro);
  font-weight: 700;
}
.pie-instagram .ico { width: 24px; height: 24px; }

/* ===== Barra fija de WhatsApp ===== */
.barra-fija {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  max-width: var(--ancho-max); /* mismo ancho máximo que el contenido */
  margin-inline: auto;         /* centrada en pantallas grandes */
  z-index: 30;
  display: flex;
  justify-content: center;
  padding: 28px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  /* degradado marfil para que el texto no se vea detrás de la píldora */
  background: linear-gradient(to bottom, rgba(250, 248, 243, 0) 0%, #FAF8F3 55%);
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease, visibility 0s;
}
/* Oculta (la maneja script.js): no se enfoca ni se anuncia */
.barra-fija.oculta {
  opacity: 0;
  transform: translateY(16px);
  visibility: hidden;
  transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
}
.barra-fija .boton {
  pointer-events: auto;
  box-shadow: 0 4px 14px rgba(28, 26, 23, .18);
}

/* ===== Menú de servicios (panel lateral) ===== */
.menu-fondo,
.menu-panel { display: none; }

.js .menu-fondo,
.js .menu-panel { display: block; }

.menu-fondo {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--velo);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility 0s linear .25s;
}

.menu-panel {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 70;
  flex-direction: column;
  width: min(86vw, 360px);
  background: var(--marfil);
  color: var(--tinta);
  border-right: 1px solid var(--arena);
  transform: translateX(-100%);
  visibility: hidden;
  transition: transform .25s ease, visibility 0s linear .25s;
}
.js .menu-panel { display: flex; }

/* Menú abierto: la clase la pone script.js en <html> */
.menu-abierto { overflow: hidden; scrollbar-gutter: stable; }
.menu-abierto .menu-fondo {
  opacity: 1;
  visibility: visible;
  transition: opacity .25s ease, visibility 0s;
}
.menu-abierto .menu-panel {
  transform: none;
  visibility: visible;
  transition: transform .25s ease, visibility 0s;
}
/* la barra fija de WhatsApp se esconde mientras el menú está abierto */
.menu-abierto .barra-fija {
  opacity: 0;
  visibility: hidden;
}

.menu-cabeza {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: flex-end;
  min-height: var(--alto-encabezado);
  padding: 8px 16px;
  border-bottom: 1px solid var(--arena);
}

.menu-cerrar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 2px solid var(--borde-control);
  border-radius: 50%;
  background: var(--blanco);
  color: var(--tinta);
  cursor: pointer;
}

.menu-cuerpo {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.menu-grupo { padding: 24px 16px 0; }
.menu-grupo-titulo {
  margin-bottom: 4px;
  padding: 0 8px;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--dorado-oscuro);
}

.menu-grupo li + li { border-top: 1px solid var(--arena); }
.menu-grupo a {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 52px;
  padding: 8px;
  border-radius: 10px;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
}
.menu-grupo .ico {
  width: 28px;
  height: 28px;
  color: var(--dorado-oscuro);
}

/* El botón de WhatsApp queda siempre visible al pie del panel */
.menu-pie {
  position: sticky;
  bottom: 0;
  margin-top: auto;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  background: var(--marfil);
  border-top: 1px solid var(--arena);
}
.menu-grupo:last-of-type { padding-bottom: 24px; }
/* Grupo del enlace al PDF: una línea arena arriba y un ícono pequeño de "abre afuera" a la derecha */
.menu-grupo-extra { padding-top: 16px; padding-bottom: 24px; }
.menu-grupo-extra ul { padding-top: 4px; border-top: 1px solid var(--arena); }
.menu-grupo a .ico-externo {
  width: 20px;
  height: 20px;
  margin-left: auto;
  color: var(--tinta);
}

/* ===== Bienvenida (logo al entrar) ===== */
.splash { display: none; }

/* La secuencia completa la hace el CSS (2 s en total, con la salida); script.js solo permite saltarla y limpia.
   Idea: la balanza parte desequilibrada, la espada se alza con un destello y la balanza vuelve a quedar pareja.
   0–0,45 s aparece el logo · 0,35–0,95 s se alza la espada · 0,6–1,45 s la balanza oscila y se nivela · 1,6–2 s se desvanece */
html.con-splash .splash {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--marfil);
  animation: bienvenida-fondo 2s ease both;
}
.splash-logo {
  position: relative;
  width: min(78vw, 380px);
  animation: bienvenida-logo .45s cubic-bezier(.22, .61, .36, 1) both;
}
.splash-logo picture { display: block; }
.splash-logo img {
  display: block;
  width: 100%;
  height: auto;
}
/* Todas las capas miden lo mismo que la base y se apilan exactamente encima */
.splash .capa {
  position: absolute;
  inset: 0;
}
.splash .capa img { height: 100%; }

/* Balanza: la barra gira sobre su centro; cada platillo gira con ella y a la vez se endereza
   sobre su punto de cuelgue, así siempre cuelga derecho y pegado al extremo de la barra */
.splash .barra,
.splash .platillo {
  transform-origin: 42% 20%;
  animation: bienvenida-balanza 1.45s linear both;
}
.splash .platillo img { animation: bienvenida-balanza-contra 1.45s linear both; }
.splash .platillo-izq img { transform-origin: 38.2% 21.913%; }
.splash .platillo-der img { transform-origin: 45.933% 21.913%; }

/* Espada: gira unos grados desde la mano */
.splash .espada {
  transform-origin: 63.867% 37.565%;
  animation: bienvenida-espada .95s linear both;
}
/* Destello: una franja de luz que recorre solo el metal de la espada */
.splash .brillo {
  position: absolute;
  inset: 0;
  overflow: hidden;
  -webkit-mask-image: url("assets/bienvenida/espada-brillo.png");
  mask-image: url("assets/bienvenida/espada-brillo.png");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  mix-blend-mode: screen;
}
.splash .brillo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(202deg, transparent 45%, rgba(255, 238, 196, .85) 50%, transparent 55%);
  animation: bienvenida-brillo .55s cubic-bezier(.45, 0, .55, 1) .42s both;
}

/* Sin soporte de máscaras el destello no se dibuja (si no, pintaría una franja sobre todo el logo) */
@supports not ((-webkit-mask-image: none) or (mask-image: none)) {
  .splash .brillo { display: none; }
}

html.con-splash .splash.saliendo { animation: bienvenida-salto .2s ease both; }
/* Mientras se descargan las capas, el logo espera (invisible) para no mostrarse a medias */
.splash.esperando .splash-logo,
.splash.esperando .splash-logo *,
.splash.esperando .splash-logo *::before { animation-play-state: paused; }

@keyframes bienvenida-logo {
  from { opacity: 0; transform: translateY(8px) scale(.95); }
  to { opacity: 1; transform: none; }
}
@keyframes bienvenida-balanza {
  0% { transform: rotate(8deg); }
  41.38% { transform: rotate(8deg); animation-timing-function: cubic-bezier(.37, 0, .63, 1); }
  65.52% { transform: rotate(-3deg); animation-timing-function: cubic-bezier(.37, 0, .63, 1); }
  82.76% { transform: rotate(1deg); animation-timing-function: cubic-bezier(.37, 0, .63, 1); }
  100% { transform: rotate(0deg); }
}
@keyframes bienvenida-balanza-contra {
  0% { transform: rotate(-8deg); }
  41.38% { transform: rotate(-8deg); animation-timing-function: cubic-bezier(.37, 0, .63, 1); }
  65.52% { transform: rotate(3deg); animation-timing-function: cubic-bezier(.37, 0, .63, 1); }
  82.76% { transform: rotate(-1deg); animation-timing-function: cubic-bezier(.37, 0, .63, 1); }
  100% { transform: rotate(0deg); }
}
@keyframes bienvenida-espada {
  0% { transform: rotate(0deg); }
  36.84% { transform: rotate(0deg); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  78.95% { transform: rotate(5deg); animation-timing-function: cubic-bezier(.33, 0, .2, 1); }
  100% { transform: rotate(3deg); }
}
@keyframes bienvenida-brillo {
  0% { opacity: 0; transform: translate(7.8%, -24.8%); }
  25%, 75% { opacity: 1; }
  100% { opacity: 0; transform: translate(-4.9%, 15.4%); }
}
@keyframes bienvenida-fondo {
  0%, 80% { opacity: 1; visibility: visible; }
  100% { opacity: 0; visibility: hidden; }
}
@keyframes bienvenida-salto {
  to { opacity: 0; visibility: hidden; }
}

/* ===== Celulares muy angostos ===== */
@media (max-width: 359px) {
  .boton { padding: 0 16px; gap: 8px; }
}

/* ===== Celulares de 360 a 419 px: "Escríbeme por WhatsApp" en una sola línea ===== */
@media (min-width: 360px) and (max-width: 419px) {
  .boton {
    gap: 8px;
    padding: 0 10px;
    font-size: 1.125rem;
  }
  .boton .ico { width: 24px; height: 24px; }
  .tarifas-boton { padding-inline: 16px; }
}

/* ===== Pantallas más grandes ===== */
@media (min-width: 600px) {
  .boton { width: auto; min-width: 320px; }
  .boton-sobre { display: inline-flex; width: auto; padding-inline: 28px; }
  .barra-fija .boton { width: 100%; }
  .tarifas-boton .boton { width: 100%; }
  .alternar-boton { flex: 0 0 auto; }
}

@media (min-width: 768px) {
  .splash-logo { width: min(78vw, 440px); }
  .encabezado {
    position: sticky;
    top: 0;
    background: var(--marfil); /* tapa el contenido que pasa por debajo */
  }
  .seccion { scroll-margin-top: var(--alto-encabezado); }
  .fila { scroll-margin-top: calc(var(--alto-encabezado) + 16px); }
  h1 { font-size: 3rem; }
  .mono { font-size: 2.75rem; gap: 8px; }
  .marca-texto { font-size: 1.25rem; }
  .pymes { padding: 40px 40px; }
}

/* ===== Marca de agua (figura de la justicia, solo decoración) =====
   Capa fija con compositing propio, sobre el marfil de <html> y debajo de header, main y footer (z-index 1+), menú y barra.
   Las tarjetas blancas y el bloque oscuro son opacos, así que solo se ve sobre las zonas marfil. */
.marca-agua {
  position: fixed;
  /* Anclada abajo y con alto fijo: en Chrome Android la barra de direcciones está arriba y, al esconderse,
     corre hacia arriba todo lo anclado al borde superior. El borde de abajo no se mueve, así la figura queda quieta. */
  bottom: 0;
  left: 0;
  right: 0;
  height: 100vh;
  height: 100lvh;
  z-index: 0; /* el contenido (header, main, footer) va con z-index 1 y queda encima */
  pointer-events: none;
  opacity: var(--marca-agua-opacidad);
  background-image: url("assets/marca-agua-justicia.png");
  background-image: image-set(
    url("assets/marca-agua-justicia.webp") type("image/webp"),
    url("assets/marca-agua-justicia.png") type("image/png")
  );
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto min(78vh, 760px);
  background-size: auto min(78lvh, 760px);
  /* capa propia en la GPU: así no se repinta ni se mueve junto con el scroll en Chrome Android */
  transform: translateZ(0);
  will-change: transform;
  backface-visibility: hidden;
  contain: strict;
}
@media (min-width: 768px) {
  .marca-agua {
    background-size: auto min(82vh, 860px);
    background-size: auto min(82lvh, 860px);
  }
}
/* Safari de iPhone tiene la barra abajo: ahí lo que no se mueve es el borde de arriba */
@supports (-webkit-touch-callout: none) {
  .marca-agua { top: 0; bottom: auto; }
}
@media print {
  .marca-agua { display: none; }
}

/* ===== Menos movimiento ===== */
@media (prefers-reduced-motion: reduce) {
  .splash { display: none !important; }
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}