/* ============================================================
   KONARTE — Home (rediseño premium, octubre 2026)
   Secciones propias de la home. La paleta, la cabecera, el pie y los botones
   viven en sitio.css, que se carga antes que esta hoja.
   ============================================================ */

/* ── Portada ── */
.portada { position: relative; min-height: 86vh; display: flex; align-items: flex-end; color: var(--color-texto-claro); overflow: hidden; background: var(--color-fondo-oscuro); }
.portada picture, .portada .foto-portada { position: absolute; inset: 0; width: 100%; height: 100%; }
.portada .foto-portada { object-fit: cover; }
.portada::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10, 10, 10, 0.8) 0%, rgba(10, 10, 10, 0.48) 45%, rgba(10, 10, 10, 0.08) 100%); }
.portada .contenedor { position: relative; z-index: 1; width: 100%; padding-bottom: 96px; padding-top: 96px; }
.portada .texto { max-width: 640px; text-shadow: 0 1px 14px rgba(10, 10, 10, 0.45); } /* se lee sobre cualquier foto que se elija en el panel */
.portada h1 { font-size: clamp(2.7rem, 5.4vw, 4.6rem); margin-bottom: 22px; }
.portada .bajada { font-size: 1.12rem; color: rgba(255, 255, 255, 0.88); margin-bottom: 34px; max-width: 540px; }
.portada .botones { display: flex; gap: 14px; flex-wrap: wrap; }
.calificacion { margin-top: 30px; font-size: 0.88rem; color: rgba(255, 255, 255, 0.86); }
.calificacion a { text-decoration: none; }
.calificacion .estrellas { margin-right: 8px; }

/* ── Beneficios ── */
/* ── Por qué Konarte: tarjetas claras con la etiqueta en dos tonos y línea dorada abajo (en celular, carrusel) ── */
.beneficios { padding: 72px 0 0; }
.beneficios h2 { font-style: italic; font-weight: 500; font-size: clamp(2.1rem, 3.4vw, 2.8rem); margin-bottom: 10px; }
.beneficios .bajada { color: var(--color-texto-suave); }
.beneficios-lista { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 32px; }
.beneficio {
  display: flex; flex-direction: column; min-height: 210px; padding: 30px 26px 24px;
  background: var(--color-fondo-alterno); border: 1px solid var(--color-linea); border-bottom: 3px solid var(--color-acento);
}
.beneficio .marca, .simulador .marca { font-family: var(--fuente-texto); font-size: 1.4rem; font-weight: 600; line-height: 1.02; letter-spacing: 0.01em; text-transform: uppercase; margin: 0 0 18px; }
.beneficio .marca span, .simulador .marca span { display: block; }
.beneficio .marca span + span, .simulador .marca span + span { color: var(--color-acento-texto); }
.beneficio .detalle { font-size: 1.05rem; font-weight: 600; }
.beneficio .nota, .simulador .nota { margin-top: 6px; font-size: 0.8rem; line-height: 1.45; color: var(--color-texto-suave); } /* letra chica, como la de las tiendas */
.beneficio .mas { align-self: flex-start; margin-top: auto; padding-top: 22px; font-size: 0.76rem; color: var(--color-texto-suave); text-decoration: underline; text-underline-offset: 3px; }
.beneficio .mas:hover { color: var(--color-enlace); }

