/* Reformas y Pinturas Laszlo — hoja de estilos global
   Ajustada 1:1 al boceto brandbook/home-laszlo.html
   Nota: Elementor NO imprime las clases CSS de los contenedores, así que las
   secciones se enganchan por su _element_id, que sí se imprime. */

:root{
  --lz-azul:#416DB8;
  --lz-azul-osc:#35599A;
  --lz-oscuro:#16233A;
  --lz-fondo:#F5F8FC;
  --lz-texto:#5B6675;
  --lz-naranja:#FF8A3D;
  --lz-borde:#E4EBF5;
  --lz-overlay:46,54,70;
  /* Margen lateral del contenido. Se usa en cabecera, secciones, pie y blog
     para que todo quede alineado; ajustar aquí y cambia en todo el sitio. */
  --lz-gutter:32px;
}
@media(max-width:700px){:root{--lz-gutter:18px;}}
@media(max-width:520px){:root{--lz-gutter:18px;}}

body{font-family:'Manrope',sans-serif;background:var(--lz-fondo);color:var(--lz-oscuro);line-height:1.5;padding-bottom:74px;}
h1,h2,h3,h4,h5,h6{font-family:'Sora',sans-serif;color:var(--lz-oscuro);line-height:1.2;}
/* El CSS de página de Elementor pinta TODOS los titulares con el color principal
   (.elementor-widget-heading .elementor-heading-title -> --e-global-color-primary).
   Se devuelven al oscuro de marca; las excepciones (eyebrow, chip, tag, número y
   secciones oscuras) van más abajo y ganan por orden o por ID. */
.elementor-widget-heading .elementor-heading-title{color:var(--lz-oscuro);}
img{max-width:100%;height:auto;}
.elementor a{text-decoration:none;}
.elementor-widget-text-editor{color:var(--lz-texto);font-size:15px;}

/* ---------- botones ---------- */
.lz-btn{display:inline-block;padding:13px 24px;border-radius:10px;font-family:'Manrope',sans-serif;font-weight:700;font-size:14px;text-decoration:none;white-space:nowrap;transition:background .25s ease,color .25s ease,box-shadow .2s ease,transform .2s ease;}
.lz-btn-primary{background:var(--lz-azul);color:#fff;box-shadow:0 2px 8px rgba(65,109,184,.22);}
.lz-btn-primary:hover{background:var(--lz-azul-osc);color:#fff;box-shadow:0 8px 20px rgba(65,109,184,.34);transform:translateY(-1px);}
.lz-btn-primary:active{transform:translateY(0);box-shadow:0 2px 8px rgba(65,109,184,.22);}
.lz-btn:focus-visible{outline:3px solid rgba(255,138,61,.75);outline-offset:2px;}
/* botón secundario: solo se usa sobre héroes oscuros, por eso va en blanco y no en azul */
.lz-btn-secondary{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.6);}
.lz-btn-secondary:hover{background:rgba(255,255,255,.12);color:#fff;border-color:#fff;}
.lz-cta-row{display:flex;gap:16px;flex-wrap:wrap;margin-top:4px;}

/* ---------- utilidades de sección ---------- */
.lz-eyebrow .elementor-heading-title{color:var(--lz-azul);font-family:'Manrope',sans-serif;font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase;}
.lz-h2 .elementor-heading-title{font-size:30px;font-weight:700;}
.lz-lead{color:var(--lz-texto);font-size:16px;}

/* ---------- secciones oscuras ---------- */
#como-trabajamos h1,#como-trabajamos h2,#como-trabajamos h3,#como-trabajamos h4,
#comunidades h1,#comunidades h2,#comunidades h3,#comunidades h4{color:#fff;}
#como-trabajamos .elementor-widget-text-editor,
#comunidades .elementor-widget-text-editor{color:#AFC3DE;}
#como-trabajamos .lz-eyebrow .elementor-heading-title,
#comunidades .lz-eyebrow .elementor-heading-title{color:#8FAFDD;}
#como-trabajamos .lz-lead,#comunidades .lz-lead{color:#F5F8FC;}

/* ---------- HERO ----------
   El boceto usa grid 1.15fr/.85fr: con flex + gap las columnas se encogen y
   la tarjeta del formulario sale estrecha. */
/* El degradado del boceto tiene 4 paradas; el control de Elementor sólo admite
   2, así que se pinta aquí sobre la capa de superposición que él genera. */
#inicio::before{
  background-image:linear-gradient(100deg,
    rgba(var(--lz-overlay),.92) 0%,
    rgba(var(--lz-overlay),.78) 38%,
    rgba(var(--lz-overlay),.42) 62%,
    rgba(var(--lz-overlay),.20) 100%)!important;
  opacity:1!important;
}
#hero-row > .e-con-inner{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center;}
#hero-row > .e-con-inner > .e-con{width:auto!important;max-width:none;}

.lz-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);border-radius:100px;padding:8px 16px;font-size:13px;font-weight:600;color:#F5F8FC;width:fit-content;margin-bottom:24px;}
.lz-hero-h1 .elementor-heading-title span{color:var(--lz-naranja);}
.lz-hero-lead{margin-bottom:40px;}
/* Elementor fuerza max-width:100% en los widgets de un contenedor con un selector
   de 4 clases, así que el ancho del texto de apoyo necesita superarlo. */
