/* Lentes Solares (views/lentessolares/content.php). Solo se carga en esa
   página. Colores de la casa: azul marino #0D3C61 y celeste #0795C4.
   `#lentessolares.ls2`: main.css centra todo `#lentessolares` y un id gana a
   una clase suelta. */

#lentessolares.ls2 { --ls-navy: #0D3C61; --ls-cel: #0795C4; --ls-oro: #E0A526; --ls-txt: #475569; --ls-fondo: #f2f6fa;
  text-align: left; color: var(--ls-txt); background: #fff; }
.ls2 *, .ls2 *::before, .ls2 *::after { box-sizing: border-box; }
.ls2 svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ls2 h1, .ls2 h2, .ls2 h3 { margin: 0; text-align: left; }
.ls2 p { margin: 0; text-align: left; }
.ls2 ul { list-style: none; margin: 0; padding: 0; }
/* Casi a todo el ancho: con 1440px quedaba mucho vacío a los costados en monitores grandes. */
.ls2-wrap { max-width: 1800px; margin: 0 auto; padding: 0 40px; }

/* ── Portada: foto | texto ── */
.ls2-hero { display: grid; grid-template-columns: 38% 62%; align-items: stretch; }
.ls2-foto { position: relative; overflow: hidden; min-height: 560px; background: #43b8e0; }
/* La foto es vertical (551×737). Con la columna a media pantalla se agrandaba
   ~1,7 veces y se veía muy de cerca; al achicarla dentro de esa columna
   quedaba un hueco celeste. La columna mide ahora 38 %: la foto la llena con
   ~1,3 aumentos, algo subida (sobraba cielo) y con el brazo del chico entero. */
.ls2-foto > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
/* Degradado hacia el texto, como en la maqueta: la foto se funde con el blanco. */
.ls2-foto::after { content: ""; position: absolute; inset: 0 0 0 auto; width: 18%; background: linear-gradient(90deg, rgba(255,255,255,0), #fff); pointer-events: none; }
.ls2-migas {
  position: absolute; z-index: 1; top: 14px; left: 32px; display: flex; align-items: center; gap: 8px;
  padding: 8px 16px; background: #fff; border-radius: 8px; font-size: 14px; color: var(--ls-navy);
  box-shadow: 0 4px 14px rgba(13, 60, 97, .15);
}
.ls2-migas a { color: var(--ls-navy); text-decoration: none; }
.ls2-migas a:hover { color: var(--ls-cel); }
.ls2-migas span { color: #94a3b8; }
.ls2-migas b { font-weight: normal; color: #64748b; }
.ls2-tags {
  position: absolute; z-index: 1; left: 32px; top: 64%; transform: translateY(-50%);
  padding: 8px 22px !important; border-radius: 12px; background: rgba(13, 43, 72, .82); color: #fff;
  backdrop-filter: blur(4px); box-shadow: 0 10px 30px rgba(0, 0, 0, .2);
}
.ls2-tags li { display: flex; align-items: center; gap: 14px; padding: 14px 0; font-size: 15px; }
.ls2-tags svg { font-size: 26px; }

.ls2-txt { padding: 56px 5vw 48px 3.5vw; align-self: center; }
.ls2-txt h1 { font-size: clamp(40px, 4vw, 62px); line-height: 1; font-weight: bold; color: var(--ls-navy); letter-spacing: .5px; }
.ls2-txt h1 span { color: var(--ls-cel); }
.ls2-txt h1::after { content: ""; display: block; width: 70px; height: 4px; margin: 18px 0 22px; background: var(--ls-oro); border-radius: 2px; }
.ls2-lead { font-size: 18px; line-height: 1.55; }
.ls2-txt h2 { font-size: 21px; font-weight: bold; color: var(--ls-navy); margin: 28px 0 14px; }
.ls2-txt > p:last-child { font-size: 16px; line-height: 1.6; }
.ls2-factores + h2 { padding-top: 22px; border-top: 1px solid #e2e8f0; }

.ls2-factores { display: grid; gap: 12px; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ls2-factores li {
  display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
  padding: 16px 10px 14px; border-radius: 12px; background: var(--ls-fondo); border: 1px solid #e3ebf3;
}
.ls2-factores svg { font-size: 34px; color: var(--ls-navy); margin-bottom: 4px; }
.ls2-factores b { font-size: 15px; line-height: 1.2; color: var(--ls-navy); }
.ls2-factores small { font-size: 13px; line-height: 1.3; color: #64748b; }

/* ── Tipos ── */
.ls2-tipos { background: var(--ls-fondo); padding: 44px 0 40px; }
.ls2-tipos-cab { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ls2-tit { font-size: clamp(26px, 2.2vw, 32px); font-weight: bold; color: var(--ls-navy); }
.ls2-tit::after { content: ""; display: block; width: 56px; height: 4px; margin-top: 10px; background: var(--ls-oro); border-radius: 2px; }
.ls2-btn {
  display: inline-flex; align-items: center; gap: 10px; padding: 11px 24px; border-radius: 999px;
  background: #fff; color: var(--ls-navy); border: 2px solid var(--ls-oro);
  font-size: 15px; font-weight: bold; text-decoration: none; transition: background .15s, color .15s;
}
.ls2-btn:hover { background: var(--ls-oro); color: #fff; }

.ls2-cards { display: grid; gap: 22px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 26px !important; }
.ls2-cards li { display: flex; flex-direction: column; background: #fff; border-radius: 12px; overflow: hidden; padding: 10px; box-shadow: 0 2px 10px rgba(13, 60, 97, .08); transition: transform .15s, box-shadow .15s; }
.ls2-cards li:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(13, 60, 97, .14); }
.ls2-cards figure { margin: 0; height: 190px; border-radius: 8px; background: #fff; display: grid; place-items: center; border: 1px solid #eef2f6; }
/* El lente ocupa siempre la misma parte de la tarjeta (~58 % del ancho, como
   se ve a ~1170 px). Estirada a todo el ancho se veía enorme y recortada; a
   tamaño fijo, en pantallas anchas quedaba chiquita. La foto es cuadrada con
   blanco arriba y abajo: ese blanco es lo que se recorta. */
.ls2-cards figure { overflow: hidden; display: flex; align-items: center; justify-content: center; }
.ls2-cards img { display: block; width: 58%; height: auto; max-width: 340px; }
.ls2-cards li > div { padding: 16px 10px 10px; }
.ls2-cards h3 { font-size: 20px; font-weight: bold; color: var(--ls-navy); margin-bottom: 6px; }
.ls2-cards p { font-size: 15px; line-height: 1.5; }
.ls2-nota { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 30px auto 0 !important; font-size: 17px; color: var(--ls-navy); text-align: center !important; }
.ls2-nota svg { font-size: 28px; color: var(--ls-cel); }

.ls2 .catalogo:not(:empty) { padding: 20px 0; }

/* ── Laptop: los factores no caben en cinco columnas ── */
/* En pantallas medianas el texto es más alto: la foto necesita más ancho para
   no recortar a la chica por la derecha. */
@media (max-width: 1400px) {
  .ls2-hero { grid-template-columns: 46% 54%; }
}
@media (max-width: 1280px) {
  .ls2-factores { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* ── Tablet: foto arriba, texto abajo ── */
@media (max-width: 900px) {
  .ls2-hero { grid-template-columns: 1fr; }
  .ls2-foto { min-height: 440px; }
  .ls2-foto > img { left: 0; transform: none; width: 100%; height: 100%; object-position: center 22%; -webkit-mask-image: none; mask-image: none; }
  .ls2-foto::after { inset: auto 0 0 0; width: auto; height: 22%; background: linear-gradient(180deg, rgba(255,255,255,0), #fff); }
  .ls2-txt { padding: 28px 24px 40px; }
  .ls2-cards { grid-template-columns: 1fr 1fr; }
}
/* ── Móvil ── */
@media (max-width: 600px) {
  .ls2-wrap { padding: 0 16px; }
  .ls2-foto { min-height: 400px; }
  .ls2-migas { left: 16px; font-size: 13px; padding: 7px 12px; }
  .ls2-tags { left: 16px; top: auto; bottom: 64px; transform: none; padding: 4px 14px !important; }
  .ls2-tags li { font-size: 13px; padding: 8px 0; gap: 10px; }
  .ls2-tags svg { font-size: 20px; }
  .ls2-txt { padding: 20px 16px 32px; }
  .ls2-lead { font-size: 16px; }
  .ls2-factores { grid-template-columns: 1fr 1fr; gap: 10px; }
  .ls2-factores li:last-child { grid-column: span 2; }
  .ls2-cards { grid-template-columns: 1fr; }
  .ls2-tipos-cab .ls2-btn { width: 100%; justify-content: center; }
}