/*
 * Layout general del sitio — LegalizaTuPredio.
 * Usa los tokens (tokens.css) y componentes (components.css) definidos antes.
 */

html{ box-sizing:border-box; -webkit-text-size-adjust:100%; }
*, *::before, *::after{ box-sizing:inherit; }

body{
  margin:0; font-family:var(--font-body); color:var(--text-primary); background:var(--bg-primary);
  font-size:var(--text-base); line-height:1.6;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:var(--text-primary); }

/* Requerido por WordPress para accesibilidad (skip link, etc.) */
.screen-reader-text{
  border:0; clip:rect(1px,1px,1px,1px); clip-path:inset(50%); height:1px; margin:-1px; overflow:hidden;
  padding:0; position:absolute !important; width:1px; word-wrap:normal !important;
}
.screen-reader-text:focus{
  background:#fff; border-radius:var(--radius-sm); box-shadow:var(--shadow-3); clip:auto !important; clip-path:none;
  color:var(--text-primary); display:block; font-size:var(--text-sm); font-weight:700; height:auto;
  left:8px; line-height:normal; padding:12px 16px; text-decoration:none; top:8px; width:auto; z-index:1000000;
}

.ltp-container{ max-width:1160px; margin:0 auto; padding:0 18px; }
@media (min-width:1024px){ .ltp-container{ padding:0 40px; } }
@media (min-width:1440px){ .ltp-container{ max-width:1280px; } }

/*
 * Utilidad genérica para centrar en escritorio bloques sueltos que no tienen
 * su propio max-width (breadcrumb, cuerpo de artículo usado fuera de
 * .ltp-article-layout, filas de botones, etc.). No hace nada en móvil/tablet
 * a propósito, para no tocar el layout que ya se ve bien ahí.
 */
@media (min-width:1024px){
  .ltp-desktop-frame{ max-width:1160px; margin:0 auto; padding-left:56px; padding-right:56px; }
}
@media (min-width:1440px){ .ltp-desktop-frame{ max-width:1280px; } }

main{ display:block; padding-bottom:90px; } /* espacio para el bottom nav fijo en móvil */
@media (min-width:1024px){ main{ padding-bottom:0; } }

/*
 * IMPORTANTE: .ltp-hero, .ltp-quick-grid y .ltp-section se usan directamente
 * en las plantillas SIN un <div class="ltp-container"> envolvente (para no
 * tener que tocar cada plantilla). Por eso cada uno define su propio
 * max-width + centrado + padding lateral en escritorio — si solo se
 * usara "padding:0" ahí, el contenido queda pegado al borde izquierdo.
 */

/* ---------- Hero genérico (Inicio, landings de servicio) ---------- */
.ltp-hero{ padding:40px 18px 18px; }
@media (min-width:640px){ .ltp-hero{ padding-left:36px; padding-right:36px; } }
@media (min-width:1024px){
  .ltp-hero{ max-width:1160px; margin:0 auto; padding-left:56px; padding-right:56px; }
}
@media (min-width:1440px){ .ltp-hero{ max-width:1280px; } }
.ltp-hero .ltp-eyebrow{ color:var(--accent-strong); font-weight:700; font-size:11px; letter-spacing:.08em; text-transform:uppercase; }
.ltp-hero h1{ font-family:var(--font-display); font-size:32px; line-height:1.05; margin:8px 0 10px; }
.ltp-hero p{ font-size:14px; color:var(--text-secondary); line-height:1.5; margin:0 0 22px; }
@media (min-width:640px){ .ltp-hero h1{ font-size:40px; } }
@media (min-width:1024px){ .ltp-hero h1{ font-size:56px; } }

.ltp-cta-full{
  width:100%; background:var(--color-black); color:#fff; border:none; padding:14px; border-radius:var(--radius-full);
  font-weight:700; font-size:14px; display:flex; align-items:center; justify-content:center; gap:8px; cursor:pointer;
  font-family:var(--font-body); text-decoration:none; margin:0;
}

