/* ============================================================
   AVES DEL BOSQUE — Sistema de diseño
   Un solo origen de verdad: variables CSS. El modo oscuro solo
   re-declara variables (nada de duplicar cientos de reglas).
   ============================================================ */

/* ---------- Tokens ---------- */
/* [hidden] lo pone el HTML y el navegador le da display:none, pero cualquier
   regla nuestra con display (flex, grid, inline-flex...) le gana por
   especificidad y el elemento reaparece. Esta línea cierra ese agujero. */
[hidden] {
  display: none !important;
}

:root {
  /* Paleta de marca (verde naturaleza) */
  --verde-900: #143d17;
  --verde-800: #1b5e20;
  --verde-700: #2e7d32;
  --verde-600: #388e3c;
  --verde-500: #43a047;
  --verde-100: #e3f1e4;
  --ambar-500: #f0a41c;
  --wa: #25d366;

  /* Tokens semánticos (modo claro) */
  --bg: #f6faf4;
  --surface: #ffffff;
  --surface-alt: #ecf4ea;
  --text: #21301f;
  --text-muted: #5a6b58;
  --border: #d9e5d6;
  --primary: var(--verde-700);
  --primary-hover: var(--verde-800);
  --primary-contrast: #ffffff;
  --star: var(--ambar-500);
  /* El fondo del pie como token: el bloque de servicios TI necesita
     conocerlo para fundirse con el en vez de cortar a cuchillo. */
  --pie-fondo: var(--verde-900);
  /* Texto sobre un fondo ámbar. En claro tiene que ser oscuro para
     leerse; en oscuro, al revés. Estaba escrito a mano como #8a5a00
     en cinco sitios, y en modo oscuro quedaba marrón sobre marrón. */
  --ambar-texto: #8a5a00;
  --error: #c62828;
  --exito: #2e7d32;
  --sombra-1: 0 1px 3px rgba(15, 40, 18, 0.08), 0 1px 2px rgba(15, 40, 18, 0.06);
  --sombra-2: 0 6px 18px rgba(15, 40, 18, 0.10);
  --sombra-3: 0 14px 34px rgba(15, 40, 18, 0.14);

  --radio: 12px;
  --radio-sm: 8px;
  --transicion: 0.25s ease;
  --ancho-max: 72rem;
}

[data-theme="dark"] {
  --bg: #10160f;
  --surface: #1a231a;
  --surface-alt: #202b1f;
  --text: #e7efe5;
  --text-muted: #a3b3a0;
  --border: #2e3b2c;
  --primary: #5bb35f;
  --primary-hover: #74c877;
  --primary-contrast: #0d130c;
  --error: #ef7070;
  --exito: #7ed486;
  --ambar-texto: #f0a41c;
  --pie-fondo: #0b120a;
  --sombra-1: 0 1px 3px rgba(0, 0, 0, 0.4);
  --sombra-2: 0 6px 18px rgba(0, 0, 0, 0.45);
  --sombra-3: 0 14px 34px rgba(0, 0, 0, 0.55);
}

/* ---------- Reset y base ---------- */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

body {
  font-family: "Poppins", system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text);
  background-color: var(--bg);
  transition: background-color var(--transicion), color var(--transicion);
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: var(--primary);
  text-decoration: none;
}

ul {
  list-style: none;
}

button {
  font-family: inherit;
  cursor: pointer;
}

.container {
  max-width: var(--ancho-max);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

.container-narrow { max-width: 56rem; }
.container-auth { max-width: 30rem; }
.container-prose { max-width: 46rem; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 200;
  padding: 0.6rem 1rem;
  background: var(--primary);
  color: var(--primary-contrast);
  border-radius: var(--radio-sm);
}

.skip-link:focus {
  top: 0.5rem;
}

:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
}

/* ---------- Tipografía ---------- */
.heading-xl {
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.5px;
}

.heading-lg {
  font-size: clamp(1.7rem, 4vw, 2.4rem);
  font-weight: 700;
  line-height: 1.18;
}

.heading-md {
  font-size: clamp(1.2rem, 3vw, 1.5rem);
  font-weight: 600;
}

.lead {
  font-size: 1.1rem;
  color: var(--text-muted);
  text-wrap: balance;
}

/* ---------- Botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
  padding: 0.7rem 1.4rem;
  font-size: 0.95rem;
  font-weight: 500;
  border: 2px solid transparent;
  border-radius: 999px;
  transition: background-color var(--transicion), color var(--transicion),
    border-color var(--transicion), transform 0.15s ease;
}

.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: var(--primary);
  color: var(--primary-contrast);
  box-shadow: var(--sombra-1);
}

.btn-primary:hover { background: var(--primary-hover); }

.btn-outline {
  border-color: var(--primary);
  color: var(--primary);
  background: transparent;
}

.btn-outline:hover {
  background: var(--primary);
  color: var(--primary-contrast);
}

.btn-ghost {
  background: transparent;
  color: var(--text);
}

.btn-ghost:hover { color: var(--primary); }

.btn-whatsapp {
  background: var(--wa);
  color: #fff;
  box-shadow: var(--sombra-1);
}

.btn-whatsapp:hover { background: #1ebe5a; }

.btn-sm { padding: 0.45rem 0.95rem; font-size: 0.85rem; }
.btn-lg { padding: 0.9rem 1.9rem; font-size: 1.05rem; }
.btn-block { width: 100%; justify-content: center; }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  font-size: 1.25rem;
  color: var(--text);
  background: transparent;
  border: none;
  border-radius: 50%;
  position: relative;
  transition: background-color var(--transicion), color var(--transicion);
}

.icon-btn:hover {
  background: var(--surface-alt);
  color: var(--primary);
}

/* ---------- Header / Navbar ---------- */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--surface);
  box-shadow: var(--sombra-1);
  transition: background-color var(--transicion);
}

.navbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  height: 4.25rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--primary);
  margin-right: auto;
  white-space: nowrap;
}

.brand img { border-radius: 8px; }

.menu-inner {
  display: flex;
  gap: 1.5rem;
}

.menu-link {
  font-weight: 500;
  color: var(--text);
  padding: 0.35rem 0;
  border-bottom: 2px solid transparent;
  transition: color var(--transicion), border-color var(--transicion);
}

.menu-link:hover {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

.navbar-actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.btn-navbar { white-space: nowrap; }

.cart-badge {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 1.15rem;
  height: 1.15rem;
  padding-inline: 0.25rem;
  display: grid;
  place-items: center;
  font-size: 0.68rem;
  font-weight: 600;
  color: #fff;
  background: var(--error);
  border-radius: 999px;
}

/* Menú de usuario (details/summary: accesible sin JS) */
.user-menu { position: relative; }
.user-menu summary { list-style: none; }
.user-menu summary::-webkit-details-marker { display: none; }

.user-menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 0.5rem);
  min-width: 13rem;
  padding: 0.6rem;
  display: grid;
  gap: 0.15rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radio);
  box-shadow: var(--sombra-3);
}

.user-menu-nombre {
  padding: 0.4rem 0.7rem;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  margin-bottom: 0.25rem;
}

.user-menu-panel a,
.user-menu-panel button {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  padding: 0.5rem 0.7rem;
  font-size: 0.92rem;
  color: var(--text);
  background: none;
  border: none;
  border-radius: var(--radio-sm);
  text-align: left;
}

.user-menu-panel a:hover,
.user-menu-panel button:hover {
  background: var(--surface-alt);
  color: var(--primary);
}

/* Botón de tema: muestra el ícono contrario al tema activo */
.theme-icon-dark { display: none; }
[data-theme="dark"] .theme-icon-light { display: none; }
[data-theme="dark"] .theme-icon-dark { display: inline; }

/* Burger (móvil) */
.burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.4rem;
  height: 2.4rem;
  background: none;
  border: none;
}

.burger-line {
  width: 1.4rem;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform var(--transicion), opacity var(--transicion);
}

