/* ============================================================
   PRESENTACIONES DE SERVICIOS (inc/servicios-visual.php)
   Compartido por TODOS los temas. Maqueta las cinco variantes:
     horizontal · vertical · intercalado · popup · grid
   Cada tema enruta aquí solo las que NO resuelve por su cuenta; las
   que ya tiene (en producción en decenas de sitios) no se tocan.

   Cómo adopta el diseño de cada tema: no trae colores propios. Todo
   sale de variables que el tema pasa en el wrapper:
     --sv-accent  color de marca      --sv-ink    titulares
     --sv-line    bordes              --sv-radius esquinas
   La tipografía se hereda del tema, así que las tarjetas se ven
   nativas en cada plantilla.

   Archivo externo a propósito (no <style> en línea): ProCache
   regenera varias páginas en un mismo proceso PHP y un flag de
   "ya lo emití" se filtraba entre páginas dejándolas sin estilos.
   ============================================================ */

.sv{
  --sv-accent:#1f7fbf;
  --sv-ink:#16232e;
  --sv-line:rgba(128,128,128,.22);
  --sv-radius:10px;
  --sv-muted:rgba(90,100,112,.95);
  display:grid;
  gap:clamp(20px,2.8vw,34px);
  margin:clamp(20px,3vw,38px) 0 0;
}
.sv *{box-sizing:border-box}
.sv-item{background:#fff;border:1px solid var(--sv-line);border-radius:var(--sv-radius);overflow:hidden}
.sv-media{margin:0;overflow:hidden;background:rgba(128,128,128,.07)}
/* object-position:top = el recorte se ve desde ARRIBA: no corta las cabezas. */
.sv-media img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.sv-media--falta{display:grid;place-items:center;min-height:160px;border-bottom:1px dashed var(--sv-line)}
.sv-media--falta span{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--sv-muted)}
.sv-body{padding:clamp(18px,2.2vw,28px);display:flex;flex-direction:column;gap:9px}
.sv-n{font-size:.72rem;font-weight:700;letter-spacing:.16em;color:var(--sv-accent)}
.sv-t{font-size:clamp(1.05rem,1.6vw,1.3rem);color:var(--sv-ink);margin:0;line-height:1.25}
.sv-t a{color:inherit;text-decoration:none}
.sv-t a:hover{color:var(--sv-accent)}
.sv-d{color:var(--sv-muted);font-size:.94rem;margin:0}
.sv-txt{font-size:.92rem;color:var(--sv-muted)}
.sv-txt p{margin:0 0 .8em}
.sv-txt ul{margin:0 0 .8em;padding-left:1.1em}
.sv-foot{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:auto;padding-top:12px}
.sv-precio{font-weight:700;color:var(--sv-ink);font-size:.95rem}
.sv-mas{display:inline-flex;align-items:center;gap:7px;min-height:42px;padding:10px 18px;border-radius:calc(var(--sv-radius) - 2px);
  border:1px solid var(--sv-accent);background:transparent;color:var(--sv-accent);font:600 .84rem/1 inherit;text-decoration:none;cursor:pointer}
.sv-mas:hover{background:var(--sv-accent);color:#fff}

/* --- horizontal: imagen al lado del texto --- */
.sv--horizontal .sv-item{display:grid;grid-template-columns:minmax(190px,34%) 1fr}
.sv--horizontal .sv-media{height:100%;min-height:200px}

/* --- intercalado: como horizontal, alternando el lado de la imagen --- */
.sv--intercalado .sv-item{display:grid;grid-template-columns:minmax(190px,42%) 1fr}
.sv--intercalado .sv-media{height:100%;min-height:220px}
.sv--intercalado .sv-item:nth-child(even) .sv-media{order:2}

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

/* --- grid: tres por fila --- */
.sv--grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.sv--grid .sv-item{display:flex;flex-direction:column}
.sv--grid .sv-media{aspect-ratio:4/3}

/* --- popup: tarjetas compactas; el detalle abre en <dialog> --- */
.sv--popup{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.sv--popup .sv-item{display:flex;flex-direction:column}
.sv--popup .sv-media{aspect-ratio:16/10}
.sv-modal{border:0;padding:0;max-width:min(760px,92vw);width:100%;background:transparent}
.sv-modal::backdrop{background:rgba(12,24,36,.62)}
.sv-modal__box{position:relative;background:#fff;border-radius:var(--sv-radius);padding:clamp(20px,3vw,36px);max-height:88vh;overflow:auto}
.sv-modal__x{position:absolute;top:8px;right:10px;width:42px;height:42px;border:0;background:none;font-size:28px;line-height:1;
  color:var(--sv-muted);cursor:pointer}
.sv-modal__x:hover{color:var(--sv-ink)}
.sv-modal__img{display:block;width:100%;height:auto;object-fit:cover;object-position:top;border-radius:calc(var(--sv-radius) - 2px);margin-bottom:16px}
.sv-modal h3{color:var(--sv-ink);margin:0 0 8px}
.sv-grupos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:18px;margin-top:18px}
.sv-grupos h4{color:var(--sv-ink);margin:0 0 6px;font-size:.95rem}

/* --- botón chico de WhatsApp (check "¿Agendar una cita?") --- */
.sv-wa{display:inline-flex;align-items:center;gap:7px;min-height:42px;padding:10px 16px;border-radius:999px;
  border:1px solid #25D366;background:#25D366;color:#fff;font:700 .78rem/1 inherit;letter-spacing:.03em;text-decoration:none}
.sv-wa span{color:#fff}
.sv-wa svg{width:16px;height:16px;fill:#fff;flex:none}
.sv-wa:hover{background:#1da851;border-color:#1da851;color:#fff}

@media(max-width:760px){
  /* En móvil todo cae a una columna con la imagen arriba. */
  .sv--horizontal .sv-item{grid-template-columns:1fr}
  .sv--horizontal .sv-media{min-height:0;aspect-ratio:16/10}
}

@media(max-width:760px){
  /* intercalado también cae a una columna con la imagen arriba */
  .sv--intercalado .sv-item{grid-template-columns:1fr}
  .sv--intercalado .sv-media{min-height:0;aspect-ratio:16/10}
  .sv--intercalado .sv-item:nth-child(even) .sv-media{order:0}
}

/* --- contenedor propio + cabecera de la sección ---------------------------
   Al despachar a este partial nos saltamos el <section>/<wrap> del tema, así
   que la sección trae el suyo: sin esto las tarjetas salían a sangre, de
   borde a borde de la pantalla. La cabecera repite rótulo/título/resumen del
   bloque, que antes se perdían al elegir una de estas variantes. */
.sv-sec{padding-block:clamp(40px,6vw,84px)}
.sv-wrap{max-width:1180px;margin:0 auto;padding-inline:clamp(16px,4vw,40px)}
.sv-head{max-width:66ch;margin:0 0 clamp(6px,1.5vw,16px)}
.sv-eyebrow{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--sv-accent);margin:0 0 10px}
.sv-h2{font-size:clamp(1.6rem,3.2vw,2.4rem);color:var(--sv-ink);margin:0 0 10px;line-height:1.15}
.sv-lead{color:var(--sv-muted);font-size:clamp(.98rem,1.3vw,1.08rem)}
.sv-lead p{margin:0 0 .7em}
.sv-lead p:last-child{margin-bottom:0}

/* La foto también enlaza a la página interna (salvo en la variante popup,
   donde abre la ventana). */
.sv-foto{display:block;line-height:0}