/*
 * Variante "amarilla" del CTA, usada solo en el hero de Inicio (debajo del
 * buscador) para que sea el elemento más llamativo de toda la sección —
 * a propósito una clase aparte (no se toca .ltp-cta-full base) para no
 * afectar el CTA de /recursos, /servicios ni single-servicio.php, que
 * siguen usando el estilo oscuro original.
 */
.ltp-cta-accent{
  background:var(--accent); color:var(--color-black); box-shadow:0 6px 20px rgba(0,0,0,.14);
  transition:transform var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}
.ltp-cta-accent:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(0,0,0,.18); }
.ltp-cta-accent svg{ stroke:var(--color-black); }

/* Variante "contorno": para un segundo CTA debajo del principal (ej. "Haz tu
   pregunta" bajo "Habla con nosotros") sin competir visualmente con el
   amarillo — mismo tamaño/forma que .ltp-cta-full pero discreto. */
.ltp-cta-outline{
  background:transparent; color:var(--text-primary); border:1.5px solid var(--border-subtle);
  transition:border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}
.ltp-cta-outline:hover{ border-color:var(--color-black); }

/* ---------- Accesos rápidos / grid de secciones ---------- */
.ltp-quick-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; padding:24px 18px 14px; }
@media (min-width:640px){ .ltp-quick-grid{ grid-template-columns:repeat(4,1fr); padding-left:36px; padding-right:36px; } }
@media (min-width:1024px){
  .ltp-quick-grid{
    max-width:1160px; margin:50px auto; padding-left:56px; padding-right:56px; gap:18px;
  }
}
@media (min-width:1440px){ .ltp-quick-grid{ max-width:1280px; } }
.ltp-quick-grid a{
  text-decoration:none; color:var(--color-black); background:var(--bg-primary); border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg); padding:16px; display:flex; flex-direction:column; gap:8px;
  transition:box-shadow var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard);
}
.ltp-quick-grid a:hover{ box-shadow:var(--shadow-3); transform:translateY(-4px); }
.ltp-quick-grid .ic-wrap{ width:34px; height:34px; border-radius:10px; background:var(--accent); display:flex; align-items:center; justify-content:center; }
.ltp-quick-grid b{ font-size:13.5px; }

/* ---------- Secciones de contenido (listados horizontales en móvil) ---------- */
.ltp-section{ padding:18px; }
@media (min-width:640px){ .ltp-section{ padding-left:36px; padding-right:36px; } }
@media (min-width:1024px){
  .ltp-section{ max-width:1160px; margin:50px auto; padding-left:56px; padding-right:56px; }
}
@media (min-width:1440px){ .ltp-section{ max-width:1280px; } }
.ltp-section-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.ltp-section-head h2{ font-size:18px; margin:0; }
@media (min-width:1024px){ .ltp-section-head h2{ font-size:26px; } }
.ltp-section-head a{ font-size:12px; color:var(--text-secondary); text-decoration:none; }

/*
 * A propósito, .ltp-hscroll sigue siendo un carrusel deslizable en TODOS
 * los tamaños de pantalla (antes se convertía en una cuadrícula fija en
 * escritorio) — así "Últimos artículos" y "Aplicativos destacados" se
 * deslizan igual en escritorio que en móvil.
 */
.ltp-hscroll{ display:flex; gap:12px; overflow-x:auto; padding-bottom:6px; scroll-behavior:smooth; -webkit-overflow-scrolling:touch; }
.ltp-hscroll .ltp-card{ min-width:200px; max-width:200px; flex-shrink:0; }
.ltp-hscroll .ltp-card-servicio{ min-width:230px; max-width:230px; flex-shrink:0; }
@media (min-width:1024px){
  .ltp-hscroll{ gap:20px; }
  .ltp-hscroll .ltp-card{ min-width:260px; max-width:260px; }
  .ltp-hscroll .ltp-card-servicio{ min-width:290px; max-width:290px; }
}