.burger.is-active .burger-line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.is-active .burger-line:nth-child(2) { opacity: 0; }
.burger.is-active .burger-line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Toasts ---------- */
.toasts {
  position: fixed;
  top: 5rem;
  right: 1rem;
  z-index: 150;
  display: grid;
  gap: 0.5rem;
  max-width: 22rem;
}

.toast {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.8rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--primary);
  border-radius: var(--radio-sm);
  box-shadow: var(--sombra-2);
  font-size: 0.92rem;
}

.toast-success { border-left-color: var(--exito); }
.toast-success i { color: var(--exito); }
.toast-error { border-left-color: var(--error); }
.toast-error i { color: var(--error); }

.toast-cerrar {
  margin-left: auto;
  background: none;
  border: none;
  font-size: 1.2rem;
  color: var(--text-muted);
  line-height: 1;
}

/* ---------- Secciones ---------- */
.section { padding-block: 4.5rem 3.5rem; }
.page-section { padding-block: 3rem; }
.section-alt { background: var(--surface-alt); }

.section-head {
  max-width: 40rem;
  margin-bottom: 2.25rem;
}

.section-head p { color: var(--text-muted); }

.section-more {
  margin-top: 2rem;
  text-align: center;
}

/* ---------- Hero ---------- */
.hero {
  padding-block: 3.5rem 2rem;
  overflow: hidden;
}

.hero-grid {
  display: grid;
  align-items: center;
  gap: 2.5rem;
}

.hero-text {
  display: grid;
  gap: 1.4rem;
  justify-items: start;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}

/* La foto de portada estaba suelta sobre el fondo, con las esquinas en pico
   y sin nada que la contuviera. El marco es una lámina desplazada por detrás:
   da profundidad sin taparla ni competir con ella. */
.hero-marco {
  position: relative;
  justify-self: center;
  max-width: min(100%, 33rem);
  /* El hero recorta lo que se sale (overflow: hidden), así que se reserva
     por adelantado el hueco que ocupa la lámina desplazada. Sin esto, a
     ciertos anchos el marco aparece cortado y parece un fallo. */
  margin-right: 0.85rem;
  margin-bottom: 0.85rem;
}

.hero-marco::before {
  content: "";
  position: absolute;
  inset: 0;
  transform: translate(0.85rem, 0.85rem);
  border: 2px solid var(--primary);
  border-radius: var(--radio);
  opacity: 0.4;
  pointer-events: none;
}

.hero-image {
  position: relative;   /* por encima de la lámina */
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radio);
  box-shadow: var(--sombra-2);
}

/* En pantallas estrechas el desplazamiento se recorta contra el borde y se
   ve como un error: ahí el marco sobra. */
@media (max-width: 30rem) {
  .hero-marco::before { display: none; }
}

@media (min-width: 56rem) {
  .hero-grid { grid-template-columns: 1.1fr 1fr; }
}

/* ---------- Carrusel de consejos ---------- */
.tips-section .container {
  display: grid;
  gap: 2rem;
  align-items: center;
}

@media (min-width: 60rem) {
  .tips-section .container { grid-template-columns: 1.1fr 1fr; }
}

.carousel { position: relative; }

.carousel-viewport {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: var(--sombra-2);
  background: var(--surface-alt);
}

.carousel-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carousel-slide.is-active { opacity: 1; }

.carousel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 0.9rem;
}

.carousel-btn {
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  font-size: 1.2rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 50%;
  transition: background-color var(--transicion), color var(--transicion);
}

.carousel-btn:hover {
  background: var(--primary);
  color: var(--primary-contrast);
}

.carousel-dots { display: flex; gap: 0.45rem; }

.carousel-dot {
  width: 0.7rem;
  height: 0.7rem;
  border: none;
  border-radius: 50%;
  background: var(--border);
  transition: background-color var(--transicion), transform var(--transicion);
}

.carousel-dot:hover { transform: scale(1.25); }
.carousel-dot.is-active { background: var(--primary); }

.tips-text { position: relative; }

.tip {
  display: none;
  padding: 1.8rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radio);
  box-shadow: var(--sombra-1);
}

.tip.is-active {
  display: block;
  animation: aparecer 0.5s ease;
}

.tip h2 {
  font-size: 1.25rem;
  margin-bottom: 0.7rem;
  color: var(--primary);
}

@keyframes aparecer {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- Cards ---------- */
.cards-grid {
  display: grid;
  gap: 1.4rem;
  grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
}

.card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radio);
  overflow: hidden;
  transition: transform var(--transicion), box-shadow var(--transicion);
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: var(--sombra-2);
}

.card-media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--surface-alt);
}

.card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.card:hover .card-media img { transform: scale(1.05); }

.card-media-placeholder {
  display: grid;
  place-items: center;
  height: 100%;
  font-size: 2.5rem;
  color: var(--text-muted);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.7rem;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 999px;
}

.badge-especie,
.badge-categoria {
  position: absolute;
  top: 0.7rem;
  left: 0.7rem;
  background: rgba(20, 61, 23, 0.85);
  color: #fff;
}

.badge-agotado {
  background: var(--surface-alt);
  color: var(--text-muted);
}

.badge-stock {
  background: var(--verde-100);
  color: var(--verde-800);
}

[data-theme="dark"] .badge-stock {
  background: #24331f;
  color: #9fd8a2;
}

.badge-verificada {
  background: var(--verde-100);
  color: var(--verde-800);
  font-size: 0.7rem;
}

[data-theme="dark"] .badge-verificada {
  background: #24331f;
  color: #9fd8a2;
}

.card-body {
  display: grid;
  gap: 0.5rem;
  padding: 1rem 1.1rem 0.6rem;
  flex-grow: 1;
  align-content: start;
}

.card-title {
  font-size: 1.05rem;
  font-weight: 600;
}

.card-title a { color: var(--text); }
.card-title a:hover { color: var(--primary); }

.card-text {
  font-size: 0.88rem;
  color: var(--text-muted);
}

.card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.8rem 1.1rem 1rem;
  border-top: 1px solid var(--border);
}

/* Pie de tarjeta sin precio (loros del aviario): el botón ocupa el ancho. */
.card-footer-simple .btn {
  width: 100%;
  justify-content: center;
}

.card-price {
  font-weight: 700;
  color: var(--primary);
}

/* ---------- Rating ---------- */
.rating {
  display: flex;
  align-items: center;
  gap: 0.1rem;
  color: var(--star);
  font-size: 0.95rem;
}

.rating-total {
  margin-left: 0.4rem;
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* ---------- Filtros ---------- */
.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.8rem;
}

.chip {
  padding: 0.4rem 1rem;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  transition: background-color var(--transicion), color var(--transicion);
}

.chip:hover { border-color: var(--primary); color: var(--primary); }

.chip.is-active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-contrast);
}

/* ---------- Paginación ---------- */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 2.2rem;
}

.page-link {
  display: grid;
  place-items: center;
  width: 2.3rem;
  height: 2.3rem;
  font-size: 1.3rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 50%;
}

.page-link:hover { border-color: var(--primary); }

.page-info { font-size: 0.9rem; color: var(--text-muted); }

/* ---------- Detalle ---------- */
.detalle-grid {
  display: grid;
  gap: 2.5rem;
  margin-bottom: 2rem;
}

@media (min-width: 56rem) {
  .detalle-grid { grid-template-columns: 1fr 1fr; }
}

.detalle-media img {
  width: 100%;
  border-radius: var(--radio);
  box-shadow: var(--sombra-2);
}

.detalle-info { display: grid; gap: 0.8rem; align-content: start; justify-items: start; }

.breadcrumb {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.detalle-especie { color: var(--text-muted); font-weight: 500; }

.detalle-precio {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--primary);
}

.detalle-dato { font-size: 0.92rem; color: var(--text-muted); }

.detalle-descripcion { color: var(--text); }

.detalle-acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem;
  margin-top: 0.5rem;
}

.detalle-nota {
  font-size: 0.85rem;
  color: var(--text-muted);
  padding: 0.8rem 1rem;
  background: var(--surface-alt);
  border-radius: var(--radio-sm);
}

.cantidad-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}

