/* landing.css — estilos específicos de la landing de Lateris Seguridad */

/* ===== CABECERA ===== */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--blanco);
  border-bottom: 1px solid var(--borde);
}

.cabecera__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
  gap: var(--espacio-m);
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-xs);
  font-size: 1.1rem;
  color: var(--texto);
  text-decoration: none;
}
.marca:hover,
.marca:focus {
  text-decoration: none;
  color: var(--azul-oscuro);
}
.marca__logo {
  display: block;
}
.marca__texto strong {
  color: var(--azul);
}

.menu-boton {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  cursor: pointer;
  padding: 0 10px;
}
.menu-boton__linea {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--texto);
  border-radius: 2px;
  transition: transform var(--transicion), opacity var(--transicion);
}
.menu-boton[aria-expanded="true"] .menu-boton__linea:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.menu-boton[aria-expanded="true"] .menu-boton__linea:nth-child(2) {
  opacity: 0;
}
.menu-boton[aria-expanded="true"] .menu-boton__linea:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.menu {
  display: none;
  width: 100%;
}
.menu[data-abierto="true"] {
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--blanco);
  border-bottom: 1px solid var(--borde);
  padding: var(--espacio-m);
  box-shadow: var(--sombra);
}

.menu__lista {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--espacio-s);
}
.menu__lista a {
  display: block;
  padding: 0.5rem 0;
  color: var(--texto);
  font-weight: 500;
}
.menu__lista a:hover,
.menu__lista a:focus {
  color: var(--azul);
}
.menu__cta {
  color: var(--azul) !important;
  font-weight: 700 !important;
}

@media (min-width: 900px) {
  .menu-boton { display: none; }
  .menu { display: block !important; width: auto; position: static !important; padding: 0 !important; box-shadow: none !important; border: 0 !important; }
  .menu__lista { flex-direction: row; align-items: center; gap: var(--espacio-m); }
  .menu__lista a { padding: 0; }
}

/* ===== HERO ===== */
.hero {
  background: linear-gradient(180deg, var(--blanco) 0%, var(--fondo) 100%);
  padding: var(--espacio-2xl) 0;
  border-bottom: 1px solid var(--borde);
}
.hero__inner {
  max-width: 820px;
  text-align: center;
}
.hero__etiqueta {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--azul);
  margin-bottom: var(--espacio-m);
}
.hero__titulo {
  font-size: 1.9rem;
  line-height: 1.2;
  margin-bottom: var(--espacio-m);
}
@media (min-width: 768px) {
  .hero__titulo { font-size: 2.75rem; }
}
.hero__subtitulo {
  font-size: 1.1rem;
  color: var(--texto-suave);
  margin-bottom: var(--espacio-l);
}
.hero__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-s);
  justify-content: center;
  margin-bottom: var(--espacio-xl);
}
.hero__datos {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--espacio-m);
  max-width: 640px;
  margin: 0 auto;
}
@media (min-width: 640px) {
  .hero__datos { grid-template-columns: repeat(3, 1fr); }
}
.hero__datos li {
  text-align: center;
  padding: var(--espacio-m);
  border-top: 2px solid var(--azul);
  background: var(--blanco);
  border-radius: var(--radio);
}
.hero__datos strong {
  display: block;
  font-size: 1.35rem;
  color: var(--azul-oscuro);
}
.hero__datos span {
  font-size: 0.85rem;
  color: var(--texto-suave);
}

/* ===== AVISO / NOTA ===== */
.aviso {
  margin-top: var(--espacio-l);
  background: var(--azul-claro);
  color: var(--azul-oscuro);
  border-left: 4px solid var(--azul);
  border-radius: var(--radio);
  padding: var(--espacio-m) var(--espacio-l);
}
.aviso p {
  margin: 0;
  color: var(--texto);
}

.nota {
  margin-top: var(--espacio-m);
  font-size: 0.9rem;
  color: var(--texto-suave);
  text-align: center;
}

/* ===== ICONOS NUMÉRICOS ===== */
.icono {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--azul-claro);
  color: var(--azul-oscuro);
  color: var(--azul);
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: var(--espacio-m);
}

/* ===== TARJETAS AVISO ===== */
.tarjeta--aviso {
  border-top: 4px solid var(--aviso);
  background: var(--aviso-fondo);
}
.tarjeta--aviso .tarjeta__titulo {
  color: var(--aviso);
}