/* Envoltorio con flechas de navegación (solo visibles/útiles en escritorio;
   en móvil basta con el gesto de deslizar con el dedo). */
.ltp-carousel{ position:relative; }
.ltp-carousel-btn{
  display:none; position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:36px; height:36px; border-radius:50%; border:1px solid var(--border-subtle);
  background:#fff; box-shadow:var(--shadow-2); font-size:18px; line-height:1; cursor:pointer;
  align-items:center; justify-content:center; color:var(--color-black);
}
@media (min-width:1024px){
  .ltp-carousel-btn{ display:flex; }
  .ltp-carousel-prev{ left:-18px; }
  .ltp-carousel-next{ right:-18px; }
}

/* Carrusel de testimonios (Inicio): mismo patrón de scroll horizontal en
   móvil que .ltp-hscroll, pero aparte para no heredar los tamaños pensados
   para tarjetas de artículo/aplicativo. */
/* ---------- Estadísticas animadas ("+100 predios legalizados"), Inicio ---------- */
.ltp-stats{ display:flex; justify-content:center; gap:14px; flex-wrap:wrap; margin-bottom:28px; }
.ltp-stat{
  flex:1 1 140px; max-width:220px; text-align:center; background:var(--bg-secondary);
  border-radius:var(--radius-lg); padding:22px 14px; box-shadow:var(--shadow-1);
}
.ltp-stat-number{
  font-family:var(--font-display); font-size:38px; line-height:1; color:var(--color-black);
  display:flex; align-items:baseline; justify-content:center; gap:2px;
}
.ltp-stat-plus{ color:var(--accent-strong); }
.ltp-stat-label{
  font-size:11.5px; color:var(--text-secondary); margin-top:8px; text-transform:uppercase; letter-spacing:.04em;
}
@media (min-width:640px){ .ltp-stats{ gap:20px; } }
@media (min-width:1024px){
  .ltp-stats{ gap:32px; margin-bottom:40px; }
  .ltp-stat{ padding:32px 20px; max-width:260px; }
  .ltp-stat-number{ font-size:56px; }
  .ltp-stat-label{ font-size:13px; }
}