.cantidad-form input {
  width: 4.5rem;
  padding: 0.55rem;
  text-align: center;
}

/* ---------- Reseñas ---------- */
.section-resenas {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
  display: grid;
  gap: 1.4rem;
}

.resenas-lista { display: grid; gap: 1rem; }

.resena {
  padding: 1.1rem 1.3rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radio);
}

.resena-cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.3rem;
}

.resena-fecha {
  margin-left: auto;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.resena-form {
  display: grid;
  gap: 1rem;
  padding: 1.4rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radio);
  max-width: 34rem;
}

.rating-selector {
  display: flex;
  gap: 0.4rem;
}

.rating-selector label {
  cursor: pointer;
}

.rating-selector input {
  position: absolute;
  opacity: 0;
}

.rating-selector span {
  display: inline-block;
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: var(--radio-sm);
  font-size: 0.9rem;
  transition: background-color var(--transicion), color var(--transicion);
}

.rating-selector input:checked + span {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-contrast);
}

.rating-selector input:focus-visible + span {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
}

.resena-login { color: var(--text-muted); }

/* ---------- Formularios ---------- */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="search"],
input[type="url"],
input[type="date"],
textarea,
select {
  width: 100%;
  padding: 0.7rem 0.9rem;
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--text);
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radio-sm);
  transition: border-color var(--transicion), box-shadow var(--transicion);
}

textarea { resize: vertical; min-height: 7rem; }

/* Safari le da apariencia propia a los buscadores e ignora el borde. */
input[type="search"] {
  appearance: none;
  -webkit-appearance: none;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 18%, transparent);
}

.form-card {
  display: grid;
  gap: 1.1rem;
  padding: 1.8rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radio);
  box-shadow: var(--sombra-1);
  margin-top: 1.5rem;
}

.form-group {
  display: grid;
  gap: 0.4rem;
  align-content: start;
}

.form-group label,
.form-label {
  font-weight: 600;
  font-size: 0.92rem;
}

.form-ayuda {
  /* Pegada al campo y discreta: acompaña, no compite con la etiqueta. */
  margin-top: -0.15rem;
  font-size: 0.75rem;
  line-height: 1.35;
  color: var(--text-muted);
}

.errorlist {
  color: var(--error);
  font-size: 0.85rem;
}

.form-errores {
  padding: 0.8rem 1rem;
  background: color-mix(in srgb, var(--error) 12%, var(--surface));
  border-radius: var(--radio-sm);
  color: var(--error);
  font-size: 0.9rem;
}

.form-alt {
  font-size: 0.9rem;
  color: var(--text-muted);
  text-align: center;
}

/* ---------- Perfil ---------- */
.perfil-email { color: var(--text-muted); margin-top: 0.3rem; }

.perfil-accesos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.2rem;
}

/* ---------- Carrito ---------- */
.carrito-lista {
  display: grid;
  gap: 0.9rem;
  margin-top: 1.8rem;
}

.carrito-item {
  display: grid;
  grid-template-columns: auto 1fr auto auto auto;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem 1.1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radio);
}

.carrito-item img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: var(--radio-sm);
}

.carrito-item-info { display: grid; gap: 0.15rem; }
.carrito-item-nombre { font-weight: 600; color: var(--text); }
.carrito-item-nombre:hover { color: var(--primary); }
.carrito-item-precio { font-size: 0.85rem; color: var(--text-muted); }

.carrito-cantidad {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.carrito-cantidad input {
  width: 3.6rem;
  text-align: center;
  /* Fuera las flechas del navegador: no se pueden tematizar y en modo oscuro
     se ven como un bloque blanco. Las reemplazan los botones − y +. */
  appearance: textfield;
  -moz-appearance: textfield;
}

.carrito-cantidad input::-webkit-outer-spin-button,
.carrito-cantidad input::-webkit-inner-spin-button {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
}

.paso-btn {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
  padding: 0;
  font-size: 1rem;
  line-height: 1;
  color: var(--text);
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radio-sm);
  cursor: pointer;
  transition: background var(--transicion), border-color var(--transicion);
}

.paso-btn:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-contrast);
}

.paso-btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.carrito-item-subtotal { font-weight: 700; }

.carrito-resumen {
  margin-top: 1.6rem;
  padding: 1.4rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radio);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.carrito-total { font-size: 1.2rem; }

.carrito-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}

/* ---------- Checkout ---------- */
.checkout-grid {
  display: grid;
  gap: 1.6rem;
  margin-top: 1.8rem;
}

@media (min-width: 52rem) {
  .checkout-grid { grid-template-columns: 1fr 1fr; }
}

.checkout-resumen,
.checkout-datos {
  padding: 1.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radio);
  display: grid;
  gap: 0.8rem;
  align-content: start;
}

.checkout-lista { display: grid; gap: 0.45rem; }

.checkout-lista li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.95rem;
}

.checkout-total {
  padding-top: 0.8rem;
  border-top: 1px solid var(--border);
  font-size: 1.1rem;
}

.checkout-aviso {
  padding: 0.8rem 1rem;
  background: color-mix(in srgb, var(--ambar-500) 15%, var(--surface));
  border-radius: var(--radio-sm);
  font-size: 0.9rem;
}

.checkout-confirmar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem;
  margin-top: 0.6rem;
}

/* ---------- Pedidos ---------- */
.pedidos-lista {
  display: grid;
  gap: 0.8rem;
  margin-top: 1.8rem;
}

.pedido-fila {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.2rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radio);
}

.pedido-codigo { font-weight: 600; }
.pedido-fecha { display: block; font-size: 0.83rem; color: var(--text-muted); }
.pedido-total { font-weight: 700; }

.badge-estado { background: var(--surface-alt); color: var(--text-muted); }
.badge-estado-pagado,
.badge-estado-entregado { background: var(--verde-100); color: var(--verde-800); }
.badge-estado-pendiente { background: color-mix(in srgb, var(--ambar-500) 20%, var(--surface)); color: var(--ambar-texto); }
.badge-estado-cancelado { background: color-mix(in srgb, var(--error) 14%, var(--surface)); color: var(--error); }

[data-theme="dark"] .badge-estado-pagado,
[data-theme="dark"] .badge-estado-entregado { background: #24331f; color: #9fd8a2; }
[data-theme="dark"] .badge-estado-pendiente { color: #f0c069; }

.pedido-cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-top: 0.8rem;
}

.tabla-detalles {
  width: 100%;
  margin-top: 1.6rem;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radio);
  overflow: hidden;
}

.tabla-detalles th,
.tabla-detalles td {
  padding: 0.8rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
  font-size: 0.95rem;
}

.tabla-detalles tfoot th,
.tabla-detalles tfoot td { border-bottom: none; font-size: 1.05rem; }

.pedido-envio {
  margin-top: 1.6rem;
  padding: 1.3rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radio);
  display: grid;
  gap: 0.4rem;
}

.pedido-pagar { margin-top: 1.6rem; }

/* ---------- Favoritos ---------- */
.favoritos-lista {
  display: grid;
  gap: 0.8rem;
  margin-top: 1.8rem;
}

.favorito-fila {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 1rem;
  padding: 0.8rem 1.1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radio);
}

.favorito-fila img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: var(--radio-sm);
}

.favorito-info { display: grid; }
.favorito-info a { font-weight: 600; color: var(--text); }
.favorito-info a:hover { color: var(--primary); }
.favorito-tipo { font-size: 0.83rem; color: var(--text-muted); }
.favorito-precio { font-weight: 700; }
.favorito-fila .icon-btn { color: var(--error); }

/* ---------- Nosotros ---------- */
.nosotros-grid {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}

@media (min-width: 56rem) {
  .nosotros-grid { grid-template-columns: 1.2fr 1fr; }
}

.nosotros-text { display: grid; gap: 1rem; }
.nosotros-text p { color: var(--text-muted); }

.nosotros-cierre {
  font-weight: 600;
  color: var(--primary) !important;
  font-size: 1.1rem;
}

.nosotros-image {
  border-radius: var(--radio);
  box-shadow: var(--sombra-2);
  justify-self: center;
}