/* ===== TARJETAS DIFERENCIAL ===== */
.tarjeta--dato .dato__valor {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--azul);
  margin-bottom: var(--espacio-s);
  letter-spacing: -0.01em;
}

/* ===== PASOS ===== */
.pasos {
  list-style: none;
  display: grid;
  gap: var(--espacio-m);
  counter-reset: paso;
}
@media (min-width: 640px) {
  .pasos { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .pasos { grid-template-columns: repeat(4, 1fr); }
}
.paso {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio-grande);
  padding: var(--espacio-l);
  position: relative;
  box-shadow: var(--sombra);
}
.paso__numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--azul);
  color: var(--blanco);
  font-weight: 700;
  margin-bottom: var(--espacio-m);
}
.paso__titulo {
  font-size: 1.1rem;
  margin-bottom: var(--espacio-s);
  color: var(--azul-oscuro);
}

/* ===== TABLA ===== */
.tabla-envoltura {
  overflow-x: auto;
  border-radius: var(--radio-grande);
  box-shadow: var(--sombra);
  background: var(--blanco);
}
.tabla {
  width: 100%;
  border-collapse: collapse;
  min-width: 520px;
}
.tabla__caption {
  text-align: left;
  padding: var(--espacio-m);
  font-size: 0.9rem;
  color: var(--texto-suave);
  background: var(--fondo);
}
.tabla th,
.tabla td {
  padding: var(--espacio-m);
  text-align: left;
  border-bottom: 1px solid var(--borde);
}
.tabla thead th {
  background: var(--azul);
  color: var(--blanco);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
}
.tabla tbody th {
  font-weight: 600;
  color: var(--texto);
}
.tabla tbody tr:last-child th,
.tabla tbody tr:last-child td {
  border-bottom: 0;
}
.tabla tbody tr:nth-child(even) {
  background: var(--fondo);
}

/* ===== FAQ ===== */
.faq {
  max-width: 820px;
  margin: 0 auto;
}
.faq__item {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  margin-bottom: var(--espacio-s);
  overflow: hidden;
}
.faq__item[open] {
  border-color: var(--azul);
  box-shadow: var(--sombra);
}
.faq__pregunta {
  cursor: pointer;
  padding: var(--espacio-m) var(--espacio-l);
  font-weight: 600;
  list-style: none;
  position: relative;
  padding-right: 3rem;
}
.faq__pregunta::-webkit-details-marker { display: none; }
.faq__pregunta::after {
  content: "+";
  position: absolute;
  right: var(--espacio-m);
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--azul);
  transition: transform var(--transicion);
}
.faq__item[open] .faq__pregunta::after {
  content: "−";
}
.faq__item p {
  padding: 0 var(--espacio-l) var(--espacio-m);
  margin: 0;
  color: var(--texto-suave);
}

/* ===== CONTACTO ===== */
.contacto-lista {
  list-style: none;
}
.contacto-lista li {
  padding: var(--espacio-s) 0;
  border-bottom: 1px solid var(--borde);
}
.contacto-lista li:last-child {
  border-bottom: 0;
}
.contacto-lista strong {
  display: block;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--texto-suave);
  margin-bottom: 2px;
}

/* ===== PIE ===== */
.pie {
  background: var(--azul-oscuro);
  color: #d7e2ee;
  padding: var(--espacio-xl) 0 var(--espacio-m);
  margin-top: 0;
}
.pie a {
  color: #c7daf0;
}
.pie a:hover,
.pie a:focus {
  color: var(--blanco);
}
.pie__inner {
  display: grid;
  gap: var(--espacio-l);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .pie__inner { grid-template-columns: 1.2fr 1fr 1.5fr; }
}
.pie__marca {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--blanco);
  margin-bottom: var(--espacio-s);
}
.pie__marca strong {
  color: #9ec5f0;
}
.pie__titulo {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8rem;
  color: var(--blanco);
  margin-bottom: var(--espacio-s);
}
.pie__texto {
  font-size: 0.95rem;
  color: #c7daf0;
}
.pie__texto--pequeno {
  font-size: 0.8rem;
  line-height: 1.55;
  color: #b3c9e0;
}
.pie__lista {
  list-style: none;
}
.pie__lista li {
  margin-bottom: var(--espacio-xs);
  font-size: 0.95rem;
}
.pie__final {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  margin-top: var(--espacio-l);
  padding-top: var(--espacio-m);
  text-align: center;
  font-size: 0.85rem;
  color: #b3c9e0;
}
.pie__final p {
  margin: 0;
}