/* ── Categorías: mosaico de tarjetas con la foto de fondo y el texto encima (3 arriba, 2 anchas abajo) ── */
/* Tarjetas horizontales: las dos filas con la misma altura (arriba 3 más angostas, abajo 2 más anchas) */
.categorias { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: clamp(270px, 22vw, 320px); gap: 20px; }
.categoria { position: relative; grid-column: span 2; overflow: hidden; background: var(--color-fondo-oscuro); color: var(--color-texto-claro); text-decoration: none; }
.categoria:nth-child(4), .categoria:nth-child(5) { grid-column: span 3; }
.categoria .foto { height: 100%; overflow: hidden; background: var(--color-imagen-vacia); }
.categoria img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s ease; }
.categoria:hover img { transform: scale(1.04); }
/* Velo oscuro de abajo hacia arriba: el texto se lee sobre cualquier foto */
.categoria::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(10, 10, 10, 0.1) 0%, rgba(10, 10, 10, 0.5) 28%, rgba(10, 10, 10, 0.82) 52%, rgba(10, 10, 10, 0.94) 100%);
}
.categoria .texto { position: absolute; left: 28px; right: 28px; bottom: 26px; z-index: 1; }
.categoria .ceja { margin-bottom: 8px; font-size: 0.66rem; letter-spacing: 0.2em; color: var(--color-acento); text-shadow: 0 1px 8px rgba(10, 10, 10, 0.5); }
.categoria h3 { font-size: 2.1rem; margin: 0 0 8px; }
.categoria .descripcion {
  font-size: 0.9rem; line-height: 1.5; color: var(--color-texto-claro-suave); margin: 0 0 10px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.categoria .precio { display: block; font-size: 0.86rem; color: var(--color-texto-claro-suave); }
.categoria .precio strong { color: var(--color-acento); font-weight: 600; }
.categoria .ver { display: inline-block; margin-top: 14px; padding-bottom: 3px; border-bottom: 1px solid var(--color-acento); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }

/* ── Simulador con IA: tarjeta compacta (comparador a la izquierda, texto a la derecha) ── */
.simulador-seccion { padding: 0 0 72px; }
.simulador {
  display: grid; grid-template-columns: 540px 1fr; align-items: center;
  background: var(--color-fondo-alterno); border: 1px solid var(--color-linea); border-bottom: 3px solid var(--color-acento);
}
.simulador .texto { padding: 36px 48px; }
.simulador h2 { font-size: clamp(1.7rem, 2.6vw, 2.2rem); margin-bottom: 12px; }
.simulador .texto > p:not(.marca):not(.nota) { color: var(--color-texto-suave); margin-bottom: 22px; }
.simulador .nota { margin-top: 14px; }

/* Comparador antes y después (lo usa el simulador) */
.comparador { position: relative; aspect-ratio: 4 / 3; overflow: hidden; user-select: none; background: var(--color-imagen-vacia); }
.comparador img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.comparador .despues { clip-path: inset(0 0 0 var(--corte, 50%)); }
.comparador .linea { position: absolute; top: 0; bottom: 0; left: var(--corte, 50%); width: 2px; background: var(--color-fondo); transform: translateX(-1px); pointer-events: none; }
.comparador .linea::after {
  content: "\2194"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 44px; height: 44px;
  border-radius: 50%; background: var(--color-fondo); color: var(--color-texto); display: grid; place-items: center; font-size: 1.1rem;
}
.comparador input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.etiqueta-foto { position: absolute; top: 16px; z-index: 1; pointer-events: none; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; background: rgba(10, 10, 10, 0.72); color: var(--color-texto-claro); padding: 6px 12px; }
.etiqueta-foto--antes { left: 16px; }
.etiqueta-foto--despues { right: 16px; }

/* (los pasos numerados y las preguntas frecuentes están en sitio.css) */

/* ── Motorización ── */
.motor { display: grid; grid-template-columns: 1fr 1fr; min-height: 620px; }
.motor .foto { min-height: 320px; }
.motor .foto img { width: 100%; height: 100%; object-fit: cover; }
.motor .texto { padding: 96px 8vw 96px 72px; display: flex; flex-direction: column; justify-content: center; }
.motor .bajada { color: var(--color-texto-claro-suave); margin: 20px 0 26px; font-size: 1.05rem; }
.lista-motor { list-style: none; padding: 0; margin: 0 0 26px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; }
.lista-motor li { display: flex; gap: 10px; align-items: center; font-size: 0.95rem; }
.lista-motor i { color: var(--color-acento); }
.precio-motor { font-size: 0.86rem; color: rgba(255, 255, 255, 0.62); border-top: 1px solid var(--color-linea-clara); padding-top: 18px; margin-bottom: 30px; }

/* ── Proyectos (galería) ── */
.pestanas { display: flex; gap: 28px; margin-bottom: 32px; border-bottom: 1px solid var(--color-linea); overflow-x: auto; scrollbar-width: none; }
.pestanas::-webkit-scrollbar { display: none; }
.pestanas button {
  background: none; border: 0; padding: 0 0 14px; font-size: 0.78rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-texto-suave); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap;
}
.pestanas button[aria-selected="true"] { color: var(--color-texto); border-color: var(--color-marca); }
.mosaico { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 280px 280px; gap: 16px; }
.mosaico[hidden] { display: none; }
.mosaico button { position: relative; padding: 0; border: 0; overflow: hidden; background: var(--color-imagen-vacia); cursor: zoom-in; }
.mosaico button:first-child { grid-row: span 2; }
.mosaico button:nth-child(2) { grid-column: span 2; }
.mosaico button:nth-child(3):last-child { grid-column: span 2; }
.mosaico button:nth-child(n+5) { display: none; }
.mosaico img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s ease; }
.mosaico button:hover img { transform: scale(1.04); }
.marca-agua { position: absolute !important; top: 10px; left: 10px; z-index: 2; pointer-events: none; opacity: 0.85; width: 25% !important; height: auto !important; object-fit: contain !important; }
.ver-fotos { margin-top: 22px; }
.boton-enlace { background: none; border: 0; border-bottom: 1px solid currentColor; padding: 0 0 4px; cursor: pointer; white-space: normal; line-height: 1.6; } /* en celulares de 360 px se parte en dos renglones */