/* ---------- Contacto ---------- */
.contacto-grid {
  display: grid;
  gap: 2.5rem;
}

@media (min-width: 56rem) {
  .contacto-grid { grid-template-columns: 1fr 1.1fr; }
}

.contacto-info { display: grid; gap: 1.1rem; align-content: start; justify-items: start; }
.contacto-info > p { color: var(--text-muted); }

.contacto-datos { display: grid; gap: 0.6rem; }

.contacto-datos li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.95rem;
}

.contacto-datos i { color: var(--primary); font-size: 1.15rem; }

.contacto-form form {
  display: grid;
  gap: 1.1rem;
  padding: 1.7rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radio);
  box-shadow: var(--sombra-1);
}

/* El mapa ocupa todo el ancho del grid (ambas columnas en escritorio),
   como una franja debajo del bloque info + formulario. */
.contacto-mapa {
  grid-column: 1 / -1;
  margin-top: 1rem;
  display: grid;
  gap: 0.8rem;
}

.mapa-marco {
  position: relative;
}

#map {
  width: 100%;
  /* Altura fluida: crece con el ancho de la ventana, con mínimo y máximo
     para verse bien desde móvil hasta pantallas 4K. */
  height: clamp(18rem, 38vw, 34rem);
  border-radius: var(--radio);
  background: var(--surface-alt);
  box-shadow: var(--sombra-1);
  z-index: 1;
}

/* Modo oscuro del mapa: se invierten solo las teselas, no el marcador ni los
   controles. hue-rotate devuelve los colores a su tono original después de la
   inversión (si no, el verde se vería morado). Se usa el mismo mapa de calles
   en ambos temas porque el mapa oscuro de Esri no cubre los zooms altos. */
:root[data-theme="dark"] .leaflet-tile-pane {
  filter: invert(1) hue-rotate(180deg) brightness(0.9) contrast(0.92) saturate(0.55);
}

/* Tarjeta que reemplaza al mapa si Leaflet o las teselas no cargan. */
.mapa-respaldo {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.75rem;
  text-align: center;
  padding: 2rem 1.5rem;
  min-height: clamp(18rem, 38vw, 34rem);
  border: 1px dashed var(--border);
  border-radius: var(--radio);
  background: var(--surface-alt);
}

.mapa-respaldo[hidden] {
  display: none;
}

.mapa-respaldo i {
  font-size: 2.5rem;
  color: var(--primary);
}

.mapa-respaldo p {
  margin: 0;
  max-width: 28rem;
}

/* ---------- Footer ---------- */
.footer {
  margin-top: 5rem;
  background: var(--pie-fondo);
  color: #dfe9dc;
  font-size: 0.93rem;
}

/* El color oscuro del pie vive en --pie-fondo (arriba), asi que aqui ya no
   hace falta repetirlo. */

.footer-grid {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  padding-block: 3.5rem 2.5rem;
}

.footer-brand { display: grid; gap: 1rem; align-content: start; max-width: 22rem; }

.footer-logo {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 1.2rem;
  font-weight: 700;
  color: #fff;
}

.footer-logo img { border-radius: 10px; }

.footer-col { display: grid; gap: 0.8rem; align-content: start; }

.footer-title {
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #9fd8a2;
}

.footer-title-horario { margin-top: 0.8rem; }

.footer-col ul { display: grid; gap: 0.55rem; }

.footer-col a,
.footer-brand p { color: #dfe9dc; }

.footer-col a:hover { color: #fff; text-decoration: underline; }

.footer-col address { font-style: normal; display: grid; gap: 0.55rem; }

.footer-col address p {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}

.footer-col address i { color: #9fd8a2; }

.footer-horario li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  max-width: 16rem;
}

.footer-horario span:last-child { color: #fff; font-weight: 500; }

.footer-social {
  display: flex;
  gap: 0.6rem;
  font-size: 1.25rem;
}

.footer-social a {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  color: #dfe9dc;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  transition: background-color var(--transicion), color var(--transicion),
    transform var(--transicion);
}

.footer-social a:hover {
  background: var(--verde-500);
  color: #fff;
  transform: translateY(-3px);
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-block: 1.2rem;
  font-size: 0.83rem;
}

/* Tres columnas con la del medio realmente centrada: con flex y
   space-between el texto del medio se desplaza segun lo que midan los
   vecinos, y el credito se pidio centrado. */
.footer-bottom-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.6rem;
}
.footer-bottom-inner > :last-child { text-align: right; }

.footer-hecho i { color: #e57373; }

/* ---------- WhatsApp flotante ---------- */
/* Volver arriba: abajo a la izquierda, para no chocar con WhatsApp. Más
   pequeño y discreto que él, porque es una ayuda, no una llamada a la acción. */
.subir-fab {
  position: fixed;
  left: 1.6rem;
  bottom: 1.6rem;
  z-index: 90;
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  font-size: 1.15rem;
  color: var(--primary);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 50%;
  box-shadow: var(--sombra-2);
  cursor: pointer;
  opacity: 0;
  transform: translateY(0.5rem);
  transition: opacity var(--transicion), transform var(--transicion),
    background-color var(--transicion), color var(--transicion);
}

.subir-fab.se-ve {
  opacity: 1;
  transform: translateY(0);
}

.subir-fab:hover {
  color: var(--primary-contrast);
  background: var(--primary);
  border-color: var(--primary);
}

.subir-fab:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

@media (max-width: 30rem) {
  .subir-fab {
    left: 1rem;
    bottom: 1rem;
  }
}

.wa-widget {
  position: fixed;
  right: 1.6rem;
  bottom: 1.6rem;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.wa-fab {
  display: grid;
  place-items: center;
  width: 3.6rem;
  height: 3.6rem;
  font-size: 1.8rem;
  color: #fff;
  background: var(--wa);
  border-radius: 50%;
  box-shadow: var(--sombra-3);
  transition: transform var(--transicion), background-color var(--transicion);
}

.wa-fab:hover {
  transform: scale(1.08);
  background: #1ebe5a;
}

.wa-tooltip {
  padding: 0.6rem 0.9rem;
  font-size: 0.83rem;
  text-align: center;
  color: #fff;
  background: var(--wa);
  border-radius: var(--radio-sm);
  box-shadow: var(--sombra-2);
  animation: tooltip-ciclo 18s infinite;
}

@keyframes tooltip-ciclo {
  0%, 35% { opacity: 1; transform: translateX(0); }
  45%, 95% { opacity: 0; transform: translateX(20px); }
  100% { opacity: 1; transform: translateX(0); }
}

/* ---------- Estados vacíos y errores ---------- */
.empty-state {
  color: var(--text-muted);
  padding: 1.5rem 0;
}

.empty-state-grande {
  display: grid;
  justify-items: center;
  gap: 0.9rem;
  padding: 3.5rem 1rem;
  text-align: center;
}

.empty-state-grande i { font-size: 3rem; color: var(--border); }
.empty-state-grande .btn i { font-size: inherit; color: inherit; }

.empty-state-acciones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}

.error-page {
  display: grid;
  justify-items: center;
  gap: 1rem;
  text-align: center;
  padding-block: 3rem;
}

.error-icono {
  font-size: 3.2rem;
  color: var(--primary);
  opacity: 0.55;
}

.error-enlaces {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.7rem;
  margin-top: 0.6rem;
}

.error-nota {
  margin-top: 1.2rem;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.error-codigo {
  margin: 0;
  font-size: 5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--primary);
  opacity: 0.35;
}

/* ---------- Responsive: navegación móvil ---------- */
@media (max-width: 56rem) {
  .burger { display: flex; }

  .menu {
    position: fixed;
    inset: 4.25rem 0 auto 0;
    background: var(--surface);
    box-shadow: var(--sombra-3);
    transform: translateY(-130%);
    transition: transform 0.3s ease;
    z-index: 99;
  }

  .menu.is-active { transform: translateY(0); }

  .menu-inner {
    flex-direction: column;
    gap: 0;
    padding: 1rem 1.5rem;
  }

  .menu-inner li { border-bottom: 1px solid var(--border); }
  .menu-inner li:last-child { border-bottom: none; }

  .menu-link {
    display: block;
    padding: 0.85rem 0;
    border-bottom: none;
  }

  .btn-navbar { display: none; }

  .carrito-item {
    grid-template-columns: auto 1fr auto;
  }

  .carrito-cantidad { grid-column: 2; }
  .carrito-item-subtotal { grid-column: 3; }

  .pedido-fila { grid-template-columns: 1fr auto; }
}

@media (max-width: 40rem) {
  .toasts { left: 1rem; right: 1rem; max-width: none; }
  .hero { padding-block: 2rem 1rem; }
}

/* ============================================================
   COMPONENTES R2: páginas propias, auth, reseñas, CTA, panel
   ============================================================ */

/* ---------- Cabecera de página interior ---------- */
.page-hero {
  padding-block: 2.8rem 2.2rem;
  background: linear-gradient(180deg, var(--surface-alt), var(--bg));
}

.page-hero .heading-xl { margin-block: 0.4rem 0.5rem; }

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.9rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--primary);
  background: var(--surface-alt);
  border-radius: 999px;
  width: fit-content;
}

/* ---------- Secciones nuevas de la home ---------- */
.section-head-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  max-width: none;
}