.elementor.elementor .e-con > .elementor-widget.lz-hero-lead{max-width:460px;}
.lz-trust{display:flex;gap:32px;flex-wrap:wrap;}
.lz-trust div{font-family:'Sora',sans-serif;font-weight:800;font-size:21px;color:#fff;line-height:1.2;}
.lz-trust span{display:block;font-family:'Manrope',sans-serif;font-weight:500;font-size:13px;color:#fff;margin-top:2px;}

/* ---------- formularios ---------- */
.lz-form-card{background:#fff;border-radius:16px;padding:32px 28px;box-shadow:0 20px 50px rgba(20,24,34,.28);}
.lz-form-card h3{font-family:'Sora',sans-serif;font-size:20px;font-weight:700;margin:0 0 6px;}
.lz-form-card p.sub{color:var(--lz-texto);font-size:14px;margin:0 0 22px;}
.lz-field{margin-bottom:16px;}
.lz-field label{display:block;font-size:13px;font-weight:600;color:var(--lz-oscuro);margin-bottom:6px;}
.lz-field input,.lz-field select,.lz-field textarea{width:100%;padding:12px 14px;border:1.5px solid #DCE6F3;border-radius:9px;font-family:'Manrope',sans-serif;font-size:14px;color:var(--lz-oscuro);background:var(--lz-fondo);}
.lz-field input:focus,.lz-field select:focus,.lz-field textarea:focus{outline:none;border-color:var(--lz-azul);}
.lz-field textarea{resize:none;height:70px;}
.lz-check{display:flex;align-items:flex-start;gap:8px;margin-bottom:16px;}
.lz-check input{width:16px;height:16px;min-width:16px;margin-top:2px;accent-color:var(--lz-azul);flex-shrink:0;}
.lz-check label{font-size:12px;font-weight:500;line-height:1.4;color:var(--lz-texto);}
.lz-check a{color:var(--lz-azul);font-weight:600;}
.lz-form button{width:100%;border:none;cursor:pointer;font-family:'Manrope',sans-serif;margin-top:4px;}

/* formulario sobre el azul del pie */
.lz-form-dark{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);border-radius:16px;padding:28px;}
.lz-form-dark .lz-field{margin-bottom:14px;}
.lz-form-dark .lz-field label{color:#F5F8FC;}
.lz-form-dark .lz-field input,.lz-form-dark .lz-field select{border:1.5px solid rgba(255,255,255,.24);color:#fff;background:rgba(255,255,255,.08);}
.lz-form-dark .lz-field input::placeholder{color:#C2D2E8;}
.lz-form-dark .lz-check label{color:#D2E0F1;}
.lz-form-dark .lz-check a{color:#fff;font-weight:700;}
.lz-form-dark .lz-btn-primary{background:#fff;color:var(--lz-azul);box-shadow:0 2px 10px rgba(20,24,34,.18);}
.lz-form-dark .lz-btn-primary:hover{background:#EAF1FB;color:var(--lz-azul);}

/* ---------- tarjetas de servicio (image-box) ---------- */
.lz-card{background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 2px 14px rgba(62,79,110,.06);height:100%;}
.lz-card .elementor-image-box-wrapper{display:block;text-align:left;}
.lz-card .elementor-image-box-img{width:100%!important;margin:0!important;float:none!important;}
.lz-card .elementor-image-box-img img{width:100%;height:160px;object-fit:cover;display:block;transition:transform .45s ease;border-radius:0;}
.lz-card:hover .elementor-image-box-img img{transform:scale(1.06);}
.lz-card .elementor-image-box-content{padding:20px 22px 26px;}
.lz-card .elementor-image-box-title{font-family:'Sora',sans-serif;font-size:16px;font-weight:700;margin:0 0 8px;color:var(--lz-oscuro);}
.lz-card .elementor-image-box-description{font-size:14px;color:var(--lz-texto);margin:0;}

/* ---------- iconos de "por qué elegirnos" ---------- */
#por-que-elegirnos .elementor-icon{border-radius:10px;}

/* ---------- tarjetas de proceso ---------- */
#proceso-grid > .e-con{background:rgba(255,255,255,.05);border-radius:14px;}
#proceso-grid .elementor-widget-heading .elementor-heading-title,
#proceso-grid .elementor-widget-text-editor{text-align:left;}
#proceso-grid .elementor-widget-text-editor{color:#fff;}
.lz-num .elementor-heading-title{font-family:'Sora',sans-serif;font-weight:800;font-size:34px;color:#6F9AE0;margin-bottom:8px;}

/* ---------- ZONA DE SERVICIO: texto + mapa ---------- */
/* Mismo patron que #hero-row: Elementor apila los dos hijos y la rejilla la
   pone el CSS, asi el ancho de cada columna no depende de los porcentajes que
   Elementor guarda por su cuenta. align-items:start para que el mapa no
   estire su alto al de la columna de texto. */
#zonas-row > .e-con-inner{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start;}
#zonas-row > .e-con-inner > .e-con{width:auto!important;max-width:none;}

/* La lista de datos reutiliza .lz-contacto, la misma que Sobre nosotros:
   un solo estilo para los dos sitios. Aqui solo se le da aire, porque el
   contenedor tiene un gap de 12px que se queda corto tras el parrafo. */
#zonas-row .lz-contacto{margin:20px 0 4px;}

.lz-zona-label{margin-top:12px;}
.lz-zona-label .elementor-heading-title{font-family:'Manrope',sans-serif;font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--lz-texto);}

/* ---------- chips de zona ---------- */
/* En fila con wrap: cada chip mide lo que mide su texto, como en la referencia.
   Elementor da width:100% a los widgets dentro de un contenedor, de ahi el
   width:auto. */
#zonas-chips{gap:10px;}
#zonas-chips > .elementor-widget{width:auto;flex:0 0 auto;}
.lz-chip{background:var(--lz-fondo);border-radius:999px;box-shadow:0 2px 10px rgba(62,79,110,.05);}
.lz-chip .elementor-heading-title{font-family:'Sora',sans-serif;font-weight:700;font-size:15px;color:var(--lz-azul);white-space:nowrap;}

/* ---------- mapa ---------- */
#zonas-mapa .elementor-widget-google_maps{border-radius:14px;overflow:hidden;box-shadow:0 12px 30px rgba(62,79,110,.12);}
#zonas-mapa .elementor-custom-embed,
#zonas-mapa iframe{display:block;border:0;}

/* ---------- marcas ---------- */
.lz-marcas{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;}
.lz-marcas div{background:#fff;border:1px solid var(--lz-borde);border-radius:10px;height:60px;display:flex;align-items:center;justify-content:center;padding:12px 14px;}
.lz-marcas img{max-width:100%;max-height:26px;width:auto;object-fit:contain;}

/* ---------- caso destacado ---------- */
.lz-tag .elementor-heading-title{display:inline-block;background:var(--lz-azul);color:#fff;font-family:'Manrope',sans-serif;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:6px 14px;border-radius:100px;}
#flagship-row{display:grid;grid-template-columns:1.1fr 1fr;gap:36px;align-items:center;}
#flagship-row > .e-con{width:auto!important;max-width:none;}

/* ---------- comunidades ---------- */
#comunidades-row > .e-con-inner{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;}
#comunidades-row > .e-con-inner > .e-con{width:auto!important;max-width:none;}
.lz-com-list{list-style:none;margin:0;padding:0;}
.lz-com-list li{list-style:none;padding:14px 0;border-top:1px solid rgba(245,241,232,.14);font-size:15px;color:#D7E2F2;}
.lz-com-list li:last-child{border-bottom:1px solid rgba(245,241,232,.14);}
.lz-com-list strong{display:block;font-family:'Sora',sans-serif;font-weight:700;color:#fff;margin-bottom:4px;}

/* ---------- sobre nosotros ---------- */
#sobre-row > .e-con-inner{display:grid;grid-template-columns:1fr 1.1fr;gap:48px;align-items:center;}
#sobre-row > .e-con-inner > .e-con{width:auto!important;max-width:none;}
.lz-sobre-img img{border-radius:14px;box-shadow:0 8px 30px rgba(62,79,110,.14);width:100%;display:block;transition:transform .45s ease;}
.lz-sobre-img:hover img{transform:scale(1.03);}
.lz-cap{color:var(--lz-texto);font-size:13px;}
/* cifras de confianza sobre fondo claro (la .lz-trust del hero va en blanco) */
.lz-trust-light{display:flex;gap:32px;flex-wrap:wrap;}
.lz-trust-light div{font-family:'Sora',sans-serif;font-weight:800;font-size:24px;color:var(--lz-azul);line-height:1.2;}
.lz-trust-light span{display:block;font-family:'Manrope',sans-serif;font-weight:500;font-size:13px;color:var(--lz-texto);margin-top:2px;}
/* el equipo no quiere salir en foto: badge con icono en vez de retratos */
.lz-team-badge{display:flex;align-items:center;gap:14px;}
.lz-team-badge .ico{width:44px;height:44px;flex:none;border-radius:50%;background:var(--lz-azul);border:2px solid rgba(245,248,252,.9);display:flex;align-items:center;justify-content:center;color:#fff;}
.lz-team-badge .ico svg{width:20px;height:20px;}
.lz-team-badge .label{color:#fff;font-family:'Manrope',sans-serif;font-size:15px;font-weight:700;}

/* ---------- lista de contacto "dónde estamos" ---------- */
.lz-contacto{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;}
.lz-contacto li{display:flex;align-items:center;gap:12px;font-family:'Manrope',sans-serif;font-size:15px;color:#3B4A63;list-style:none;}
.lz-contacto svg{width:20px;height:20px;flex:none;color:var(--lz-azul);}
.lz-contacto a{color:#3B4A63;text-decoration:none;font-weight:600;}
.lz-contacto a:hover{color:var(--lz-azul);}

/* ---------- páginas legales (texto largo) ---------- */
.lz-doc-fecha{color:var(--lz-texto);font-size:14px;}
.lz-doc{max-width:820px;}
.lz-doc h2{font-family:'Sora',sans-serif;font-size:20px;font-weight:700;color:var(--lz-oscuro);margin:36px 0 12px;}
.lz-doc h2:first-child{margin-top:0;}
.lz-doc p,.lz-doc li{color:#3B4A63;font-size:15px;line-height:1.6;margin-bottom:12px;}
.lz-doc ul{padding-left:20px;margin-bottom:12px;}
.lz-doc a{color:var(--lz-azul);font-weight:600;}
@media(max-width:700px){.lz-doc table{display:block;overflow-x:auto;}}

/* ---------- fotos con etiqueta antes/después ---------- */
.lz-foto{position:relative;border-radius:12px;overflow:hidden;}
.lz-foto img{width:100%;object-fit:cover;transition:transform .45s ease;display:block;}
.lz-foto:hover img{transform:scale(1.06);}
.lz-foto::after{position:absolute;background:rgba(46,54,70,.75);color:#fff;font-family:'Manrope',sans-serif;font-weight:700;letter-spacing:.03em;border-radius:100px;}
.lz-antes::after{content:'ANTES';}
.lz-despues::after{content:'DESPUÉS';}
.lz-foto-sm img{height:150px;}
.lz-foto-md img{height:190px;}
.lz-foto-lg img{height:340px;border-radius:14px;}
.lz-foto-lg{border-radius:14px;box-shadow:0 8px 30px rgba(62,79,110,.14);}
.lz-foto-lg::after{top:16px;left:16px;font-size:12px;padding:6px 12px;}
.lz-foto-sm::after,.lz-foto-md::after{top:10px;left:10px;font-size:11px;padding:4px 10px;}
/* pie de foto opcional: sin él saldría con el estilo por defecto de WordPress (gris, centrado) */
.lz-foto figcaption.widget-image-caption{font-family:'Manrope',sans-serif;font-size:13px;line-height:1.4;color:var(--lz-texto);text-align:left;background:#fff;padding:12px 16px 14px;margin:0;}

/* ---------- CABECERA ---------- */
.lz-nav{position:sticky;top:0;z-index:90;background:var(--lz-fondo);border-bottom:1px solid rgba(62,79,110,.12);}
.lz-nav-in{max-width:1180px;margin:0 auto;padding:18px 32px;display:flex;align-items:center;justify-content:space-between;gap:16px;}
/* el enlace del logo se encogía al no caber la fila y deformaba la imagen */
.lz-nav-in > a{flex-shrink:0;}
.lz-nav-in img.lz-logo{height:38px;width:auto;max-width:none;display:block;}
.lz-links{display:flex;align-items:center;gap:22px;font-size:14px;font-weight:600;flex-shrink:0;}
.lz-links a{color:var(--lz-oscuro);text-decoration:none;}
.lz-links a:hover{color:var(--lz-azul);}
.lz-menu{display:flex;gap:22px;list-style:none;margin:0;padding:0;}
.lz-menu li{list-style:none;}

/* ---------- DESPLEGABLE DE SERVICIOS (escritorio) ----------
   Sin estas reglas el .sub-menu se pinta como una lista suelta dentro
   de la cabecera y descuadra la fila del menú. */
.lz-menu > li.menu-item-has-children{position:relative;}
/* flecha que avisa de que el elemento despliega */
.lz-menu > li.menu-item-has-children > a::after{content:'';display:inline-block;width:6px;height:6px;margin-left:7px;vertical-align:2px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .2s ease;}
.lz-menu > li.menu-item-has-children:hover > a::after,
.lz-menu > li.menu-item-has-children:focus-within > a::after{transform:rotate(-135deg);vertical-align:0;}
/* puente invisible: sin él, el ratón pierde el hover al bajar al panel */
.lz-menu > li.menu-item-has-children::after{content:'';position:absolute;left:0;right:0;top:100%;height:14px;}
.lz-menu .sub-menu{position:absolute;top:calc(100% + 14px);left:-16px;z-index:95;display:flex;flex-direction:column;min-width:252px;margin:0;padding:8px 0;list-style:none;background:#fff;border:1px solid rgba(62,79,110,.10);border-radius:12px;box-shadow:0 12px 32px rgba(20,24,34,.16);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s ease,transform .18s ease,visibility .18s;}
.lz-menu > li.menu-item-has-children:hover > .sub-menu,
.lz-menu > li.menu-item-has-children:focus-within > .sub-menu{opacity:1;visibility:visible;transform:translateY(0);}
.lz-menu .sub-menu li{list-style:none;}
.lz-menu .sub-menu a{display:block;padding:10px 20px;font-size:14px;font-weight:600;color:var(--lz-oscuro);text-decoration:none;white-space:nowrap;}
.lz-menu .sub-menu a:hover,.lz-menu .sub-menu a:focus-visible{background:var(--lz-fondo);color:var(--lz-azul);}
@media(prefers-reduced-motion:reduce){.lz-menu .sub-menu{transition:none;}.lz-menu > li.menu-item-has-children > a::after{transition:none;}}

/* ---------- el mismo submenú dentro del panel móvil ----------
   Aquí no despliega: se ve siempre, indentado bajo "Servicios". */
.lz-mobile-menu .sub-menu{list-style:none;margin:0;padding:0 0 0 16px;}
.lz-mobile-menu .sub-menu li:last-child{border-bottom:0;}
.lz-mobile-menu .sub-menu a{padding:12px 4px;font-size:14px;font-weight:500;color:var(--lz-texto);}
.lz-mobile-menu .sub-menu a:hover{color:var(--lz-azul);}

/* .lz-links a (0,2,1) pisaba a .lz-tel y a .lz-btn-primary: hay que igualar el peso */
.lz-links a.lz-tel{color:var(--lz-azul);}
.lz-links a.lz-btn-primary,.lz-links a.lz-btn-primary:hover{color:#fff;}
/* ---------- MENÚ MÓVIL ---------- */
.lz-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:42px;height:42px;padding:0;border:1px solid rgba(62,79,110,.18);border-radius:10px;background:#fff;cursor:pointer;flex-shrink:0;}
.lz-burger span{display:block;width:20px;height:2px;margin:0 auto;border-radius:2px;background:var(--lz-oscuro);transition:transform .2s ease,opacity .2s ease;}
.lz-burger-abierto span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.lz-burger-abierto span:nth-child(2){opacity:0;}
.lz-burger-abierto span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.lz-burger:focus-visible{outline:3px solid rgba(255,138,61,.75);outline-offset:2px;}

.lz-mobile{display:none;}
.lz-mobile[hidden]{display:none;}
.lz-mobile-menu{list-style:none;margin:0;padding:0;}
.lz-mobile-menu li{list-style:none;border-bottom:1px solid rgba(62,79,110,.10);}
.lz-mobile-menu a{display:block;padding:14px 4px;color:var(--lz-oscuro);text-decoration:none;font-size:15px;font-weight:600;}
.lz-mobile-menu a:hover{color:var(--lz-azul);}
.lz-mobile-acciones{display:flex;align-items:center;gap:14px;padding-top:16px;}
.lz-mobile-acciones .lz-btn{flex:1;text-align:center;}
.lz-mobile-tel{color:var(--lz-azul);font-weight:700;font-size:15px;text-decoration:none;white-space:nowrap;}

/* Por debajo de 1180px el menú no cabe en una línea. En vez de desaparecer
   (todavía no hay menú hamburguesa) baja a una segunda fila centrada. */
@media(max-width:1180px) and (min-width:901px){
  .lz-nav-in{row-gap:10px;padding:12px var(--lz-gutter);}
  .lz-links{flex-wrap:wrap;justify-content:flex-end;gap:16px;}
  .lz-menu{order:3;width:100%;justify-content:center;flex-wrap:wrap;gap:6px 18px;font-size:13px;}
}
/* Por debajo de 900px el menú pasa a hamburguesa. */
@media(max-width:900px){
  .lz-menu{display:none;}
  .lz-links{gap:14px;}
  .lz-burger{display:flex;}
  .lz-mobile{display:block;position:absolute;top:100%;left:0;right:0;background:var(--lz-fondo);border-bottom:1px solid rgba(62,79,110,.12);box-shadow:0 14px 26px rgba(20,24,34,.14);padding:4px 20px 20px;}
  .lz-mobile[hidden]{display:none;}
}
@media(max-width:640px){.lz-tel,.lz-nav .lz-links > .lz-btn{display:none;}.lz-nav-in{padding:14px var(--lz-gutter);}.lz-nav-in img.lz-logo{height:32px;}}

/* ---------- PIE ---------- */
.lz-footer{background:var(--lz-azul);color:#F5F8FC;}
.lz-footer a{color:#D2E0F1;text-decoration:none;font-size:14px;}
.lz-footer a:hover{color:#fff;text-decoration:underline;}
.lz-footer h4{font-family:'Sora',sans-serif;font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#fff;margin:0 0 4px;}
.lz-cta{max-width:1180px;margin:0 auto;padding:88px 32px 56px;display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
.lz-cta h2{color:#fff;font-size:28px;font-weight:700;margin:0 0 14px;}
.lz-cta p{color:#D2E0F1;margin:0 0 28px;}
.lz-cta .lz-btn-primary{background:#fff;color:var(--lz-azul);box-shadow:0 2px 10px rgba(20,24,34,.18);}
.lz-cta .lz-btn-primary:hover{background:#EAF1FB;color:var(--lz-azul);}
.lz-foot-in{max-width:1180px;margin:0 auto;padding:44px 32px 8px;display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:32px;border-top:1px solid rgba(245,248,252,.14);}
.lz-foot-col{display:flex;flex-direction:column;gap:10px;align-items:flex-start;}
.lz-foot-col img{height:30px;width:auto;filter:brightness(0) invert(1);margin-bottom:4px;}
.lz-foot-col p{color:#D2E0F1;font-size:13px;max-width:220px;margin:0;}
.lz-foot-bottom{max-width:1180px;margin:0 auto;padding:28px 32px;border-top:1px solid rgba(245,248,252,.16);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:13px;color:#C2D2E8;}

/* ---------- BARRA FIJA ---------- */
.lz-sticky{position:fixed;bottom:0;left:0;right:0;z-index:95;display:flex;background:#fff;box-shadow:0 -6px 24px rgba(20,24,34,.14);}
.lz-sticky a{flex:1;display:flex;align-items:center;justify-content:center;gap:12px;padding:14px 12px;text-decoration:none;}
.lz-sticky svg{width:20px;height:20px;flex-shrink:0;}
.lz-sticky .eyebrow{display:block;font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;opacity:.8;}
.lz-sticky .main{display:block;font-size:14px;font-weight:700;}
.lz-sticky .lz-s-cta{background:var(--lz-azul);color:#fff;}
.lz-sticky .lz-s-tel{background:#fff;color:var(--lz-oscuro);border-left:1px solid #E6EEF8;border-right:1px solid #E6EEF8;}
.lz-sticky .lz-s-tel .eyebrow{display:flex;align-items:center;gap:5px;color:var(--lz-azul);}
.lz-sticky .dot{width:6px;height:6px;border-radius:50%;background:#4CAF6D;display:inline-block;}
.lz-sticky .lz-s-wa{background:#25D366;color:#fff;flex:0 0 auto;padding:14px 26px;}

/* ---------- RESPONSIVE ---------- */
@media(max-width:900px){
  #hero-row > .e-con-inner,
  #comunidades-row > .e-con-inner,
  #sobre-row > .e-con-inner,
  #zonas-row > .e-con-inner,
  #flagship-row{grid-template-columns:1fr;}
  /* A una columna el mapa no necesita 500px de alto. */
  #zonas-mapa .elementor-widget-google_maps iframe{height:320px!important;}
  .lz-cta{grid-template-columns:1fr;text-align:center;gap:32px;}
  .lz-foot-in{grid-template-columns:1fr 1fr;}
  .elementor.elementor .e-con > .elementor-widget.lz-hero-lead{max-width:100%;}
  .lz-hero-h1 .elementor-heading-title{font-size:32px!important;}
  #inicio{min-height:0!important;}
}
@media(max-width:700px){
  .lz-h2 .elementor-heading-title{font-size:29px;line-height:1.2;}
  /* Estas reglas estaban acotadas a .elementor-115, o sea SOLO la Home.
     Y además apuntaban mal: Elementor pone el padding horizontal en .e-con
     (padding-inline-start/end) y deja .e-con-inner a 0, así que tocar el
     inner SUMABA margen en vez de quitarlo — la Home acababa con 32+20=52px.
     Lo correcto es sobrescribir el padding-inline del propio .e-con. */
  .elementor > .e-con{padding-top:56px!important;padding-bottom:56px!important;}
  .elementor .e-con-boxed{padding-inline-start:var(--lz-gutter)!important;padding-inline-end:var(--lz-gutter)!important;}
  /* 15px se lee justo en un móvil; 16 es el mínimo cómodo. */
  .elementor-widget-text-editor{font-size:16.5px;line-height:1.7;}
  .lz-lead{font-size:17px;line-height:1.7;}
  /* A una sola columna la altura fija en px recortaba demasiado, pero height:auto
     tampoco vale: hay 14 fotos verticales (fontanería-antes es 720x1600) que se
     disparaban de alto y descuadraban su pareja "después", en horizontal.
     Con aspect-ratio la foto crece con el ancho de la pantalla y todas las
     parejas antes/después mantienen la misma forma. */
  .lz-foto-lg img{height:auto;aspect-ratio:5/4;}
  .lz-card .elementor-image-box-img img{height:200px;}
}
@media(max-width:640px){
  .lz-sticky .eyebrow{display:none;}
  .lz-sticky a{padding:14px 8px;gap:8px;}
  .lz-sticky .lz-s-wa{padding:14px 18px;}
}
@media(max-width:520px){
  .lz-marcas{grid-template-columns:repeat(2,1fr);}
  .lz-foot-in{grid-template-columns:1fr;padding:36px var(--lz-gutter) 8px;}
  .lz-foot-bottom{padding:24px var(--lz-gutter);}
  .lz-cta{padding:56px var(--lz-gutter) 40px;}
  /* Estas dos van a 2 columnas en móvil, así que mantienen altura fija; se
     suben para que la foto no quede en miniatura. */
  .lz-foto-sm img{height:148px;}
  .lz-foto-md img{height:175px;}
}
@media(max-width:900px) and (min-width:521px){
  .lz-marcas{grid-template-columns:repeat(3,1fr);}
}
@media(prefers-reduced-motion:reduce){
  .lz-card img,.lz-foto img,.lz-sobre-img img,.lz-btn{transition:none;}
  .lz-btn-primary:hover{transform:none;}
}

/* ==========================================================================
   BLOG
   Ojo: las paginas de Elementor usan el mismo .site-main > .page-content que
   el blog, asi que TODO va acotado a body.blog / body.single-post. Sin ese
   acotado se romperian las 15 paginas del sitio.
   ========================================================================== */
body.blog .site-main,
body.single-post .site-main{max-width:1180px;margin:0 auto;padding:56px 32px 88px;}
@media(max-width:700px){
  body.blog .site-main,
  body.single-post .site-main{padding:40px var(--lz-gutter) 64px;}
}

/* ---------- cabecera ---------- */
body.blog .page-header,
body.single-post .page-header{margin-bottom:40px;}
body.blog .page-header .entry-title,
body.single-post .page-header .entry-title{font-family:'Sora',sans-serif;font-weight:800;color:var(--lz-oscuro);line-height:1.18;margin:0;}
body.blog .page-header .entry-title{font-size:34px;}
body.single-post .page-header{max-width:820px;margin-bottom:32px;}
body.single-post .page-header .entry-title{font-size:38px;}
@media(max-width:700px){
  body.blog .page-header .entry-title{font-size:27px;}
  body.single-post .page-header .entry-title{font-size:29px;}
}
body.blog .archive-description{color:var(--lz-texto);font-size:16px;margin-top:12px;}

/* ---------- listado: rejilla de tarjetas ---------- */
body.blog .page-content{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
@media(max-width:900px){body.blog .page-content{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){
  body.blog .page-content{grid-template-columns:1fr;}
  /* a una columna la tarjeta ocupa todo el ancho: la foto puede respirar más */
  body.blog article.post img{height:auto;}
}

/* El tema imprime h2, luego la foto, luego el extracto. Con flex se reordena
   para que la foto quede arriba, como en las tarjetas del resto del sitio. */
body.blog article.post{display:flex;flex-direction:column;background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 2px 14px rgba(65,109,184,.07);transition:box-shadow .25s ease,transform .25s ease;}
body.blog article.post:hover{box-shadow:0 12px 30px rgba(65,109,184,.16);transform:translateY(-2px);}
body.blog article.post > a:has(img){order:1;display:block;overflow:hidden;}
/* Con altura fija (190px sobre una tarjeta de ~370px de ancho) la foto salía
   en franja y se perdía medio baño. Con la proporción del original se ve
   entera y sigue creciendo con el ancho de la tarjeta. */
body.blog article.post img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block;transition:transform .45s ease;}
body.blog article.post:hover img{transform:scale(1.06);}
body.blog article.post .entry-title{order:2;font-family:'Sora',sans-serif;font-size:18px;font-weight:700;line-height:1.3;margin:20px 22px 0;}
body.blog article.post .entry-title a{color:var(--lz-oscuro);text-decoration:none;}
body.blog article.post:hover .entry-title a{color:var(--lz-azul);}
body.blog article.post p{order:3;color:var(--lz-texto);font-size:14.5px;line-height:1.6;margin:10px 22px 22px;}

/* ---------- articulo ---------- */
body.single-post .page-content{max-width:820px;}
body.single-post .page-content p,
body.single-post .page-content li{color:#3B4A63;font-size:17px;line-height:1.75;margin-bottom:18px;}
body.single-post .page-content h2{font-family:'Sora',sans-serif;font-size:26px;font-weight:700;color:var(--lz-oscuro);line-height:1.25;margin:44px 0 14px;}
body.single-post .page-content h3{font-family:'Sora',sans-serif;font-size:20px;font-weight:700;color:var(--lz-oscuro);margin:32px 0 10px;}
body.single-post .page-content ul,
body.single-post .page-content ol{padding-left:22px;margin-bottom:18px;}
body.single-post .page-content li{margin-bottom:8px;}
body.single-post .page-content strong{color:var(--lz-oscuro);}
body.single-post .page-content a{color:var(--lz-azul);font-weight:600;}
body.single-post .page-content img{width:100%;height:auto;border-radius:14px;box-shadow:0 8px 30px rgba(62,79,110,.14);margin:8px 0 22px;}
body.single-post .page-content figcaption{color:var(--lz-texto);font-size:13px;margin:-14px 0 24px;}
body.single-post .page-content blockquote{border-left:4px solid var(--lz-azul);background:#fff;border-radius:0 12px 12px 0;margin:24px 0;padding:18px 22px;}
body.single-post .page-content blockquote p:last-child{margin-bottom:0;}
@media(max-width:700px){
  body.single-post .page-content p,body.single-post .page-content li{font-size:16px;}
  body.single-post .page-content h2{font-size:22px;}
  body.single-post .page-content table{display:block;overflow-x:auto;}
}
body.single-post .post-tags{margin-top:32px;font-size:14px;color:var(--lz-texto);}
body.single-post .post-tags a{color:var(--lz-azul);font-weight:600;}
/* comentarios cerrados: el tema sigue imprimiendo el aviso */
body.single-post .comments-area,
body.blog .comments-area{display:none;}

/* ---------- CTA al final del articulo (lo inyecta lz-chrome.php) ---------- */
/* La tarjeta vive dentro de .page-content, cuyas reglas de h3 y p son más
   específicas (0,2,2) que .lz-post-cta h3 (0,1,1): el titular y el texto se
   pintaban en azul oscuro sobre fondo azul oscuro, o sea invisibles. Por eso
   estos selectores llevan el prefijo completo. */
body.single-post .page-content .lz-post-cta{max-width:820px;margin:40px 0 0;background:var(--lz-oscuro);border-radius:14px;padding:24px 26px 26px;}
body.single-post .page-content .lz-post-cta h3{font-family:'Sora',sans-serif;font-size:19px;font-weight:700;color:#fff;margin:0 0 8px;line-height:1.3;}
body.single-post .page-content .lz-post-cta p{color:#C9D8EC;font-size:15px;line-height:1.55;margin:0 0 18px;}
body.single-post .page-content .lz-post-cta .lz-cta-row{gap:10px;margin-top:0;}
body.single-post .page-content .lz-post-cta .lz-btn{padding:11px 20px;font-size:13.5px;}
body.single-post .page-content .lz-post-cta .lz-btn-primary{background:#fff;color:var(--lz-azul);}
body.single-post .page-content .lz-post-cta .lz-btn-primary:hover{background:#EAF1FB;color:var(--lz-azul);}
@media(max-width:700px){
  body.single-post .page-content .lz-post-cta{padding:20px 18px 22px;margin-top:32px;}
  body.single-post .page-content .lz-post-cta h3{font-size:17px;}
  body.single-post .page-content .lz-post-cta p{font-size:14.5px;}
}

/* ---------- paginacion ---------- */
body.blog .pagination{display:flex;justify-content:space-between;gap:16px;margin-top:44px;}
body.blog .pagination a{display:inline-block;padding:12px 22px;border-radius:10px;background:#fff;color:var(--lz-azul);font-weight:700;font-size:14px;text-decoration:none;box-shadow:0 2px 10px rgba(65,109,184,.08);}
body.blog .pagination a:hover{background:var(--lz-azul);color:#fff;}

/* ---------- respuesta del formulario ---------- */
.lz-opt{font-weight:500;opacity:.7;}
.lz-aviso{margin:14px 0 0;font-family:'Manrope',sans-serif;font-size:14px;line-height:1.5;padding:12px 14px;border-radius:10px;}
.lz-aviso-ok{background:#E7F5EC;color:#1E6B3C;border:1px solid #BFE3CD;}
.lz-aviso-mal{background:#FDECEC;color:#9B2323;border:1px solid #F5C6C6;}
/* sobre el azul del pie hace falta mas contraste */
.lz-form-dark .lz-aviso-ok{background:rgba(255,255,255,.94);color:#1E6B3C;}
.lz-form-dark .lz-aviso-mal{background:rgba(255,255,255,.94);color:#9B2323;}

/* ==========================================================================
   TABLAS DE CONTENIDO
   Mismo patrón que las de Tour Travel & More, con el azul de Laszlo en vez
   del dorado. Los tintes salen de --c con color-mix, así que cambiando esa
   variable cambia toda la tabla.
   ========================================================================== */
.lz-doc table,
body.single-post .page-content table{
  --c:var(--lz-azul);
  width:100%;
  border-collapse:collapse;
  margin:14px 0 28px;
  font-family:'Manrope',sans-serif;
  border:1px solid color-mix(in srgb, var(--c) 20%, #fff);
  border-radius:14px;
  overflow:hidden;
}
.lz-doc th,
body.single-post .page-content th{
  padding:.75rem 1.1rem;
  background:color-mix(in srgb, var(--c) 16%, #fff);
  text-transform:uppercase;
  font-size:.88rem;
  letter-spacing:.04em;
  font-weight:700;
  color:var(--lz-oscuro);
  text-align:left;
  border-bottom:2px solid color-mix(in srgb, var(--c) 30%, #fff);
}
.lz-doc td,
body.single-post .page-content td{
  padding:1rem 1.1rem;
  font-size:1rem;
  color:#374151;
  line-height:1.55;
  vertical-align:top;
  border-bottom:1px solid color-mix(in srgb, var(--c) 10%, #fff);
}
.lz-doc tbody tr:nth-child(odd) td,
body.single-post .page-content tbody tr:nth-child(odd) td{background:color-mix(in srgb, var(--c) 7%, #fff);}
.lz-doc tbody tr:nth-child(even) td,
body.single-post .page-content tbody tr:nth-child(even) td{background:color-mix(in srgb, var(--c) 3%, #fff);}
.lz-doc tbody tr:hover td,
body.single-post .page-content tbody tr:hover td{background:color-mix(in srgb, var(--c) 12%, #fff);}
.lz-doc td:first-child,
body.single-post .page-content td:first-child{color:var(--lz-oscuro);font-weight:600;}
.lz-doc tbody tr:last-child td,
body.single-post .page-content tbody tr:last-child td{border-bottom:0;}

/* En móvil cada fila pasa a ser una tarjeta y la etiqueta de la columna se
   pinta encima del valor, desde el data-label del <td>. */
@media(max-width:640px){
  .lz-doc table,
  body.single-post .page-content table{display:block;border:0;border-radius:0;}
  .lz-doc thead,
  body.single-post .page-content thead{display:none;}
  .lz-doc tbody,
  body.single-post .page-content tbody{display:block;}
  .lz-doc tbody tr,
  body.single-post .page-content tbody tr{display:block;margin-bottom:10px;border-radius:10px;overflow:hidden;border:1px solid color-mix(in srgb, var(--c) 22%, #fff);}
  .lz-doc tbody td,
  body.single-post .page-content tbody td{display:flex;flex-direction:column;align-items:flex-start;gap:4px;width:auto;box-sizing:border-box;padding:.65rem .9rem;font-size:.94rem;color:#374151;background:color-mix(in srgb, var(--c) 4%, #fff);border-bottom:1px solid color-mix(in srgb, var(--c) 10%, #fff);}
  .lz-doc tbody td::before,
  body.single-post .page-content tbody td::before{content:attr(data-label);font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--lz-oscuro);}
  .lz-doc tbody td:first-child,
  body.single-post .page-content tbody td:first-child{background:color-mix(in srgb, var(--c) 16%, #fff);color:var(--lz-oscuro);font-weight:700;font-size:1rem;border-bottom:2px solid color-mix(in srgb, var(--c) 28%, #fff);}
  .lz-doc tbody td:first-child::before,
  body.single-post .page-content tbody td:first-child::before{display:none;}
  .lz-doc tbody tr:last-child td:last-child,
  body.single-post .page-content tbody tr:last-child td:last-child{border-bottom:0;}
}