/* ---------- Botones de compartir (final del artículo) ---------- */
.ltp-share{ display:flex; align-items:center; gap:10px; padding:4px 18px 20px; flex-wrap:wrap; }
.ltp-share-label{ font-size:12px; color:var(--text-secondary); font-weight:700; }
.ltp-share-btn{
  width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--grey-100); flex-shrink:0; transition:transform var(--duration-fast) var(--ease-standard);
}
.ltp-share-btn:hover{ transform:translateY(-2px); }
.ltp-share-btn .icon{ width:18px; height:18px; }
.ltp-share-fb{ color:#1877F2; }
.ltp-share-wa{ color:#25D366; }
@media (min-width:1024px){ .ltp-share{ padding-left:0; padding-right:0; } }

/* ---------- "Síguenos en redes" (CTA de noticias) ---------- */
.ltp-cta-social{ display:flex; justify-content:center; gap:12px; margin-top:4px; }
.ltp-cta-social a{
  width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--grey-100); color:var(--grey-900); flex-shrink:0; transition:transform var(--duration-fast) var(--ease-standard);
}
.ltp-cta-social a:hover{ transform:translateY(-2px); }
.ltp-cta-social .icon{ width:20px; height:20px; }

/* Sigue siendo un carril deslizable en todos los tamaños (no una cuadrícula
   fija en escritorio) porque se mueve solo — ver initTestimonialAutoplay()
   en main.js. */
.ltp-testimonial-scroll{ display:flex; gap:14px; overflow-x:auto; padding-bottom:6px; scroll-behavior:smooth; -webkit-overflow-scrolling:touch; }
.ltp-testimonial-scroll .ltp-testimonial{ min-width:260px; max-width:280px; flex-shrink:0; }
@media (min-width:1024px){
  .ltp-testimonial-scroll{ gap:20px; }
  .ltp-testimonial-scroll .ltp-testimonial{ min-width:320px; max-width:340px; }
}

/* ---------- Artículo (single.php) ---------- */
.ltp-breadcrumb{ display:flex; gap:5px; font-size:11px; color:var(--text-secondary); padding:12px 18px 0; list-style:none; margin:0; }
.ltp-breadcrumb a{ color:var(--text-secondary); text-decoration:none; }
.ltp-breadcrumb a:hover{ color:var(--text-primary); }
.ltp-article-header{ padding:8px 18px 0; }
.ltp-article-header h1{ font-size:23px; font-weight:700; line-height:1.25; margin:0; }
.ltp-article-meta{ display:flex; gap:8px; padding:10px 18px; font-size:11px; color:var(--text-secondary); align-items:center; flex-wrap:wrap; }
.ltp-article-hero-img{ margin:8px 18px; height:180px; border-radius:var(--radius-md); background:linear-gradient(135deg,#111,#3a3a3a); background-size:cover; background-position:center; }
.ltp-article-body{ padding:6px 18px; font-size:15px; line-height:1.8; color:#222; }
.ltp-article-body p{ margin:0 0 16px; }
.ltp-article-body h2{ font-size:22px; margin:32px 0 12px; }
.ltp-article-body h3{ font-size:18px; margin:24px 0 10px; }
.ltp-article-body ul, .ltp-article-body ol{ padding-left:22px; margin:0 0 16px; }

@media (min-width:1024px){
  .ltp-article-layout{ display:grid; grid-template-columns:2fr 1fr; gap:50px; max-width:1160px; margin:0 auto; padding:40px 56px; }
  /*
   * OJO: estos selectores deben ir prefijados con ".ltp-article-layout " para
   * que solo se apliquen dentro de esa rejilla de dos columnas (que ya trae
   * su propio padding). Sin el prefijo, cualquier .ltp-article-body suelto
   * (como en single-aplicativo.php, single-servicio.php o las páginas de
   * Contacto/Nosotros) quedaba con padding:0 y SIN centrar — pegado al
   * borde izquierdo. Ver .ltp-desktop-frame para esos casos sueltos.
   */
  .ltp-article-layout .ltp-breadcrumb,
  .ltp-article-layout .ltp-article-header,
  .ltp-article-layout .ltp-article-meta,
  .ltp-article-layout .ltp-article-body,
  .ltp-article-layout .ltp-app-header-row,
  .ltp-article-layout .ltp-app-cta-row{ padding-left:0; padding-right:0; }
  .ltp-article-header h1{ font-size:36px; }
  .ltp-article-hero-img{ margin-left:0; margin-right:0; height:320px; }
}
@media (min-width:1440px){ .ltp-article-layout{ max-width:1280px; } }

/* Columna "Relacionados" del artículo: en móvil no hereda el padding del
   layout de dos columnas (que solo existe desde 1024px), así que necesita
   el suyo propio; en escritorio la rejilla + su gap ya dan el espacio. */
.ltp-related-aside{ padding:26px 18px 34px; }
@media (min-width:640px){ .ltp-related-aside{ padding-left:36px; padding-right:36px; } }
@media (min-width:1024px){ .ltp-related-aside{ padding:0; } }

/* ---------- Página de servicio (pasos) ---------- */
.ltp-steps{ display:flex; flex-direction:column; gap:8px; }
@media (min-width:1024px){ .ltp-steps{ flex-direction:row; gap:20px; } }
.ltp-step{ background:var(--bg-primary); border:1px solid var(--border-subtle); border-radius:var(--radius-md); padding:14px; display:flex; gap:10px; align-items:center; flex:1; }
.ltp-step .ltp-step-num{ width:36px; height:36px; border-radius:10px; background:var(--accent); color:var(--color-black); font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; }

/* ---------- Buscador / resultados ---------- */
/* En móvil, .ltp-search-layout no es grid (eso solo pasa desde 1024px), así
   que los Filtros y la barra de búsqueda quedaban pegados uno debajo del
   otro sin aire. Se le da su propio espacio abajo al aside en móvil; en
   escritorio el "gap" de la rejilla ya se encarga de separarlos. */
.ltp-search-layout aside{ margin-bottom:22px; }
@media (min-width:1024px){ .ltp-search-layout aside{ margin-bottom:0; } }

.ltp-filters{ display:flex; gap:8px; padding:0 18px 12px; flex-wrap:wrap; }
@media (min-width:640px){ .ltp-filters{ padding-left:36px; padding-right:36px; } }
@media (min-width:1024px){
  .ltp-filters{
    max-width:1160px; margin:0 auto; padding:0 56px 12px; flex-direction:row; align-items:center;
  }
}
@media (min-width:1440px){ .ltp-filters{ max-width:1280px; } }
/*
 * Chips de "Filtros" en /?s=. El contenedor tenía flex-direction:column sin
 * más — como align-items por defecto es "stretch", cada pastilla se
 * estiraba al ancho completo de la barra lateral en vez de medir según su
 * propio texto, y con nombres largos ("Posesión/reivindicación/despojo")
 * quedaban alargadas y amontonadas. En móvil ahora se envuelven en fila
 * como una nube de etiquetas; en escritorio se mantiene la lista vertical
 * (que ahí sí se ve bien, por eso solo se cambia el comportamiento móvil).
 */
.ltp-search-filters{ display:flex; flex-wrap:wrap; gap:8px; }
@media (min-width:1024px){
  .ltp-search-filters{ flex-direction:column; flex-wrap:nowrap; align-items:flex-start; gap:10px; }
}

.ltp-result-row{ display:flex; gap:12px; padding:12px 18px; border-bottom:1px solid var(--border-subtle); align-items:center; text-decoration:none; color:inherit; }
.ltp-result-row .ic-box{ width:42px; height:42px; border-radius:10px; background:var(--grey-100); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.ltp-result-row b{ font-size:12.5px; display:block; margin-top:3px; }
.ltp-search-layout{ padding:18px; }
@media (min-width:640px){ .ltp-search-layout{ padding-left:36px; padding-right:36px; } }
@media (min-width:1024px){
  .ltp-search-layout{ display:grid; grid-template-columns:220px 1fr; gap:40px; max-width:1160px; margin:0 auto; padding:40px 56px; }
}
@media (min-width:1440px){ .ltp-search-layout{ max-width:1280px; } }

/* ---------- WordPress core: formularios de comentarios, alineaciones ---------- */
.alignwide{ max-width:1160px; margin-left:auto; margin-right:auto; }
.alignfull{ max-width:none; width:100%; }
.wp-block-image{ margin:0 0 16px; }

/* ---------- Imagen de cabecera personalizable (Personalizar → Imagen de cabecera) ---------- */
/*
 * En pantallas muy anchas (superwide/4K), width:100% con una altura fija
 * baja producía una franja muy panorámica — object-fit:cover recortaba casi
 * toda la foto para rellenarla. Se soluciona en dos frentes: la altura crece
 * en escalones a partir de cierto ancho de pantalla, y el contenedor deja de
 * crecer después de cierto punto (max-width) para no exagerar el recorte.
 */
.ltp-header-image{ line-height:0; max-width:2400px; margin:0 auto; }
.ltp-header-image img{ width:100%; height:220px; object-fit:cover; object-position:center; display:block; }
@media (min-width:640px){ .ltp-header-image img{ height:300px; } }
@media (min-width:1024px){ .ltp-header-image img{ height:380px; } }
@media (min-width:1440px){ .ltp-header-image img{ height:460px; } }
@media (min-width:1920px){ .ltp-header-image img{ height:540px; } }

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea{
  width:100%; font-family:var(--font-body); font-size:var(--text-base); padding:11px 14px;
  border:1px solid var(--grey-400); border-radius:var(--radius-sm); margin-bottom:12px;
}