.section-head-centro {
  text-align: center;
  margin-inline: auto;
}

.bienvenida-inner {
  display: grid;
  justify-items: center;
  gap: 1.1rem;
  text-align: center;
  max-width: 44rem;
}

.bienvenida-inner p { color: var(--text-muted); font-size: 1.05rem; }

.features-grid {
  display: grid;
  gap: 1.4rem;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

.feature {
  display: grid;
  gap: 0.6rem;
  justify-items: center;
  text-align: center;
  padding: 1.8rem 1.4rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radio);
  transition: transform var(--transicion), box-shadow var(--transicion);
}

.feature:hover {
  transform: translateY(-5px);
  box-shadow: var(--sombra-2);
}

.feature i {
  display: grid;
  place-items: center;
  width: 3.2rem;
  height: 3.2rem;
  font-size: 1.6rem;
  color: var(--primary);
  background: var(--surface-alt);
  border-radius: 50%;
}

.feature h3 { font-size: 1.05rem; }
.feature p { font-size: 0.9rem; color: var(--text-muted); }

.opiniones-grid {
  display: grid;
  gap: 1.4rem;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.opinion {
  display: grid;
  gap: 0.8rem;
  align-content: start;
  padding: 1.6rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radio);
  box-shadow: var(--sombra-1);
}

.opinion p { font-style: italic; color: var(--text); }

.opinion footer {
  display: grid;
  font-size: 0.87rem;
}

.opinion footer span { color: var(--text-muted); }

/* ---------- CTA ---------- */
.cta-section {
  background: linear-gradient(135deg, var(--verde-700), var(--verde-900));
  color: #fff;
  border-radius: 0;
}

.cta-inner {
  display: grid;
  justify-items: center;
  gap: 1rem;
  text-align: center;
  max-width: 46rem;
}

.cta-inner p { color: #d9ead7; font-size: 1.05rem; }

.cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.9rem;
  margin-top: 0.5rem;
}

.btn-light {
  background: #fff;
  color: var(--verde-800);
  box-shadow: var(--sombra-2);
}

.btn-light:hover { background: #eef6ec; }

.btn-ghost-light {
  border-color: rgba(255, 255, 255, 0.6);
  color: #fff;
  background: transparent;
}

.btn-ghost-light:hover { background: rgba(255, 255, 255, 0.12); }

/* ---------- Autenticación ---------- */
.auth-page {
  display: grid;
  place-items: center;
  padding: 3.5rem 1.25rem 4.5rem;
  min-height: 70vh;
}

.auth-card {
  width: 100%;
  max-width: 27rem;
  padding: 2.4rem 2.2rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--sombra-3);
  display: grid;
  gap: 0.9rem;
  animation: aparecer 0.4s ease;
}

.auth-card form { display: grid; gap: 1.05rem; }

.auth-card-centro { justify-items: center; text-align: center; }

.auth-logo { justify-self: center; border-radius: 14px; }

.auth-titulo {
  font-size: 1.55rem;
  font-weight: 700;
  text-align: center;
}

.auth-subtitulo {
  font-size: 0.93rem;
  color: var(--text-muted);
  text-align: center;
  margin-bottom: 0.4rem;
}

.auth-icono-grande {
  font-size: 3.2rem;
  color: var(--primary);
}

.auth-icono-error { color: var(--error); }

.input-icon { position: relative; }

.input-icon i {
  position: absolute;
  left: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 1.05rem;
  pointer-events: none;
}

.input-icon input { padding-left: 2.5rem; }

.label-fila {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.auth-olvide { font-size: 0.83rem; }

.auth-alt {
  text-align: center;
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-top: 0.3rem;
}

.form-fila-2 {
  display: grid;
  gap: 1.05rem;
  grid-template-columns: 1fr 1fr;
}

.opcional { font-weight: 400; color: var(--text-muted); font-size: 0.82rem; }

@media (max-width: 30rem) {
  .form-fila-2 { grid-template-columns: 1fr; }
  .auth-card { padding: 1.8rem 1.3rem; }
}

/* ---------- Resumen de reseñas ---------- */
.resenas-resumen {
  display: grid;
  gap: 2rem;
  padding: 1.6rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radio);
  max-width: 44rem;
}

@media (min-width: 36rem) {
  .resenas-resumen { grid-template-columns: auto 1fr; }
}

.resumen-nota {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 0.3rem;
}

.resumen-numero {
  font-size: 3rem;
  font-weight: 700;
  line-height: 1;
  color: var(--primary);
}

.resumen-total { font-size: 0.85rem; color: var(--text-muted); }

.resumen-barras { display: grid; gap: 0.45rem; align-content: center; }

.barra-fila {
  display: grid;
  grid-template-columns: 2.2rem 1fr 2rem;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.85rem;
}

.barra-etiqueta { color: var(--text-muted); }

.barra {
  height: 0.6rem;
  background: var(--surface-alt);
  border-radius: 999px;
  overflow: hidden;
}

.barra-relleno {
  height: 100%;
  background: var(--star);
  border-radius: 999px;
  transition: width 0.6s ease;
}

.barra-cantidad { color: var(--text-muted); text-align: right; }

.resena-avatar {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  font-weight: 700;
  color: var(--primary-contrast);
  background: var(--primary);
  border-radius: 50%;
}

.seccion-relacionados {
  margin-top: 3rem;
  display: grid;
  gap: 1.4rem;
}

/* ---------- Pantallas grandes (FHD / 2K / 4K) ---------- */
@media (min-width: 90rem) {
  :root { --ancho-max: 85rem; }

  .cards-grid { grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }

  .hero { padding-block: 5rem 3rem; }
  .hero-image { max-width: 38rem; }
}

@media (min-width: 110rem) {
  :root { --ancho-max: 100rem; }

  body { font-size: 1.0625rem; }

  .cards-grid { grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); }

  .carousel-viewport { max-height: 34rem; }
  .section { padding-block: 5.5rem 4.5rem; }
}

@media (min-width: 150rem) {
  :root { --ancho-max: 118rem; }

  body { font-size: 1.125rem; }

  .cards-grid { grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr)); }
}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   R4: Scroll reveal, glow, formularios más anchos
   ============================================================ */

/* ---------- Scroll reveal ----------
   Los estados ocultos SOLO aplican cuando el JS marcó .reveal-ready en <html>
   (y el usuario no pidió movimiento reducido). Sin JS todo se ve normal. */