/* Visor de fotos */
.visor { position: fixed; inset: 0; z-index: 80; background: rgba(10, 10, 10, 0.94); display: none; align-items: center; justify-content: center; }
.visor.abierto { display: flex; }
.visor figure { margin: 0; position: relative; max-width: min(92vw, 1100px); max-height: 82vh; }
.visor figure > img:first-child { max-height: 82vh; width: auto; margin: 0 auto; }
.visor .titulo-visor { position: absolute; top: 18px; left: 24px; color: var(--color-texto-claro); font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; }
.visor button { position: absolute; background: none; border: 0; color: var(--color-texto-claro); cursor: pointer; font-size: 2rem; padding: 12px; line-height: 1; }
.visor .cerrar-visor { top: 8px; right: 12px; }
.visor .anterior { left: 8px; top: 50%; transform: translateY(-50%); }
.visor .siguiente { right: 8px; top: 50%; transform: translateY(-50%); }

/* ── Reseñas ── */
.resenas-total { display: flex; align-items: center; gap: 16px; }
.resenas-total .cifra { font-family: var(--fuente-titulos); font-size: 4.2rem; line-height: 1; }
.resenas-total small { display: block; color: var(--color-texto-suave); font-size: 0.85rem; }
.resenas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; list-style: none; margin: 0; padding: 0; }
.resena { background: var(--color-fondo); padding: 36px 32px; border: 1px solid var(--color-linea); margin: 0; display: flex; flex-direction: column; }
.resena:nth-child(n+4) { display: none; }
.resena blockquote { font-family: var(--fuente-titulos); font-size: 1.35rem; line-height: 1.38; margin: 16px 0 22px; font-weight: 500; flex: 1; }
.resena .autor { font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-texto-suave); }

/* ── Servicios ── */
.servicios { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.servicio { border-top: 2px solid var(--color-texto); padding-top: 26px; }
.servicio > i { font-size: 1.6rem; color: var(--color-marca); }
.servicio h3 { font-size: 1.7rem; margin: 16px 0 10px; }
.servicio p { color: var(--color-texto-suave); margin-bottom: 22px; }

/* ── Preguntas frecuentes ── */

/* ── Contacto ── */
.contacto { display: grid; grid-template-columns: 1fr 1fr; }
.contacto .info { padding: 96px 72px 96px 0; }
.contacto .info h2 { margin-bottom: 30px; }
.dato { display: flex; gap: 16px; padding: 18px 0; border-top: 1px solid var(--color-linea-clara); font-size: 0.95rem; color: var(--color-texto-claro-suave); }
.dato i { color: var(--color-acento); font-size: 1.1rem; }
.dato strong { color: var(--color-texto-claro); display: block; font-weight: 500; }
.dato a { text-decoration: none; }
.dato a:hover { color: var(--color-texto-claro); }
.como-llegar { margin-top: 26px; }
.formulario { background: var(--color-fondo); color: var(--color-texto); padding: 56px 52px; margin: 64px 0; align-self: start; }
.formulario h3 { font-size: 2rem; margin-bottom: 8px; }
.formulario > p { color: var(--color-texto-suave); margin-bottom: 26px; font-size: 0.95rem; }
.campo { margin-bottom: 20px; }
.campo label { display: block; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 8px; }
.campo input, .campo select, .campo textarea {
  width: 100%; border: 0; border-bottom: 1px solid rgba(10, 10, 10, 0.32); padding: 10px 0; font: inherit;
  background: transparent; color: var(--color-texto); border-radius: 0;
}
.campo textarea { resize: vertical; min-height: 70px; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--color-enlace); box-shadow: 0 1px 0 var(--color-enlace); }
.formulario .boton { width: 100%; margin-top: 10px; }
.campo-trampa { position: absolute; left: -9999px; }
.aviso-form { margin-top: 16px; font-size: 0.9rem; color: var(--color-enlace); }
.aviso-form[hidden] { display: none; }
.legal-form { font-size: 0.78rem; color: var(--color-texto-suave); margin-top: 14px; }
.legal-form a { color: var(--color-enlace); }

