/* ============================================================
   modelo-15 · "Legal" — diseño sobrio para bufetes y consultoras.
   Hecho a medida (sin kit): CSS moderno, sin jQuery ni frameworks,
   pensado para Core Web Vitals (poco JS, imágenes con aspect-ratio).

   Convención: TODAS las clases llevan prefijo .lg- para no chocar
   con los partials compartidos (mapa, calendario, popup, restaurante)
   ni con los selectores que repinta pwSeccionBarCss() en las
   páginas internas.

   Los colores del cliente entran como variables desde head.php:
   --lg-ink (principal) · --lg-gold (secundario) · --lg-paper (terciario)
   ============================================================ */

:root{
  --lg-ink:#0f2a43;
  --lg-gold:#b08d4f;
  --lg-paper:#f7f5f1;
  --lg-text:#1b2430;
  --lg-muted:#5f6b7a;
  --lg-line:#e3e0d9;
  --lg-white:#fff;
  --lg-max:1180px;
  --lg-pad:clamp(18px, 4vw, 40px);
  --lg-serif:'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --lg-sans:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --lg-sec:clamp(56px, 9vw, 110px);
}

/* ---------- base ---------- */
.lg *{box-sizing:border-box}
.lg{font-family:var(--lg-sans);color:var(--lg-text);line-height:1.65;font-size:16px;background:var(--lg-white)}
.lg img{max-width:100%;height:auto;display:block}
.lg a{color:inherit}
.lg-wrap{max-width:var(--lg-max);margin:0 auto;padding-inline:var(--lg-pad)}
.lg-sec{padding-block:var(--lg-sec)}
.lg-sec--paper{background:var(--lg-paper)}
.lg-sec--ink{background:var(--lg-ink);color:#eef2f6}
.lg h1,.lg h2,.lg h3,.lg h4{font-family:var(--lg-serif);font-weight:600;line-height:1.12;color:var(--lg-ink);margin:0}
.lg-sec--ink h1,.lg-sec--ink h2,.lg-sec--ink h3{color:#fff}
.lg-h1{font-size:clamp(2.4rem, 5.4vw, 4.1rem);letter-spacing:-.015em}
.lg-h2{font-size:clamp(1.9rem, 3.6vw, 2.9rem);letter-spacing:-.01em}
.lg-h3{font-size:clamp(1.25rem, 2vw, 1.55rem)}
.lg-lead{font-size:clamp(1.02rem, 1.5vw, 1.15rem);color:var(--lg-muted);max-width:62ch}
.lg-sec--ink .lg-lead{color:#c8d3de}
.lg-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:.72rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--lg-gold);margin:0 0 14px}
.lg-eyebrow:before{content:"";width:28px;height:1px;background:currentColor}
.lg-rule{width:64px;height:2px;background:var(--lg-gold);border:0;margin:22px 0 0}
.lg-prose p{margin:0 0 1em;color:var(--lg-muted)}
.lg-prose p:last-child{margin-bottom:0}
.lg-prose ul{margin:0 0 1em;padding-left:1.1em;color:var(--lg-muted)}
.lg-prose li{margin-bottom:.35em}
.lg-prose strong{color:var(--lg-text)}
.lg-sec--ink .lg-prose p,.lg-sec--ink .lg-prose li{color:#c8d3de}
/* Sobre fondo oscuro, las negritas/enlaces del texto deben verse (antes
   heredaban el color oscuro de .lg-prose strong y se perdían). */
.lg-sec--ink .lg-prose strong,.lg-sec--ink .lg-prose b,.lg-sec--ink .lg-quote p{color:#fff}
.lg-sec--ink .lg-prose a{color:var(--lg-gold)}

/* ---------- botones ---------- */
.lg-btn{display:inline-flex;align-items:center;gap:9px;padding:14px 26px;border:1px solid var(--lg-ink);background:var(--lg-ink);color:#fff;font:600 .88rem/1 var(--lg-sans);letter-spacing:.02em;text-decoration:none;transition:background .2s,color .2s,border-color .2s}
.lg-btn:hover{background:transparent;color:var(--lg-ink)}
.lg-btn--ghost{background:transparent;color:var(--lg-ink)}
.lg-btn--ghost:hover{background:var(--lg-ink);color:#fff}
.lg-btn--gold{background:var(--lg-gold);border-color:var(--lg-gold)}
.lg-btn--gold:hover{background:transparent;color:var(--lg-gold)}
.lg-btn--light{background:#fff;border-color:#fff;color:var(--lg-ink)}
.lg-btn--light:hover{background:transparent;color:#fff}
.lg-btn svg{width:16px;height:16px;flex:none}
/* .lg a{color:inherit} gana por especificidad a .lg-btn*: fijamos el color
   del texto con selectores de la misma fuerza (elemento + clase). */
.lg a.lg-btn,.lg button.lg-btn{color:#fff}
.lg a.lg-btn--ghost,.lg a.lg-btn--light{color:var(--lg-ink)}
.lg a.lg-btn--gold{color:#fff}
.lg a.lg-btn--ghost:hover,.lg a.lg-btn--light:hover{color:#fff}
.lg-sec--ink a.lg-btn--ghost{color:#fff;border-color:rgba(255,255,255,.55)}
.lg-sec--ink a.lg-btn--ghost:hover{background:#fff;color:var(--lg-ink)}
.lg a.lg-btn--light:hover{background:transparent;color:#fff;border-color:#fff}
.lg-sec--ink a.lg-link,.lg-page-head a.lg-link{color:#fff}
.lg-link{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:.88rem;color:var(--lg-ink);text-decoration:none;border-bottom:1px solid var(--lg-gold);padding-bottom:3px}
.lg-link:hover{color:var(--lg-gold)}

/* ---------- header ---------- */
.lg-header{position:sticky;top:0;z-index:900;background:rgba(255,255,255,.96);backdrop-filter:saturate(1.3) blur(8px);border-bottom:1px solid var(--lg-line)}
.lg-header__bar{display:flex;align-items:center;gap:18px;min-height:92px}
.lg-brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex:none;max-width:52%}
/* Los logos de bufete suelen ser un lockup apilado (monograma + nombre + lema):
   a 52px las líneas de abajo no se leían. 68px los deja legibles sin agrandar
   de más la barra. Se acota también el ancho para logos muy apaisados. */
.lg-brand img{max-height:68px;max-width:300px;width:auto;object-fit:contain}
.lg-brand__txt{font-family:var(--lg-serif);font-size:1.15rem;font-weight:600;color:var(--lg-ink);line-height:1.15}
.lg-brand__sub{display:block;font-family:var(--lg-sans);font-size:.62rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--lg-gold);margin-top:3px}
.lg-nav{margin-left:auto}
.lg-nav>ul{display:flex;align-items:center;gap:26px;list-style:none;margin:0;padding:0}
.lg-nav a{font-size:.85rem;font-weight:500;text-decoration:none;color:var(--lg-text);padding:8px 0;display:inline-block;position:relative}
.lg-nav a:hover{color:var(--lg-gold)}
.lg-nav li.has-sub{position:relative}
.lg-nav li.has-sub>a:after{content:"";display:inline-block;width:5px;height:5px;margin-left:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px)}
.lg-nav ul ul{position:absolute;top:100%;left:-18px;min-width:250px;background:#fff;border:1px solid var(--lg-line);box-shadow:0 20px 40px -24px rgba(15,42,67,.35);list-style:none;margin:0;padding:10px 0;display:none}
.lg-nav li.has-sub:hover>ul,.lg-nav li.has-sub:focus-within>ul{display:block}
.lg-nav ul ul a{display:block;padding:9px 20px;font-size:.82rem}
.lg-nav ul ul a:hover{background:var(--lg-paper)}
.lg-header .lg-btn{padding:11px 20px;font-size:.8rem}
.lg-burger{display:none;margin-left:auto;width:44px;height:44px;border:1px solid var(--lg-line);background:#fff;cursor:pointer;position:relative}
.lg-burger span,.lg-burger:before,.lg-burger:after{content:"";position:absolute;left:12px;right:12px;height:1.5px;background:var(--lg-ink);transition:.25s}
.lg-burger:before{top:15px}
.lg-burger span{top:21px}
.lg-burger:after{bottom:15px}
.lg-burger[aria-expanded=true]:before{top:21px;transform:rotate(45deg)}
.lg-burger[aria-expanded=true] span{opacity:0}
.lg-burger[aria-expanded=true]:after{bottom:21px;transform:rotate(-45deg)}
@media(max-width:991px){
  .lg-burger{display:block}
  .lg-nav{position:fixed;inset:78px 0 auto;background:#fff;border-bottom:1px solid var(--lg-line);max-height:calc(100dvh - 78px);overflow:auto;padding:10px var(--lg-pad) 26px;display:none}
  .lg-nav.is-open{display:block}
  .lg-nav>ul{flex-direction:column;align-items:stretch;gap:0}
  .lg-nav>ul>li{border-bottom:1px solid var(--lg-line)}
  .lg-nav a{padding:14px 0;font-size:.95rem}
  .lg-nav ul ul{position:static;display:block;border:0;box-shadow:none;padding:0 0 10px 14px;min-width:0}
  /* Área de toque cómoda en el submenú (>=44px, guía de accesibilidad móvil) */
  .lg-nav ul ul a{padding:12px 0;font-size:.9rem;min-height:44px;display:flex;align-items:center}
  .lg-header__cta{display:none}
}

@media(max-width:560px){
  .lg-brand{max-width:62%}
  .lg-brand__txt{font-size:.98rem}
  .lg-brand__sub{display:none}   /* el rubro ya sale en el hero */
  /* En móvil la barra se achica: el logo baja para no comerse la pantalla. */
  .lg-header__bar{min-height:76px}
  .lg-brand img{max-height:54px;max-width:190px}
}

/* ---------- hero ---------- */
.lg-hero{padding-block:clamp(52px,7vw,96px) clamp(56px,8vw,104px);background:linear-gradient(180deg,var(--lg-paper),#fff)}
.lg-hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,64px);align-items:center}
.lg-hero__title{margin:0 0 20px}
.lg-hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.lg-hero__media{position:relative}
.lg-hero__media img{width:100%;aspect-ratio:5/4;object-fit:cover;object-position:center top}
.lg-hero__media:after{content:"";position:absolute;inset:18px -18px -18px 18px;border:1px solid var(--lg-gold);z-index:-1}
.lg-hero__facts{display:flex;flex-wrap:wrap;gap:26px 44px;margin-top:44px;padding-top:26px;border-top:1px solid var(--lg-line)}
.lg-fact__n{font-family:var(--lg-serif);font-size:1.9rem;color:var(--lg-ink);line-height:1}
.lg-fact__t{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--lg-muted);margin-top:6px}
@media(max-width:860px){.lg-hero__grid{grid-template-columns:1fr}.lg-hero__media{order:-1}.lg-hero__media:after{display:none}}

/* ---------- bloque info (split) ---------- */
.lg-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,70px);align-items:center}
.lg-split--rev .lg-split__media{order:2}
.lg-split__media img{width:100%;aspect-ratio:5/4;object-fit:cover}
.lg-split__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.lg-split--solo{grid-template-columns:1fr;max-width:78ch}
/* Aviso solo para quien edita (no se muestra al visitante) */
.lg-falta{display:flex;align-items:center;gap:10px;border:1px dashed var(--lg-gold);background:#fffaf0;color:#8a6d3b;
  font-size:.82rem;padding:12px 14px;border-radius:10px;margin:14px 0}
@media(max-width:860px){.lg-split{grid-template-columns:1fr}.lg-split--rev .lg-split__media{order:0}}

/* ---------- áreas de práctica (acordeón) ---------- */
.lg-head{max-width:68ch;margin-bottom:clamp(30px,4vw,52px)}
.lg-areas{border-top:1px solid var(--lg-line)}
.lg-area{border-bottom:1px solid var(--lg-line)}
.lg-area__sum{display:grid;grid-template-columns:auto 1fr auto;gap:18px 22px;align-items:baseline;padding:26px 0;cursor:pointer;list-style:none}
.lg-area__sum::-webkit-details-marker{display:none}
.lg-area__n{font-family:var(--lg-serif);font-size:1.05rem;color:var(--lg-gold);letter-spacing:.04em;min-width:30px}
.lg-area__t{font-family:var(--lg-serif);font-size:clamp(1.2rem,2.2vw,1.7rem);color:var(--lg-ink);margin:0}
.lg-area__d{grid-column:2;font-size:.94rem;color:var(--lg-muted);margin:8px 0 0}
.lg-area__ico{width:34px;height:34px;border:1px solid var(--lg-line);display:grid;place-items:center;position:relative;flex:none;transition:.25s}
.lg-area__ico:before,.lg-area__ico:after{content:"";position:absolute;background:var(--lg-ink);transition:.25s}
.lg-area__ico:before{width:13px;height:1.5px}
.lg-area__ico:after{width:1.5px;height:13px}
.lg-area[open] .lg-area__ico{background:var(--lg-ink);border-color:var(--lg-ink)}
.lg-area[open] .lg-area__ico:before{background:#fff}
.lg-area[open] .lg-area__ico:after{opacity:0}
.lg-area__body{padding:0 0 34px;display:grid;grid-template-columns:auto 1fr;gap:22px}
.lg-area__body>div:first-child{min-width:30px}
.lg-area__cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));gap:24px 40px}
.lg-area__group h4{font-family:var(--lg-sans);font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--lg-gold);margin:0 0 12px}
.lg-area__group ul{list-style:none;margin:0;padding:0}
.lg-area__group li{position:relative;padding-left:20px;margin-bottom:9px;font-size:.92rem;color:var(--lg-muted)}
.lg-area__group li:before{content:"";position:absolute;left:0;top:.62em;width:8px;height:1px;background:var(--lg-gold)}
.lg-area__foot{margin-top:22px;display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.lg-area__media{margin-bottom:18px}
.lg-area__media img{width:100%;max-width:340px;aspect-ratio:4/3;object-fit:cover}
@media(max-width:700px){
  .lg-area__sum{grid-template-columns:auto 1fr;gap:10px 14px;padding:20px 0}
  .lg-area__ico{grid-row:1;grid-column:2;justify-self:end}
  .lg-area__body{grid-template-columns:1fr;padding-bottom:26px}
  .lg-area__body>div:first-child{display:none}
}

/* ---------- equipo / galería ---------- */
.lg-grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:clamp(18px,3vw,34px)}
.lg-card{position:relative;background:var(--lg-white);border:1px solid var(--lg-line)}
.lg-card__img{display:block;position:relative;overflow:hidden;max-width:100%}
.lg-card__img img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center top;transition:transform .5s ease}
.lg-card:hover .lg-card__img img{transform:scale(1.03)}
.lg-card__cap{padding:18px 20px 22px}
.lg-card__cap h3{font-size:1.16rem}
.lg-card__cap p{margin:5px 0 0;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--lg-gold)}
.lg-gal a{display:block}
.lg-gal img{aspect-ratio:4/3;object-fit:cover;width:100%}

/* ---------- logos / respaldo ---------- */
.lg-logos{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(22px,4vw,56px)}
/* Los logos van con sus COLORES ORIGINALES. Antes llevaban
   opacity:.85 + filter:saturate(.15), que los dejaba casi en gris: un logo de
   respaldo (una certificadora, un aliado) pierde todo su valor si no se
   reconoce la marca. */
.lg-logos img{max-height:84px;width:auto;transition:transform .25s}
.lg-logos img:hover{transform:scale(1.03)}
.lg-badge{display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:center;border:1px solid var(--lg-line);background:#fff;padding:clamp(22px,3vw,34px)}
@media(max-width:700px){.lg-badge{grid-template-columns:1fr}}

/* ---------- cita / declaración ---------- */
.lg-quote{max-width:52ch;margin:0 auto;text-align:center}
.lg-quote p{font-family:var(--lg-serif);font-size:clamp(1.4rem,3vw,2.05rem);line-height:1.35;color:var(--lg-ink)}
.lg-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 14px;margin-top:26px}
.lg-tag{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--lg-muted);border:1px solid var(--lg-line);padding:7px 14px}

/* ---------- banner ---------- */
.lg-banner{position:relative;min-height:clamp(320px,52vh,520px);display:grid;align-items:center;background-size:cover;background-position:center;color:#fff}
.lg-banner:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(15,42,67,.86),rgba(15,42,67,.45))}
.lg-banner__in{position:relative;max-width:640px;padding-block:clamp(50px,8vw,90px)}
.lg-banner h1,.lg-banner h2{color:#fff}
.lg-banner p{color:#dbe4ec}

/* ---------- video / embed ---------- */
.lg-video{position:relative;aspect-ratio:16/9;background:#000}
.lg-video iframe,.lg-video video{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---------- contacto ---------- */
.lg-contact{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(30px,5vw,64px)}
.lg-info{list-style:none;margin:26px 0 0;padding:0}
.lg-info li{display:grid;grid-template-columns:auto 1fr;gap:14px;padding:16px 0;border-top:1px solid var(--lg-line)}
.lg-info svg{width:20px;height:20px;color:var(--lg-gold);margin-top:3px}
.lg-info h3{font-family:var(--lg-sans);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--lg-muted);margin:0 0 4px}
.lg-info a{text-decoration:none;color:var(--lg-text);font-weight:500}
.lg-info a:hover{color:var(--lg-gold)}
.lg-form{background:#fff;border:1px solid var(--lg-line);padding:clamp(22px,3.4vw,38px)}
.lg-form .row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.lg-form label{display:block;font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--lg-muted);margin:0 0 7px}
.lg-form input,.lg-form select,.lg-form textarea{width:100%;padding:13px 14px;border:1px solid var(--lg-line);background:var(--lg-paper);font:400 .94rem var(--lg-sans);color:var(--lg-text);border-radius:0}
.lg-form input:focus,.lg-form select:focus,.lg-form textarea:focus{outline:0;border-color:var(--lg-gold);background:#fff}
.lg-form .fld{margin-bottom:16px}
.lg-form textarea{resize:vertical;min-height:130px}
.lg-form .lg-btn{width:100%;justify-content:center;margin-top:4px}
.lg-form__msg{margin-top:14px;font-weight:600;font-size:.9rem}
@media(max-width:860px){.lg-contact{grid-template-columns:1fr}.lg-form .row2{grid-template-columns:1fr}}

/* ---------- mapa / ubicación ---------- */
.lg-map{border:1px solid var(--lg-line);overflow:hidden}
.lg-map iframe{display:block;width:100%;height:clamp(280px,42vh,420px);border:0}

/* ---------- CTA final ---------- */
.lg-cta{text-align:center}
.lg-cta__actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:28px}

/* ---------- footer ---------- */
.lg-footer{background:var(--lg-ink);color:#c8d3de;padding-block:clamp(48px,6vw,76px) 0}
.lg-footer a{color:#c8d3de;text-decoration:none}
.lg-footer a:hover{color:var(--lg-gold)}
.lg-footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(26px,4vw,56px)}
.lg-footer h3{font-family:var(--lg-sans);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:#fff;margin:0 0 18px}
.lg-footer ul{list-style:none;margin:0;padding:0}
.lg-footer li{margin-bottom:11px;font-size:.92rem}
.lg-footer__brand img{max-height:56px;width:auto;margin-bottom:18px;filter:brightness(0) invert(1)}
.lg-footer__brand p{font-size:.94rem;color:#a9b8c7;max-width:42ch}
.lg-social{display:flex;gap:10px;margin-top:20px}
.lg-social a{width:40px;height:40px;border:1px solid rgba(255,255,255,.22);display:grid;place-items:center}
.lg-social a:hover{background:var(--lg-gold);border-color:var(--lg-gold);color:#fff}
.lg-social svg{width:17px;height:17px}
.lg-footer__bottom{margin-top:clamp(34px,5vw,58px);border-top:1px solid rgba(255,255,255,.14);padding-block:22px;display:flex;flex-wrap:wrap;gap:10px 20px;justify-content:space-between;font-size:.8rem;color:#93a3b4}
@media(max-width:860px){.lg-footer__grid{grid-template-columns:1fr 1fr}.lg-footer__brand{grid-column:1/-1}}
@media(max-width:520px){.lg-footer__grid{grid-template-columns:1fr}}

/* ---------- WhatsApp flotante ---------- */
.lg-wa{position:fixed;right:18px;bottom:18px;z-index:9990;width:56px;height:56px;border-radius:50%;background:#25D366;display:grid;place-items:center;box-shadow:0 12px 26px -10px rgba(0,0,0,.5)}
.lg-wa svg{width:30px;height:30px;fill:#fff}

/* ---------- páginas internas (sección / servicio / detalle) ---------- */
.lg-page-head{background:var(--lg-ink);color:#fff;padding-block:clamp(48px,7vw,86px)}
.lg-page-head h1{color:#fff;margin-bottom:14px}
.lg-crumbs{display:flex;flex-wrap:wrap;gap:8px;font-size:.8rem;color:#9fb1c2;margin:0;padding:0;list-style:none}
.lg-crumbs a{color:#cddae6;text-decoration:none}
.lg-crumbs a:hover{color:var(--lg-gold)}
.lg-crumbs li+li:before{content:"/";margin-right:8px;color:#5d7a94}
.lg-inner{display:grid;grid-template-columns:1fr 320px;gap:clamp(30px,5vw,64px);align-items:start}
.lg-aside{border:1px solid var(--lg-line);padding:26px}
.lg-aside h3{font-family:var(--lg-sans);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--lg-muted);margin:0 0 16px}
.lg-aside ul{list-style:none;margin:0;padding:0}
.lg-aside li{border-top:1px solid var(--lg-line)}
.lg-aside li a{display:block;padding:12px 0;font-size:.92rem;text-decoration:none;color:var(--lg-text)}
.lg-aside li a:hover{color:var(--lg-gold)}
.lg-aside__cta{margin-top:24px;background:var(--lg-paper);padding:22px}
.lg-aside__cta p{font-size:.9rem;color:var(--lg-muted);margin:0 0 16px}
@media(max-width:900px){.lg-inner{grid-template-columns:1fr}}

/* ---------- animación de entrada ---------- */
.lg-rev{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.lg-rev.is-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .lg-rev{opacity:1;transform:none;transition:none}
  .lg-card__img img,.lg-btn,.lg-area__ico{transition:none}
}

/* ---------- impresión ---------- */
@media print{
  .lg-header,.lg-wa,.lg-form,.lg-footer__bottom{display:none}
  .lg-sec{padding-block:24px}
}

/* ============================================================
   SERVICIOS · variantes del campo `visual` del grid_block
   Las cinco comparten el marcado .lg-sitem; solo cambia la clase del
   contenedor. Así el PHP es uno solo y la maqueta vive aquí.
     --horizontal   fila: imagen al lado del texto
     --vertical     dos columnas, imagen arriba
     --intercalado  filas alternando el lado de la imagen
     --popup        tarjetas compactas + <dialog> con el contenido
     --grid         rejilla de tres
   ============================================================ */
.lg-slist{display:grid;gap:clamp(22px,3vw,38px)}
.lg-sitem{background:var(--lg-white);border:1px solid var(--lg-line);overflow:hidden}
.lg-sitem__media{margin:0;overflow:hidden;background:var(--lg-paper)}
.lg-sitem__media img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
/* Aviso solo para el dueño/superuser cuando falta la foto del servicio. */
.lg-sitem__media--falta{display:grid;place-items:center;min-height:170px;border-bottom:1px dashed var(--lg-line)}
.lg-sitem__media--falta span{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--lg-muted)}
.lg-sitem__body{padding:clamp(20px,2.4vw,30px);display:flex;flex-direction:column;gap:10px}
.lg-sitem__n{font-family:var(--lg-sans);font-size:.72rem;letter-spacing:.18em;color:var(--lg-gold)}
.lg-sitem__t{font-family:var(--lg-serif);font-size:clamp(1.12rem,1.7vw,1.4rem);color:var(--lg-ink);margin:0;line-height:1.2}
.lg-sitem__d{color:var(--lg-muted);font-size:.95rem;margin:0}
.lg-sitem__txt{font-size:.94rem}
.lg-sitem__txt ul{padding-left:1.1em}
.lg-sitem__foot{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:auto;padding-top:14px}

/* Botón chico de WhatsApp ("¿Agendar una cita?" marcado) */
.lg-wabtn{display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border:1px solid #25D366;border-radius:999px;
  background:#25D366;text-decoration:none;font-size:.78rem;font-weight:700;letter-spacing:.04em;min-height:40px}
.lg a.lg-wabtn,.lg-wabtn span{color:#fff}
.lg-wabtn svg{width:16px;height:16px;fill:#fff;flex:none}
.lg-wabtn:hover{background:#1da851;border-color:#1da851}

/* --- horizontal: imagen a la izquierda --- */
.lg-slist--horizontal .lg-sitem{display:grid;grid-template-columns:minmax(200px,34%) 1fr}
.lg-slist--horizontal .lg-sitem__media{height:100%;min-height:210px}

/* --- intercalado: igual, pero alternando el lado --- */
.lg-slist--intercalado .lg-sitem{display:grid;grid-template-columns:minmax(200px,42%) 1fr}
.lg-slist--intercalado .lg-sitem__media{height:100%;min-height:230px}
.lg-slist--intercalado .lg-sitem:nth-child(even) .lg-sitem__media{order:2}

/* --- vertical: dos columnas, imagen arriba --- */
.lg-slist--vertical{grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr))}
.lg-slist--vertical .lg-sitem{display:flex;flex-direction:column}
.lg-slist--vertical .lg-sitem__media{aspect-ratio:4/3}

/* --- grid: tres por fila --- */
.lg-slist--grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr))}
.lg-slist--grid .lg-sitem{display:flex;flex-direction:column}
.lg-slist--grid .lg-sitem__media{aspect-ratio:4/3}

/* --- popup: tarjetas compactas, el detalle abre en modal --- */
.lg-slist--popup{grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr))}
.lg-slist--popup .lg-sitem{display:flex;flex-direction:column;cursor:default}
.lg-slist--popup .lg-sitem__media{aspect-ratio:16/10}
.lg-modal{border:0;padding:0;max-width:min(760px,92vw);width:100%;background:transparent}
.lg-modal::backdrop{background:rgba(15,42,67,.62)}
.lg-modal__box{position:relative;background:var(--lg-white);padding:clamp(22px,3vw,38px);max-height:88vh;overflow:auto}
.lg-modal__x{position:absolute;top:10px;right:12px;width:42px;height:42px;border:0;background:none;font-size:30px;line-height:1;
  color:var(--lg-muted);cursor:pointer}
.lg-modal__x:hover{color:var(--lg-ink)}
.lg-modal__img{display:block;width:100%;height:auto;object-fit:cover;object-position:top;margin-bottom:18px}

@media(max-width:760px){
  /* En móvil todas caen a una columna con la imagen arriba. */
  .lg-slist--horizontal .lg-sitem,
  .lg-slist--intercalado .lg-sitem{grid-template-columns:1fr}
  .lg-slist--horizontal .lg-sitem__media,
  .lg-slist--intercalado .lg-sitem__media{min-height:0;aspect-ratio:16/10}
  .lg-slist--intercalado .lg-sitem:nth-child(even) .lg-sitem__media{order:0}
}