.reveal-ready [data-reveal] {
  opacity: 0;
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal-ready [data-reveal="up"] { transform: translateY(2.4rem); }
.reveal-ready [data-reveal="left"] { transform: translateX(-2.4rem); }
.reveal-ready [data-reveal="right"] { transform: translateX(2.4rem); }
.reveal-ready [data-reveal="zoom"] { transform: scale(0.92); }
.reveal-ready [data-reveal="fade"] { transform: none; }

.reveal-ready [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

/* Retardos escalonados para elementos en grupo (data-reveal-delay="1..4") */
.reveal-ready [data-reveal-delay="1"] { transition-delay: 0.08s; }
.reveal-ready [data-reveal-delay="2"] { transition-delay: 0.16s; }
.reveal-ready [data-reveal-delay="3"] { transition-delay: 0.24s; }
.reveal-ready [data-reveal-delay="4"] { transition-delay: 0.32s; }

/* Al revelarse, se libera will-change para no gastar memoria de más. */
.reveal-ready [data-reveal].is-revealed { will-change: auto; }

/* ---------- Glow verde en títulos destacados ----------
   Sutil, sin dificultar la lectura. Más visible en modo oscuro. */
.text-glow {
  text-shadow: 0 0 22px rgba(67, 160, 71, 0.28);
}

[data-theme="dark"] .text-glow {
  text-shadow: 0 0 24px rgba(91, 179, 95, 0.45);
}

/* ---------- Formularios de autenticación más anchos ----------
   Aprovecha mejor el espacio horizontal en monitores grandes sin perder
   legibilidad ni la experiencia móvil. */
.auth-card { max-width: 32rem; }

@media (min-width: 64rem) {
  .auth-card { max-width: 34rem; }
}

/* Perfil: contenedor cómodo para el formulario a dos columnas */
.container-perfil { max-width: 52rem; }

.form-fieldset {
  border: 1px solid var(--border);
  border-radius: var(--radio);
  padding: 1.2rem 1.3rem 1.4rem;
  display: grid;
  gap: 1.05rem;
  margin: 0;
}

.form-fieldset legend {
  padding: 0 0.5rem;
  font-weight: 600;
  color: var(--primary);
  font-size: 0.95rem;
}

/* ---------- Checkout: datos faltantes ---------- */
.checkout-faltantes {
  display: grid;
  gap: 0.35rem;
  margin: 0.6rem 0 1rem;
}

.checkout-faltantes li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.92rem;
}

.checkout-faltantes i { color: var(--error); }

.checkout-aviso {
  display: grid;
  gap: 0.3rem;
  margin-top: 1.2rem;
}

.checkout-aviso .btn { margin-top: 0.4rem; justify-self: start; }

/* ---------- Carrito en vivo ---------- */
/* El aviso de stock ocupa su propia línea dentro de la fila (grid de 5 columnas). */
.carrito-error {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 0.85rem;
  color: var(--error);
}

/* Mientras viaja la petición la fila se atenúa: el usuario ve que algo ocurre. */
.carrito-item.esta-cargando {
  opacity: 0.55;
  transition: opacity var(--transicion);
}

/* ---------- Datos personales (ley 21.719) ---------- */
.form-consentimiento {
  display: grid;
  gap: 0.6rem;
  margin: 1.2rem 0;
}

.form-check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.6rem;
  align-items: start;
  font-size: 0.9rem;
  line-height: 1.45;
  cursor: pointer;
}

.form-check input[type="checkbox"] {
  width: 1.05rem;
  height: 1.05rem;
  margin-top: 0.15rem;
  accent-color: var(--primary);
  cursor: pointer;
}

.datos-personales {
  margin-top: 2rem;
  padding: 1.4rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radio);
}

.datos-personales p {
  color: var(--text-muted);
  margin: 0.5rem 0 1.1rem;
}

.datos-acciones,
.form-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}

.form-acciones {
  margin-top: 1.2rem;
}

/* Botón de acción destructiva: se distingue del resto sin gritar. */
.btn-peligro {
  color: var(--error);
  background: transparent;
  border: 1px solid currentColor;
}

.btn-peligro:hover {
  color: #fff;
  background: var(--error);
  border-color: var(--error);
}

.lista-detalle {
  display: grid;
  gap: 0.6rem;
  margin: 0.8rem 0 1.2rem;
  padding: 0;
  list-style: none;
}

.lista-detalle li {
  position: relative;
  padding-left: 1.75rem;
  line-height: 1.55;
}

.lista-detalle i {
  position: absolute;
  left: 0;
  top: 0.2rem;
  color: var(--text-muted);
}

/* Tabla de la política de privacidad: legible y con scroll propio en móvil. */
.tabla-scroll {
  overflow-x: auto;
  margin: 1rem 0 1.4rem;
}

.tabla-legal {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.tabla-legal th,
.tabla-legal td {
  padding: 0.7rem 0.9rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

.tabla-legal thead th {
  background: var(--surface-alt);
  font-weight: 600;
}

.tabla-legal tbody tr:last-child td {
  border-bottom: none;
}

/* ---------- Soporte ---------- */
.soporte-ayuda {
  margin: 0.4rem 0 1.2rem;
  padding: 0.8rem 1rem;
  background: var(--surface-alt);
  border-radius: var(--radio-sm);
  font-size: 0.9rem;
}

.soporte-ayuda summary {
  cursor: pointer;
  font-weight: 500;
}

.soporte-ayuda kbd {
  padding: 0.1rem 0.35rem;
  font-family: inherit;
  font-size: 0.85em;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
}

.reportes-lista {
  display: grid;
  gap: 1.1rem;
  margin-top: 1.5rem;
  padding: 0;
  list-style: none;
}

.reporte-item {
  padding: 1.3rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radio);
}

.reporte-cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}

.reporte-fecha {
  font-size: 0.82rem;
  color: var(--text-muted);
}

.reporte-captura img {
  max-width: 100%;
  margin-top: 0.8rem;
  border: 1px solid var(--border);
  border-radius: var(--radio-sm);
}

/* La respuesta del equipo se distingue del reporte con una barra lateral. */
.reporte-respuesta {
  margin-top: 1rem;
  padding: 0.9rem 1.1rem;
  background: var(--surface-alt);
  border-left: 3px solid var(--primary);
  border-radius: 0 var(--radio-sm) var(--radio-sm) 0;
}

.reporte-respuesta-titulo {
  font-weight: 600;
  color: var(--primary);
  margin-bottom: 0.3rem;
}

.reporte-datos {
  display: grid;
  gap: 0.5rem;
  margin-top: 1.2rem;
  font-size: 0.9rem;
}

.reporte-datos > div {
  display: grid;
  grid-template-columns: 8rem 1fr;
  gap: 0.6rem;
}

.reporte-datos dt {
  font-weight: 600;
  color: var(--text-muted);
}

.reporte-datos dd {
  margin: 0;
  overflow-wrap: anywhere;
}

@media (max-width: 34rem) {
  .reporte-datos > div { grid-template-columns: 1fr; gap: 0.1rem; }
}

/* Estados de los reportes de soporte, en la misma escala del resto. */
.badge-estado-nuevo { background: color-mix(in srgb, var(--ambar-500) 20%, var(--surface)); color: var(--ambar-texto); }
.badge-estado-en_revision { background: color-mix(in srgb, var(--primary) 16%, var(--surface)); color: var(--primary); }
.badge-estado-resuelto { background: var(--verde-100); color: var(--verde-800); }
.badge-estado-cerrado { background: var(--surface-alt); color: var(--text-muted); }

/* Acciones sobre el propio reporte. */
.reporte-acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--border);
}

/* Ocupa el hueco sobrante y así empuja "Eliminar" al otro extremo. */
.reporte-nota {
  flex: 1 1 16rem;
  margin: 0;
  font-size: 0.82rem;
  color: var(--text-muted);
}

/* Borrar no es la acción principal: se ve discreta y solo se tiñe de rojo
   al apuntarla, para que nadie la pulse por inercia. */
.btn-peligro-sutil { color: var(--text-muted); }

.btn-peligro-sutil:hover,
.btn-peligro-sutil:focus-visible {
  color: var(--error);
  border-color: var(--error);
}

/* Aviso cuando el archivo ya no está en el servidor; lo escribe main.js al
   fallar la imagen, en lugar del icono de foto rota del navegador. */