/* ── Sobre Konarte (texto para buscadores) ── */
.sobre { display: grid; grid-template-columns: 1fr 1.3fr; gap: 72px; }
.leer-mas { display: none; } /* solo en celular, mientras el texto está recogido */
.sobre .texto p { color: var(--color-texto-suave); margin-bottom: 18px; }
.sobre .texto strong { color: var(--color-texto); font-weight: 600; }
.sobre .texto h3 { font-size: 1.5rem; margin: 30px 0 10px; }

/* Pestañas de la galería: difuminado en la orilla mientras haya más a la derecha */
.pestanas.con-mas { -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); }

/* ── Tableta ── */
@media (max-width: 991.98px) {
  .beneficios-lista { grid-template-columns: repeat(2, 1fr); }
  .sobre { grid-template-columns: 1fr; gap: 40px; }
  .motor { grid-template-columns: 1fr; min-height: 0; }
  .motor .foto { height: 380px; }
  .motor .texto { padding: 64px var(--margen-lateral); }
  .contacto { grid-template-columns: 1fr; }
  .contacto .info { padding: 72px 0 0; }
  .formulario { margin: 40px 0 72px; padding: 40px 28px; }
  /* Categorías: dos por fila y Motorizadas a lo ancho al final */
  .simulador { grid-template-columns: 1fr 1fr; }
  .simulador .texto { padding: 28px 32px; }
  .categorias { grid-auto-rows: 280px; }
  .categoria, .categoria:nth-child(4) { grid-column: span 3; }
  .categoria:nth-child(5) { grid-column: span 6; }
  .categoria .texto { left: 22px; right: 22px; bottom: 22px; }
  .categoria h3 { font-size: 1.8rem; }
}

/* ── Celular ── */
@media (max-width: 640px) {
  .portada { min-height: 78vh; }
  .portada::after { background: linear-gradient(0deg, rgba(10, 10, 10, 0.9) 0%, rgba(10, 10, 10, 0.62) 55%, rgba(10, 10, 10, 0.3) 100%); }
  .portada .contenedor { padding-bottom: 48px; }
  .portada .ceja { font-size: 0.64rem; letter-spacing: 0.16em; }
  .portada .bajada { font-size: 1rem; }
  .portada .boton { flex: 1 1 100%; }
  .beneficios { padding-top: 48px; }
  .beneficio { flex: 0 0 74%; scroll-snap-align: start; min-height: 190px; padding: 26px 22px 20px; }
  /* Listas que se deslizan de lado, como en las tiendas en línea */
  .categorias, .resenas, .servicios, .beneficios-lista {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px;
    margin-right: calc(-1 * var(--margen-lateral)); padding-right: var(--margen-lateral); scrollbar-width: none;
  }
  .categorias::-webkit-scrollbar, .resenas::-webkit-scrollbar, .servicios::-webkit-scrollbar, .beneficios-lista::-webkit-scrollbar { display: none; }
  .categoria, .categoria:nth-child(4), .categoria:nth-child(5) { flex: 0 0 86%; scroll-snap-align: start; }
  .categoria .foto { height: auto; aspect-ratio: 4 / 3; } /* también horizontales en el carrusel */
  .categoria h3 { font-size: 1.6rem; }
  .categoria .texto { left: 20px; right: 20px; bottom: 20px; }
  .categoria .ceja { font-size: 0.6rem; letter-spacing: 0.14em; }
  .categoria .descripcion { display: none; } /* tarjeta chica: nombre, precio y enlace; así se ve la foto */
  .resena, .servicio { flex: 0 0 84%; scroll-snap-align: start; }
  .resena:nth-child(n+4) { display: flex; }
  .resena { padding: 28px 24px; }
  .resena blockquote { font-size: 1.2rem; }
  .motor .foto { height: 260px; }
  .lista-motor { grid-template-columns: 1fr; }
  .mosaico { grid-template-columns: 1fr 1fr; grid-template-rows: 230px 160px; gap: 10px; }
  .mosaico button:first-child { grid-column: span 2; grid-row: auto; }
  .mosaico button:nth-child(2), .mosaico button:nth-child(3):last-child { grid-column: auto; }
  .mosaico button:nth-child(n+4) { display: none; }
  .simulador { grid-template-columns: 1fr; }
  .simulador .texto { padding: 24px 22px 26px; }
  .simulador .boton { width: 100%; }
  .simulador-seccion { padding-bottom: 56px; }
  .sobre .recogido .sobre-mas { display: none; }
  .sobre .recogido .leer-mas { display: inline-block; }
}