.imagen-perdida {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.8rem;
  padding: 0.7rem 0.9rem;
  font-size: 0.85rem;
  color: var(--text-muted);
  background: var(--surface-alt);
  border: 1px dashed var(--border);
  border-radius: var(--radio-sm);
}

/* ---------- Confirmar un borrado ---------- */
/* Compartido por el panel y por soporte: el contenedor (.panel-card o
   .form-card) ya es una rejilla, aquí solo se centra el contenido. */
.confirmar-eliminar { justify-items: center; text-align: center; }

.confirmar-icono { font-size: 3rem; color: var(--error); }

.confirmar-nota { font-size: 0.88rem; color: var(--text-muted); }

.confirmar-eliminar .form-acciones { justify-content: center; }

/* ---------- Campo de imagen ---------- */
/* Estaban solo en dashboard.css, que la parte pública no carga: sin ellas
   el formulario de soporte mostraba el input de archivo del navegador
   encima del botón propio. */
.campo-imagen {
  display: grid;
  gap: 0.7rem;
}

.campo-imagen-actual {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.9rem;
  align-items: start;
  padding: 0.8rem;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radio-sm);
}

.campo-imagen-miniatura {
  width: 108px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radio-sm);
  background: var(--surface);
}

.campo-imagen-datos {
  display: grid;
  gap: 0.3rem;
}

.campo-imagen-titulo {
  margin: 0;
  font-weight: 600;
  font-size: 0.9rem;
}

.campo-imagen-quitar {
  margin-top: 0.3rem;
}

.campo-imagen-quitar small {
  display: block;
}

/* El input nativo de archivo no se puede tematizar: se oculta sin sacarlo del
   flujo accesible y la etiqueta hace de botón. */
.campo-imagen input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.campo-imagen-subir {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 0.5rem;
  padding: 0.6rem 1.1rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--primary);
  background: transparent;
  border: 1.5px dashed var(--primary);
  border-radius: var(--radio-sm);
  cursor: pointer;
  transition: background var(--transicion), color var(--transicion);
}

.campo-imagen-subir:hover {
  color: var(--primary-contrast);
  background: var(--primary);
  border-style: solid;
}

.campo-imagen input[type="file"]:focus-visible + .campo-imagen-elegido,
.campo-imagen-subir:focus-within {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.campo-imagen-elegido {
  margin: 0;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.campo-imagen-elegido.tiene-archivo {
  color: var(--text);
  font-weight: 500;
}

/* Si el archivo que había ya no está, el aviso ocupa el lugar de la
   miniatura y las dos columnas, que en 108 px no cabría. */
.campo-imagen-actual .imagen-perdida {
  grid-column: 1 / -1;
  margin-top: 0;
}

/* ---------- Videos del aviario ---------- */
.videos-grid {
  display: grid;
  gap: 1.4rem;
  margin-top: 1.8rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
}

.video-card {
  margin: 0;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radio);
  box-shadow: var(--sombra-1);
}

/* aspect-ratio fija el hueco antes de que carguen los metadatos: sin esto la
   página da un salto cuando el navegador descubre el tamaño real del video. */
.video-card video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  object-fit: cover;
}

.video-card figcaption {
  display: grid;
  gap: 0.3rem;
  padding: 0.9rem 1.1rem 1.1rem;
}

.video-titulo {
  font-size: 1.02rem;
  font-weight: 600;
}

.video-card figcaption p {
  font-size: 0.88rem;
  color: var(--text-muted);
}

/* ==========================================================================
   SERVICIOS TI — servicio técnico y desarrollo web
   ==========================================================================
   Es el otro negocio de la familia, así que tiene su propio lenguaje visual:
   una consola. El aviario es verde, cálido y redondeado; esto es azul noche,
   monoespaciado y cuadrado. Que se note el cambio es el objetivo.

   El bloque no depende del tema claro/oscuro del sitio: siempre es oscuro.
   Una terminal en blanco no se lee como una terminal, y la idea es justo que
   se vea "de informático" en las dos versiones de la página.

   Truco que evita media hoja de sobreescrituras: dentro de este ámbito se
   REDEFINEN los tokens semánticos del sitio (--surface, --text, --border,
   --primary...). Así los estilos que ya existen para inputs, focus, errorlist
   y botones se adaptan solos, sin escribir un selector por cada uno.
   -------------------------------------------------------------------------- */
.ti-banda,
.ti-pagina {
  /* Paleta propia */
  --ti-fondo: #070b10;
  --ti-panel: #0d141c;
  --ti-barra-bg: #131c26;
  --ti-borde: #24313f;
  --ti-cian: #45c3f7;
  --ti-verde: #4ade80;
  --ti-texto: #d8e3ef;
  --ti-suave: #92a6bb;
  --ti-mono: ui-monospace, "Cascadia Code", "Cascadia Mono", "Segoe UI Mono",
    Consolas, "Liberation Mono", Menlo, monospace;

  /* Los tokens del sitio, reapuntados dentro de este ámbito. */
  --bg: var(--ti-fondo);
  --surface: var(--ti-panel);
  --surface-alt: var(--ti-barra-bg);
  --text: var(--ti-texto);
  --text-muted: var(--ti-suave);
  --border: var(--ti-borde);
  --primary: var(--ti-cian);
  --primary-hover: #6fd2fa;
  --primary-contrast: #05090d;
  --error: #ff9a9a;

  position: relative;
  color: var(--ti-texto);
  /* Capas de fondo, de arriba hacia abajo:
     1. El fundido hacia el color del pie. Va como capa de FONDO y no como
        pseudo-elemento encima, para que difumine el fondo sin apagar el
        texto que caiga dentro de esos ultimos rem.
     2. Un halo cian arriba.
     3. La cuadricula de plano tecnico, muy tenue: textura, no tabla. */
  background-color: var(--ti-fondo);
  background-image:
    linear-gradient(to bottom, transparent calc(100% - 8rem), var(--pie-fondo)),
    radial-gradient(ellipse 60% 45% at 50% 0%, rgba(69, 195, 247, 0.10), transparent 70%),
    linear-gradient(rgba(146, 166, 187, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(146, 166, 187, 0.05) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 28px 28px, 28px 28px;
}

/* Quitar el margen del pie: era el que dejaba ver el fondo de la pagina como
   una franja clara entre dos zonas oscuras. El fundido hace el resto. */
body:has(.ti-banda) .footer,
body:has(.ti-pagina) .footer { margin-top: 0; }

/* Abajo sobra espacio a proposito: es donde ocurre el fundido. */
.ti-banda { padding-top: 4rem; padding-bottom: 7rem; }

/* ---------- La ventana de consola ---------- */
.ti-consola {
  max-width: 60rem;
  margin-inline: auto;
  overflow: hidden;
  background: var(--ti-panel);
  border: 1px solid var(--ti-borde);
  border-radius: 10px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(69, 195, 247, 0.08),
    0 0 50px rgba(69, 195, 247, 0.06);
}

.ti-barra {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.65rem 0.9rem;
  background: var(--ti-barra-bg);
  border-bottom: 1px solid var(--ti-borde);
}

.ti-semaforo { display: flex; gap: 0.4rem; }
.ti-semaforo b {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: #3b4a5a;
}
.ti-semaforo b:first-child { background: #ff5f57; }
.ti-semaforo b:nth-child(2) { background: #febc2e; }
.ti-semaforo b:last-child { background: #28c840; }

.ti-ruta {
  font-family: var(--ti-mono);
  font-size: 0.78rem;
  color: var(--ti-suave);
  letter-spacing: 0.02em;
}

.ti-cuerpo { padding: 2rem 1.9rem 2.2rem; }

/* ---------- Líneas de terminal ---------- */
.ti-cmd,
.ti-out {
  margin: 0;
  font-family: var(--ti-mono);
  font-size: 0.88rem;
  line-height: 1.7;
}
.ti-cmd { color: var(--ti-texto); }
.ti-dolar {
  color: var(--ti-verde);
  margin-right: 0.45rem;
  font-weight: 700;
}
.ti-out {
  color: var(--ti-suave);
  padding-left: 1.15rem;
  margin-bottom: 1.4rem;
}
.ti-cmd-final { margin-top: 1.8rem; margin-bottom: 1rem; }

.ti-cursor {
  display: inline-block;
  width: 0.55em;
  height: 1.05em;
  margin-left: 0.15em;
  vertical-align: text-bottom;
  background: var(--ti-verde);
  animation: ti-parpadeo 1.1s steps(1) infinite;
}
@keyframes ti-parpadeo { 50% { opacity: 0; } }

/* ---------- Títulos ---------- */
.ti-titulo,
.ti-h1,
.ti-h2 {
  font-family: var(--ti-mono);
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.ti-titulo {
  margin: 0 0 0.9rem;
  font-size: clamp(1.5rem, 3.6vw, 2.25rem);
  font-weight: 700;
}
.ti-op { color: var(--ti-cian); font-weight: 400; }

.ti-bajada {
  max-width: 46rem;
  margin: 0;
  color: var(--ti-suave);
  font-size: 1rem;
  line-height: 1.7;
}

/* ---------- Etiquetas de servicios (portada) ---------- */
.ti-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}
.ti-chips li {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.75rem;
  font-family: var(--ti-mono);
  font-size: 0.78rem;
  color: var(--ti-texto);
  background: rgba(69, 195, 247, 0.07);
  border: 1px solid rgba(69, 195, 247, 0.22);
  border-radius: 999px;
}
.ti-chips i { color: var(--ti-cian); font-size: 1rem; }

/* ---------- Botón ---------- */
.ti-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 1.4rem;
  font-family: var(--ti-mono);
  font-size: 0.9rem;
  font-weight: 600;
  color: #05090d;
  background: var(--ti-cian);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background var(--transicion), transform var(--transicion),
    box-shadow var(--transicion);
}
.ti-btn:hover,
.ti-btn:focus-visible {
  background: #6fd2fa;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(69, 195, 247, 0.32);
}

/* ---------- Página propia ---------- */
.ti-pagina { padding-bottom: 7.5rem; }

.ti-hero { padding: 3.2rem 0 2.6rem; }
.ti-breadcrumb { color: var(--ti-suave); }
.ti-breadcrumb a { color: var(--ti-cian); }

.ti-kicker {
  margin: 0.8rem 0 0.7rem;
  font-family: var(--ti-mono);
  font-size: 0.85rem;
  color: var(--ti-suave);
}
.ti-h1 {
  margin: 0 0 1.1rem;
  font-size: clamp(1.9rem, 6vw, 3.1rem);
  font-weight: 700;
}
.ti-lead {
  max-width: 44rem;
  margin: 0;
  color: var(--ti-suave);
  font-size: 1.05rem;
  line-height: 1.75;
}
.ti-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
  margin-top: 1.6rem;
  font-family: var(--ti-mono);
  font-size: 0.82rem;
  color: var(--ti-texto);
}
.ti-hero-meta i { color: var(--ti-verde); margin-right: 0.35rem; }

.ti-seccion { padding-block: 2.4rem; }
.ti-h2 {
  margin: 0 0 1.5rem;
  font-size: clamp(1.25rem, 3vw, 1.6rem);
  font-weight: 700;
}
.ti-hash { color: var(--ti-cian); }

/* ---------- Tarjetas de servicio ---------- */
.ti-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: 1.2rem;
}
.ti-card {
  padding: 1.6rem 1.5rem;
  background: var(--ti-panel);
  border: 1px solid var(--ti-borde);
  border-radius: 10px;
  transition: border-color var(--transicion), transform var(--transicion);
}
.ti-card:hover {
  border-color: rgba(69, 195, 247, 0.45);
  transform: translateY(-3px);
}
.ti-card > i {
  display: block;
  font-size: 1.9rem;
  color: var(--ti-cian);
  margin-bottom: 0.7rem;
}
.ti-card h3 {
  margin: 0 0 0.9rem;
  font-family: var(--ti-mono);
  font-size: 1.1rem;
  color: #fff;
}
.ti-card ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.5rem;
}
.ti-card li {
  position: relative;
  padding-left: 1.25rem;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ti-suave);
}
/* Viñeta de terminal en vez de punto: sigue el mismo idioma visual. */
.ti-card li::before {
  content: "\203A";
  position: absolute;
  left: 0;
  top: -0.05rem;
  color: var(--ti-verde);
  font-family: var(--ti-mono);
  font-weight: 700;
}

.ti-nota {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin: 1.5rem 0 0;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--ti-suave);
}
.ti-nota i { color: var(--ti-verde); font-size: 1.05rem; }
.ti-nota a { color: var(--ti-cian); }
.ti-nota-wa { justify-content: center; text-align: center; margin-top: 1.4rem; }

/* ---------- Formulario ---------- */
.ti-form { display: grid; gap: 1.2rem; }
.ti-form label,
.ti-form legend {
  font-family: var(--ti-mono);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ti-texto);
}
.ti-form-fila {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1.2rem;
}

.ti-fieldset {
  margin: 0;
  padding: 0;
  border: none;
}
.ti-fieldset legend { padding: 0; margin-bottom: 0.7rem; }

.ti-radios { display: grid; gap: 0.55rem; }
.ti-radio {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.7rem 0.9rem;
  background: rgba(146, 166, 187, 0.05);
  border: 1px solid var(--ti-borde);
  border-radius: 6px;
  cursor: pointer;
  transition: border-color var(--transicion), background var(--transicion);
}
.ti-radio:hover { border-color: rgba(69, 195, 247, 0.4); }
/* :has() deja marcar la opción elegida sin una línea de JavaScript. */
.ti-radio:has(input:checked) {
  border-color: var(--ti-cian);
  background: rgba(69, 195, 247, 0.09);
}
.ti-radio input { accent-color: var(--ti-cian); width: auto; }
.ti-radio span { font-family: inherit; font-weight: 400; font-size: 0.92rem; }

.ti-ayuda {
  margin-top: -0.15rem;
  font-size: 0.78rem;
  color: var(--ti-suave);
}
.ti-btn-enviar { justify-self: start; }
.ti-form-pie {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  font-size: 0.8rem;
  color: var(--ti-suave);
}

/* ---------- Teléfono ---------- */
@media (max-width: 40rem) {
  .ti-banda { padding-top: 2.6rem; padding-bottom: 5.5rem; }
  .ti-cuerpo { padding: 1.5rem 1.15rem 1.7rem; }
  .ti-ruta { font-size: 0.7rem; }
  .ti-hero { padding: 2.2rem 0 1.8rem; }
  .ti-hero-meta { gap: 0.6rem 1.2rem; }
  .ti-btn { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .ti-cursor { animation: none; }
  .ti-card:hover,
  .ti-btn:hover,
  .ti-btn:focus-visible { transform: none; }
}

/* ---------- Credito del footer ---------- */
.footer-credito {
  font-size: 0.76rem;
  color: rgba(255, 255, 255, 0.55);
  text-align: center;
  white-space: nowrap;
}
.footer-credito a { color: rgba(255, 255, 255, 0.75); }
.footer-credito a:hover { color: #fff; }

@media (max-width: 52rem) {
  .footer-bottom-inner {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  .footer-bottom-inner > :last-child { text-align: center; }
  .footer-credito { white-space: normal; }
}

/* ---------- Código de acceso (doble factor del equipo) ---------- */
/* Grande, espaciado y centrado: seis cifras se leen y se escriben sin
   confundir un 1 con un 7, también en el celular.
   El selector es más específico a propósito: la regla general de los campos,
   input[type="text"], pesa más que una clase sola y le pisaba la letra y el
   tamaño (salía en Poppins y chico). */
.auth-card input.input-codigo {
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 1.6rem;
  letter-spacing: 0.35em;
  text-align: center;
}

/* Un botón que se ve como enlace: para acciones que envían algo (POST) y
   por eso no pueden ser un <a>. */
.boton-enlace {
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: var(--primary);
  background: none;
  border: none;
  text-decoration: underline;
  cursor: pointer;
}
.boton-enlace:hover { color: var(--primary-hover); }