/* ═══════════════════════════════════════════════════════════
   SERVIALTO — Sistema visual
   Plan Integral de Renovación Digital · Vicente Becker Fernández
   Paleta de la tabla 2 y composición según los mockups.

   Carbón arriba → blanco en el contenido → acción en rojo → carbón al cerrar.
   ═══════════════════════════════════════════════════════════ */

:root{
  /* ── Paleta corporativa ── */
  --sv-red:            #FF0D0D;
  --sv-black:          #0D0D0D;
  --sv-charcoal:       #111111;
  --sv-graphite:       #404040;
  --sv-white:          #FFFFFF;
  --sv-off-white:      #FDFDFD;
  --sv-silver:         #A0A0A0;
  --sv-green-logo:     #008A00;

  /* ── Paleta funcional de interfaz ── */
  --sv-info-bg:        #FBFBFA;
  --sv-border:         #E5E5E5;
  --sv-divider:        #EEEEEE;
  --sv-placeholder:    #9A9A9A;
  --sv-text-secondary: #6D6D6D;
  --sv-nav-text:       #303030;

  /* ── Derivados de trabajo ── */
  --sv-red-dark:       #DB0505;
  --sv-red-tint:       #FFF1F1;
  --sv-visita-bg:      #FDF2EF;   /* caja de visita, según el mockup */
  --sv-visita-bd:      #F7DDD6;

  /* ── Semánticos del módulo de visita (solo ahí) ── */
  --sv-amber:          #B57314;
  --sv-amber-bg:       #FDF6EA;
  --sv-green-step:     #1B7A45;
  --sv-green-bg:       #EDF7F1;

  /* ── Tipografía ── */
  --sv-display: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --sv-body:    'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ── Métrica ── */
  --sv-max:      1660px;
  --sv-gutter:   clamp(18px, 3vw, 44px);
  --sv-radius:   10px;
  --sv-radius-s: 6px;
  --sv-shadow:   0 1px 3px rgba(13,13,13,.06);
  --sv-shadow-h: 0 10px 34px rgba(13,13,13,.13);
}

/* ═══ BASE ═══ */
*,*::before,*::after{box-sizing:border-box;}
/* clip, no hidden: 'hidden' en un ancestro anula position:sticky del menú */
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:clip;}
body{
  margin:0; overflow-x:clip;
  background:var(--sv-white); color:var(--sv-nav-text);
  font:400 15.5px/1.58 var(--sv-body);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block;}
a{color:inherit;}
button{font:inherit;}

h1,h2,h3,h4{
  font-family:var(--sv-display); font-weight:700; line-height:1.18;
  margin:0 0 15px; color:var(--sv-black);
  text-wrap:balance; letter-spacing:-.004em;
}
h1{font-size:clamp(27px,2.9vw,42px); font-weight:900; letter-spacing:-.018em;}
h2{font-size:clamp(23px,2.4vw,31px); font-weight:800; letter-spacing:-.012em;}
h3{font-size:clamp(17px,1.6vw,20px); font-weight:700; line-height:1.2;}
h4{font-size:18px; line-height:1.25; margin-bottom:7px;}
p{margin:0 0 15px; max-width:68ch;}
p:last-child{margin-bottom:0;}
strong{font-weight:700;}
em{font-style:normal; color:var(--sv-red);}
.sv-rojo{color:var(--sv-red);}

.sv-label{
  display:inline-flex; align-items:center; gap:7px;
  font:700 12.5px/1 var(--sv-body);
  letter-spacing:.06em;
  color:var(--sv-red); margin-bottom:11px;
}
.sv-muted{color:var(--sv-text-secondary);}

/* ═══ LAYOUT ═══ */
.sv-wrap{max-width:var(--sv-max); margin:0 auto; padding:0 var(--sv-gutter);}
.sv-section{padding:58px 0;}
.sv-section--alt{background:var(--sv-off-white);}
.sv-section--dark{background:var(--sv-charcoal);}
.sv-section--dark h2,.sv-section--dark h3{color:var(--sv-white);}
.sv-section--dark p{color:var(--sv-silver);}
.sv-head{max-width:720px; margin:0 0 32px;}
.sv-head--center{margin-inline:auto; text-align:center;}
.sv-head p{color:var(--sv-text-secondary); margin-inline:auto;}

.sv-grid{display:grid; gap:18px;}
.sv-grid--2{grid-template-columns:repeat(2,1fr);}
.sv-grid--3{grid-template-columns:repeat(3,1fr);}
.sv-grid--4{grid-template-columns:repeat(4,1fr);}

/* ═══ BOTONES ═══ */
.sv-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font:700 14px/1 var(--sv-body);
  padding:12px 20px; border-radius:var(--sv-radius-s);
  text-decoration:none; border:1.5px solid transparent; cursor:pointer;
  transition:background .17s, border-color .17s, color .17s; white-space:nowrap;
}
.sv-btn--primary{background:var(--sv-red); color:#fff;}
.sv-btn--primary:hover{background:var(--sv-red-dark);}
.sv-btn--secondary{background:#fff; color:var(--sv-nav-text); border-color:var(--sv-border);}
.sv-btn--secondary:hover{border-color:var(--sv-black); color:var(--sv-black);}
.sv-btn--ghost{background:transparent; color:#fff; border-color:rgba(255,255,255,.42);}
.sv-btn--ghost:hover{background:rgba(255,255,255,.1); border-color:#fff;}
.sv-btn--wa{background:#25D366; color:#fff;}
.sv-btn--wa:hover{background:#1FAE55;}
.sv-btn--full{width:100%;}
.sv-btn--lg{padding:16px 26px; font-size:14.5px;}
.sv-btn--nav{
  padding:19px 44px; font-size:13px; letter-spacing:.03em;
  background:var(--sv-red); color:#fff; border-color:var(--sv-red);
  flex:none; white-space:nowrap; box-sizing:border-box;
}
.sv-btn--nav:hover{background:var(--sv-red-dark); border-color:var(--sv-red-dark);}
.sv-nav__links>li{flex:none; display:flex; align-items:center;}
/* El selector del menu gana en especificidad: hay que fijar aqui TODO el boton,
   no solo el color, o su relleno propio (8px 0) aplasta el boton. */
.sv-nav__links>li>a.sv-btn--nav{
  padding:13px clamp(18px, 1.9vw, 28px);
  font-size:clamp(11px, .88vw, 12.5px); font-weight:700; letter-spacing:.04em;
  color:#fff; background:var(--sv-red); border:1.5px solid var(--sv-red);
  border-bottom:1.5px solid var(--sv-red);
  border-radius:var(--sv-radius-s);
  line-height:1; white-space:nowrap;
}
.sv-nav__links>li>a.sv-btn--nav:hover{
  color:#fff; background:var(--sv-red-dark); border-color:var(--sv-red-dark);
}

/* ═══ FRANJA SUPERIOR ═══ */
.sv-topbar{background:var(--sv-black); color:#fff; font-size:14px;}
.sv-topbar .sv-wrap{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; padding-block:10px;
}
.sv-topbar__i{display:flex; align-items:center; gap:9px; color:#fff;}
.sv-topbar__i svg{color:var(--sv-red); flex:none;}
a.sv-topbar__i{text-decoration:none; font-weight:600;}
a.sv-topbar__i:hover{color:var(--sv-red);}

/* ═══ NAVEGACIÓN ═══ */
.sv-nav{
  background:#fff; border-bottom:1px solid var(--sv-divider);
  position:sticky; top:0; z-index:60;
  transition:box-shadow .2s;
}
/* al desplazarse, el menú se separa del contenido con una sombra */
.sv-nav.is-fijo{box-shadow:0 4px 20px rgba(13,13,13,.09);}
.sv-nav .sv-wrap{display:flex; align-items:center; gap:clamp(16px, 2.2vw, 34px); padding-block:12px;}
.sv-nav__logo{flex:none; text-decoration:none; display:block;}
.sv-nav__logo img{height:clamp(38px, 3.2vw, 50px); width:auto;}
.sv-nav__links{
  display:flex; align-items:center; gap:clamp(16px, 2.1vw, 32px);
  list-style:none; margin:0 0 0 auto; padding:0;
  flex:0 1 auto; min-width:0;
}
.sv-nav__links>li>a{
  text-decoration:none; color:var(--sv-black);
  font-size:clamp(13.5px, 1.05vw, 15px); font-weight:700; padding:8px 0;
  border-bottom:2.5px solid transparent;
  transition:color .16s, border-color .16s;
}
.sv-nav__links>li>a:hover{color:var(--sv-black);}
.sv-nav__links>li>a.is-active{color:var(--sv-black); border-bottom-color:var(--sv-red);}
.sv-nav__tel{
  display:flex; align-items:center; gap:8px; text-decoration:none;
  font-weight:700; color:var(--sv-black); white-space:nowrap;
}
.sv-nav__tel svg{color:var(--sv-red);}
.sv-nav__tel:hover{color:var(--sv-red);}
/* ── Desplegable de Reparación ── */
.sv-nav__desp{position:relative;}
.sv-nav__desp>a{display:inline-flex; align-items:center; gap:6px;}
.sv-nav__desp>a svg{transition:transform .2s; margin-top:1px;}
.sv-nav__desp:hover>a svg,
.sv-nav__desp:focus-within>a svg{transform:rotate(180deg);}

.sv-nav__sub{
  position:absolute; top:calc(100% + 10px); left:-18px;
  min-width:290px; list-style:none; margin:0; padding:8px 0;
  background:#fff; border:1px solid var(--sv-border);
  border-radius:var(--sv-radius);
  box-shadow:0 12px 34px rgba(13,13,13,.14);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .17s, transform .17s, visibility .17s;
  z-index:70;
}
.sv-nav__desp:hover .sv-nav__sub,
.sv-nav__desp:focus-within .sv-nav__sub{opacity:1; visibility:visible; transform:translateY(0);}
/* puente invisible: el ratón puede bajar sin que se cierre */
.sv-nav__sub::before{content:""; position:absolute; top:-12px; left:0; right:0; height:12px;}

.sv-nav__sub a{
  display:block; padding:10px 20px;
  font-size:14px; font-weight:500; color:var(--sv-nav-text);
  text-decoration:none; white-space:nowrap;
  border-bottom:0; transition:background .14s, color .14s;
}
.sv-nav__sub a:hover{background:var(--sv-info-bg); color:var(--sv-red);}
.sv-nav__sub--destacado{
  color:var(--sv-red)!important; font-weight:700!important;
  border-top:1px solid var(--sv-divider); margin-top:6px; padding-top:12px!important;
}

.sv-nav__burger{display:none; background:none; border:0; cursor:pointer; padding:8px; margin-left:auto;}
.sv-nav__burger span{display:block; width:23px; height:2px; background:var(--sv-black); border-radius:2px;}
.sv-nav__burger span+span{margin-top:5px;}

/* ═══ HERO ═══
   Texto a la izquierda sobre blanco, fotografía a sangre a la derecha,
   formulario flotando encima de la fotografía. */
.sv-hero{position:relative; background:#fff; overflow:hidden;}
.sv-hero__grid{
  display:grid;
  /* El formulario encoge con la pantalla en vez de mantener un ancho fijo */
  grid-template-columns:minmax(0,1fr) clamp(292px, 24vw, 372px);
  gap:clamp(20px, 2.4vw, 40px); align-items:center;
  /* padding-block: no tocar los laterales, que los pone .sv-wrap */
  padding-block:clamp(28px, 3vw, 44px) clamp(32px, 3.2vw, 48px);
  min-height:clamp(430px, 34vw, 520px);
}
/* El texto nunca debe pasar del punto donde empieza la fotografía */
.sv-hero__texto{position:relative; z-index:2; max-width:min(600px, 39vw);}
.sv-hero__visual{position:static;}
/* La fotografía sale del contenedor y llega al borde de la pantalla */
.sv-hero__foto{
  position:absolute; top:0; right:0; bottom:0;
  width:53%; z-index:0;
}
.sv-hero__foto img{width:100%; height:100%; object-fit:cover;}
.sv-hero__foto::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,#fff 0,rgba(255,255,255,.55) 7%,rgba(255,255,255,0) 22%);
}
.sv-hero .sv-form{position:relative; z-index:2; width:100%;}

.sv-badge{
  display:inline-flex; align-items:center; gap:7px;
  font:700 12px/1 var(--sv-body); color:var(--sv-red);
  background:var(--sv-visita-bg); border:1px solid var(--sv-visita-bd);
  border-radius:50px; padding:8px 15px; margin-bottom:18px;
}
.sv-hero h1{margin-bottom:14px; line-height:1.16;}
.sv-hero__sub{font-size:clamp(13.5px,1.05vw,15px); line-height:1.55; color:var(--sv-graphite); margin-bottom:22px; max-width:none;}
/* Los botones se reparten el ancho completo, alineados con la caja de la visita */
.sv-hero__btns{display:flex; gap:11px; margin-top:18px;}
.sv-hero__btns .sv-btn{flex:1 1 0; min-width:0;}

/* ── Caja de la visita técnica ── */
.sv-visita{
  background:var(--sv-visita-bg); border:1px solid var(--sv-visita-bd);
  border-radius:var(--sv-radius); padding:20px 22px;
}
.sv-visita__t{
  display:flex; align-items:center; gap:10px;
  font:800 21px/1.2 var(--sv-display); color:var(--sv-black); margin-bottom:14px;
}
.sv-visita__t svg{color:var(--sv-red); flex:none;}
.sv-visita ul{list-style:none; margin:0; padding:0; display:grid; gap:9px;}
.sv-visita li{
  position:relative; padding-left:25px;
  font-size:14.5px; line-height:1.5; color:var(--sv-graphite);
}
.sv-visita li::before{
  content:""; position:absolute; left:0; top:3px;
  width:14px; height:14px; border-radius:50%; background:var(--sv-red);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/14px no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/14px no-repeat;
}

/* ═══ FORMULARIO ═══ */
.sv-form{
  background:rgba(255,255,255,0.55);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,0.4);
  border-radius:var(--sv-radius); padding:20px 19px;
  box-shadow:0 8px 32px rgba(0,0,0,0.14);
}
.sv-form h3,
.sv-form__t{font-size:19px; margin-bottom:13px; text-align:center;}
.sv-form__campo{margin-bottom:9px;}
.sv-form__campo label{
  display:block; font-size:12.5px; font-weight:700;
  margin-bottom:4px; color:var(--sv-black);
}
.sv-form__campo label i{color:var(--sv-red); font-style:normal;}
.sv-form input[type=text],.sv-form input[type=tel],
.sv-form select,.sv-form textarea{
  width:100%; padding:9px 11px;
  border:1px solid var(--sv-border); border-radius:var(--sv-radius-s);
  background:#fff; color:var(--sv-nav-text);
  font:400 13.5px/1.4 var(--sv-body);
  transition:border-color .16s, box-shadow .16s;
}
.sv-form ::placeholder{color:var(--sv-placeholder);}
.sv-form input:focus,.sv-form select:focus,.sv-form textarea:focus{
  outline:none; border-color:var(--sv-red);
  box-shadow:0 0 0 3px rgba(255,13,13,.11);
}
.sv-form textarea{min-height:58px; resize:vertical;}
.sv-form__legal{
  display:flex; gap:9px; align-items:flex-start;
  font-size:13px; color:var(--sv-text-secondary);
  line-height:1.38; margin:10px 0 12px; font-size:11.5px;
}
.sv-form__legal input{margin-top:3px; flex:none; accent-color:var(--sv-red);}
.sv-form__legal a{color:var(--sv-red);}
.sv-form__pie{
  display:flex; gap:7px; align-items:flex-start; justify-content:center;
  font-size:11.5px; color:#666666; margin:11px 0 0; line-height:1.4;
}
.sv-form__pie svg{color:var(--sv-nav-text); flex:none; margin-top:2px;}

/* ── Panel de cristal (solo home): mismo formulario original, sin iconos,
   solo el aspecto — transparencia validada, blur bajo a propósito
   (con 18-20px el blanco de la camiseta y la pared se mezclan a gris). ── */
.sv-form--cristal{
  background:rgba(255,255,255,.03);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  border:1px solid rgba(255,255,255,.45);
  border-radius:18px;
  padding:24px 22px;
  box-shadow:0 8px 30px rgba(0,0,0,.1), inset 0 1px 0 rgba(255,255,255,.35);
}
.sv-form--cristal .sv-form__t{
  color:#111111; font-weight:800;
  text-shadow:0 1px 2px #fff, 0 1px 8px rgba(255,255,255,.9), 0 1px 14px rgba(255,255,255,.6);
}
.sv-form--cristal .sv-form__campo label{
  color:#111111; font-weight:600;
  text-shadow:0 1px 2px #fff, 0 1px 6px rgba(255,255,255,.85);
}
.sv-form--cristal .sv-form__campo label i{color:#EF2529;}
.sv-form--cristal input[type=text],
.sv-form--cristal input[type=tel],
.sv-form--cristal select,
.sv-form--cristal textarea{
  background:rgba(255,255,255,.82);
  border:1px solid rgba(255,255,255,.9);
  border-radius:9px; color:#1F2937;
}
.sv-form--cristal ::placeholder{color:#6B7280;}
.sv-form--cristal input:focus,
.sv-form--cristal select:focus,
.sv-form--cristal textarea:focus{
  border-color:#EF2529;
  box-shadow:0 0 0 2px rgba(239,37,41,.14);
  transition:border-color .18s ease, box-shadow .18s ease;
}
.sv-form--cristal .sv-form__legal{
  color:#111111;
  text-shadow:0 1px 2px #fff, 0 1px 6px rgba(255,255,255,.85);
}
.sv-form--cristal .sv-form__legal a{
  color:#EF2529; text-decoration:underline; font-weight:700;
  text-shadow:0 1px 2px #fff, 0 1px 6px rgba(255,255,255,.85);
}
.sv-form--cristal .sv-form__campo .sv-muted{
  color:#374151;
  text-shadow:0 1px 2px #fff, 0 1px 6px rgba(255,255,255,.85);
}
.sv-form--cristal .sv-btn--primary{background:#EF2529;}
.sv-form--cristal .sv-btn--primary:hover{background:#D31F23;}
.sv-form--cristal .sv-form__pie{
  color:rgba(255,255,255,.85);
  text-shadow:0 1px 2px rgba(0,0,0,.35);
}
.sv-form--cristal .sv-form__pie svg{color:rgba(255,255,255,.85);}
.sv-form--iconos .sv-btn--primary{height:48px; border-radius:9px;}

/* Columna del formulario un poco más ancha, solo en la home */
.sv-hero__grid--formw{grid-template-columns:minmax(0,1fr) clamp(320px, 25vw, 440px);}

/* ═══ BARRA DE CONFIANZA ═══ */
.sv-confianza{border-top:1px solid var(--sv-divider); background:#fff;}
.sv-confianza .sv-wrap{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:26px; padding-block:26px;
}
.sv-conf{display:flex; gap:15px; align-items:flex-start;}
.sv-conf svg{color:var(--sv-red); flex:none;}
.sv-conf strong{display:block; font-size:14.5px; font-weight:800; color:var(--sv-black); margin-bottom:4px; line-height:1.32;}
.sv-conf span{font-size:14px; color:var(--sv-text-secondary); line-height:1.45;}

/* ═══ TARJETAS DE APARATO ═══ */
.sv-card{
  background:#fff; border:1px solid var(--sv-border);
  border-radius:var(--sv-radius); padding:24px 22px;
  display:flex; gap:17px; align-items:flex-start;
  text-decoration:none; color:inherit;
  transition:border-color .17s, box-shadow .17s, transform .17s;
}
.sv-card:hover{border-color:var(--sv-red); box-shadow:var(--sv-shadow-h); transform:translateY(-2px);}
.sv-card__ico{color:var(--sv-red); flex:none; margin-top:1px;}
.sv-card__b{min-width:0;}
.sv-card h3{font-size:16.5px; font-weight:800; margin-bottom:5px;}
.sv-card p{font-size:14px; line-height:1.45; color:var(--sv-text-secondary); margin-bottom:10px;}
.sv-card__link{
  color:var(--sv-red); font-weight:700; font-size:13.5px;
  display:inline-flex; align-items:center; gap:6px; transition:gap .17s;
}
.sv-card:hover .sv-card__link{gap:10px;}

/* ═══ MARCAS — carrusel continuo ═══ */
.sv-carrusel{
  overflow:hidden; position:relative;
  -webkit-mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.sv-carrusel__pista{
  display:flex; align-items:center; gap:64px;
  width:max-content;
  animation:sv-desliza 42s linear infinite;
}
.sv-carrusel:hover .sv-carrusel__pista{animation-play-state:paused;}
@keyframes sv-desliza{
  from{transform:translateX(0);}
  to{transform:translateX(calc(-50% - 32px));}
}
img.sv-marca{
  height:46px; width:auto; max-width:none;
  flex:0 0 auto; object-fit:contain; display:block;
}
.sv-marcas-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:16px;
  margin:36px 0 0;
}
.sv-marcas-grid img{
  width:100%; height:auto; display:block;
  border-radius:10px; object-fit:contain;
}
@media(max-width:760px){
  .sv-marcas-grid{grid-template-columns:repeat(2,1fr);}
}
.sv-marcas__nota{
  text-align:center; font-size:13px; color:var(--sv-text-secondary);
  margin:30px auto 0; max-width:66ch;
}
@media (prefers-reduced-motion:reduce){
  .sv-carrusel__pista{animation:none; flex-wrap:wrap; justify-content:center; width:auto; gap:26px 44px;}
  .sv-carrusel{-webkit-mask:none; mask:none;}
  .sv-carrusel__pista img[aria-hidden]{display:none;}
}

/* Marcas de hostelería — texto estilizado (sin logos individuales) */
.sv-marcas-hosteleria{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:12px 16px; margin:36px 0 0;
}
.sv-marcas-hosteleria span{
  padding:8px 20px;
  border:1px solid var(--sv-border);
  border-radius:var(--sv-radius-s);
  font-size:14px; font-weight:600;
  color:var(--sv-text-secondary);
  background:var(--sv-bg);
  white-space:nowrap;
}

/* ═══ PROCESO + VISITA TÉCNICA ═══
   Según el mockup: los cuatro pasos en una caja a un tercio del ancho,
   y el módulo de la visita ocupando los dos tercios restantes. */
.sv-proceso{display:grid; grid-template-columns:33fr 67fr; gap:26px; align-items:start;}

/* Los 4 pasos, en su caja */
.sv-pasos-caja{
  border:1px solid var(--sv-border); border-radius:var(--sv-radius);
  background:#fff; padding:26px 26px 28px;
}
.sv-pasos-caja h2{margin-bottom:20px;}
.sv-pasos-l{list-style:none; margin:0; padding:0; display:grid; gap:16px;}
.sv-pasos-l li{display:flex; gap:12px; align-items:flex-start;}
.sv-pasos-l__n{
  flex:none; width:24px; height:24px; border-radius:50%;
  background:var(--sv-red); color:#fff;
  font:700 12.5px/24px var(--sv-body); text-align:center;
}
/* título y descripción seguidos, en la misma línea */
.sv-pasos-l h3{
  display:inline; font-size:13.5px; font-weight:800;
  color:var(--sv-black); margin:0;
}
.sv-pasos-l p{
  display:inline; font-size:12.5px; line-height:1.5;
  color:var(--sv-text-secondary); margin:0 0 0 5px;
}

/* Módulo de la visita: sin fondo, solo las tarjetas llevan color */
.sv-visita-mod{background:none; border:0; padding:0;}
.sv-visita-mod__head{text-align:center; max-width:70ch; margin:0 auto 20px;}
.sv-visita-mod__head h2{margin-bottom:6px;}
.sv-visita-mod__head p{color:var(--sv-text-secondary); font-size:13px; margin:0 auto;}

.sv-fases{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.sv-fase{border-radius:var(--sv-radius); padding:18px 16px 20px; text-align:center; border:1px solid;}
.sv-fase__n{font:800 22px/1 var(--sv-display); margin-bottom:5px;}
.sv-fase h3{font-size:14px; font-weight:800; margin-bottom:12px;}
.sv-fase__fila{display:flex; align-items:center; gap:11px; margin-bottom:12px;}
.sv-fase__ico{flex:none;}
.sv-fase__tag{
  flex:1; display:flex; align-items:center; justify-content:center;
  min-height:42px; padding:8px 10px; border-radius:var(--sv-radius-s);
  font:700 10.5px/1.3 var(--sv-body); letter-spacing:.04em;
  text-transform:uppercase; color:#fff; text-align:center;
}
.sv-fase p{font-size:12px; line-height:1.5; color:var(--sv-text-secondary); margin:0;}
.sv-fase__tag .sv-rojo,.sv-fase p .sv-rojo{color:inherit;}

.sv-fase--1{background:#FDF3F3; border-color:#F2D8D8;}
.sv-fase--1 .sv-fase__n{color:#E28C8C;}
.sv-fase--1 .sv-fase__ico{color:#E9A0A0;}
.sv-fase--1 .sv-fase__tag{background:#EF9C9C;}
.sv-fase--2{background:#FDF8EF; border-color:#F0E2C6;}
.sv-fase--2 .sv-fase__n{color:#D9AC63;}
.sv-fase--2 .sv-fase__ico{color:#E0B978;}
.sv-fase--2 .sv-fase__tag{background:#F0C87E;}
.sv-fase--3{background:#F1F8F4; border-color:#CFE4D8;}
.sv-fase--3 .sv-fase__n{color:#7CB496;}
.sv-fase--3 .sv-fase__ico{color:#8BC0A3;}
.sv-fase--3 .sv-fase__tag{background:#8CC3A6;}

/* Los 4 argumentos, alineados bajo las tarjetas */
.sv-argus{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:18px; padding:0; border:0;}
.sv-argu{display:flex; gap:11px; align-items:flex-start;}
.sv-argu svg{color:var(--sv-red); flex:none; margin-top:1px;}
.sv-argu h3{font-size:13px; font-weight:800; color:var(--sv-black); margin:0 0 2px; line-height:1.3;}
.sv-argu span{font-size:12px; color:var(--sv-text-secondary); line-height:1.45;}

@media (max-width:1000px){
  .sv-proceso{grid-template-columns:1fr; gap:26px;}
  .sv-fases{grid-template-columns:1fr;}
  .sv-argus{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:600px){
  .sv-argus{grid-template-columns:1fr;}
}

/* ═══ HOSTELERÍA ═══
   Según el mockup: fotografía a un tercio del ancho, información a dos
   tercios, y los tres servicios en fila con el botón a su derecha. */
.sv-horeca{
  display:grid; grid-template-columns:33fr 67fr;
  border-radius:var(--sv-radius); overflow:hidden; border:1px solid var(--sv-border);
}
.sv-horeca__foto{overflow:hidden;}
.sv-horeca__foto img{width:100%; height:100%; object-fit:cover; display:block;}
.sv-horeca__b{padding:30px 34px; background:var(--sv-info-bg);}
.sv-horeca__b h2{margin-bottom:12px;}
.sv-horeca__b>p{font-size:14px; line-height:1.55; color:var(--sv-text-secondary); max-width:76ch;}

/* Los tres servicios en fila, con el botón cerrando la línea */
.sv-horeca__items{
  display:grid; grid-template-columns:repeat(3,1fr) auto;
  gap:22px; align-items:start; margin-top:22px;
}
.sv-horeca__item{display:flex; gap:11px; align-items:flex-start;}
.sv-horeca__item svg{color:var(--sv-red); flex:none; margin-top:1px;}
.sv-horeca__item h3{font-size:13.5px; font-weight:800; color:var(--sv-black); margin:0 0 2px;}
.sv-horeca__item span{font-size:12.5px; color:var(--sv-text-secondary); line-height:1.42;}
.sv-horeca__items .sv-btn{white-space:normal; text-align:center; line-height:1.25;}

@media (max-width:1100px){
  .sv-horeca__items{grid-template-columns:repeat(3,1fr); gap:18px;}
  .sv-horeca__items .sv-btn{grid-column:1/-1; justify-self:start; margin-top:4px;}
}
@media (max-width:820px){
  .sv-horeca{grid-template-columns:1fr;}
  .sv-horeca__foto{min-height:210px;}
  .sv-horeca__b{padding:26px 22px;}
  .sv-horeca__items{grid-template-columns:1fr; gap:15px;}
}

/* ═══ COBERTURA ═══
   Franja baja: información compacta a la izquierda y el mapa,
   apaisado, ocupando el resto — según el mockup. */
.sv-cobertura{
  display:grid; grid-template-columns:33fr 67fr;
  align-items:start;
}
.sv-cobertura > div:not(.sv-mapa){
  padding-right:clamp(20px,3vw,40px);
}
.sv-cobertura h2{margin-bottom:10px;}
.sv-cobertura p{font-size:13px; line-height:1.55; color:var(--sv-text-secondary); margin:0;}
.sv-cobertura .sv-label{font-size:11px; margin-bottom:8px;}
.sv-cobertura__pin{
  display:flex; gap:8px; align-items:center;
  font-size:13px; font-weight:700; margin-top:14px; color:var(--sv-nav-text);
}
.sv-cobertura__pin svg{color:var(--sv-red); flex:none; width:16px; height:16px;}

.sv-mapa{border-radius:var(--sv-radius); overflow:hidden; align-self:start;}
.sv-mapa img{width:100%; height:auto; display:block;}

@media (max-width:760px){
  .sv-cobertura{grid-template-columns:1fr; gap:24px;}
  .sv-cobertura > div:not(.sv-mapa){padding-right:0;}
}

/* ═══ PREGUNTAS + OPINIONES ═══
   Según el mockup: preguntas compactas a un tercio y las opiniones,
   en tarjetas, ocupando los dos tercios restantes. */
.sv-2col{display:grid; grid-template-columns:32fr 68fr; gap:34px; align-items:stretch;}
.sv-2col>div:last-child{display:flex; flex-direction:column;}
.sv-op-head{flex:none;}
.sv-carrusel-r{flex:1; display:flex; flex-direction:column;}
.sv-resenas{flex:1;}
.sv-2col h2{margin-bottom:16px;}

/* Preguntas: lista compacta con marco */
.sv-faq{
  border:1px solid var(--sv-border); border-radius:var(--sv-radius);
  background:#fff; overflow:hidden;
}
.sv-faq__i{border-bottom:1px solid var(--sv-divider);}
.sv-faq__i:last-child{border-bottom:0;}
.sv-faq__q{
  width:100%; background:none; border:0; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:11px 14px; text-align:left;
  font:600 13px/1.35 var(--sv-body); color:var(--sv-nav-text);
}
.sv-faq__q h3{font-size:inherit; font-weight:inherit; line-height:inherit; letter-spacing:0;}
.sv-faq__q:hover{color:var(--sv-red); background:var(--sv-info-bg);}
.sv-faq__q::after{
  content:"+"; flex:none; font:400 17px/1 var(--sv-display);
  color:var(--sv-text-secondary); transition:transform .2s, color .2s;
}
.sv-faq__q[aria-expanded="true"]::after{transform:rotate(45deg); color:var(--sv-red);}
.sv-faq__a{
  padding:0 14px 14px; font-size:12.5px; line-height:1.55;
  color:var(--sv-text-secondary);
}
/* Oculta la respuesta mientras la pregunta esté cerrada.
   Se cubren las dos estructuras posibles —el botón suelto o envuelto en el
   h3— para que no dependa de dónde quede el encabezado. */
.sv-faq__q[aria-expanded="false"]+.sv-faq__a{display:none;}
:has(>.sv-faq__q[aria-expanded="false"])+.sv-faq__a{display:none;}
.sv-faq__i.is-cerrada .sv-faq__a{display:none;}

/* Opiniones en tarjetas */
/* Cabecera de opiniones con el logotipo de Google */
.sv-op-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; margin-bottom:18px;
}
.sv-op-head h2{margin:0;}
.sv-google{height:22px; width:auto; flex:none;}

/* Carrusel de opiniones: se arrastra con el dedo o con las flechas.
   Cuatro tarjetas visibles a la vez en escritorio. */
.sv-carrusel-r{position:relative;}
.sv-resenas{
  display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 42px) / 4);
  gap:14px; overflow-x:auto; scroll-snap-type:x mandatory;
  scroll-behavior:smooth; scrollbar-width:none; padding-bottom:2px;
}
.sv-resenas::-webkit-scrollbar{display:none;}
.sv-resenas>*{scroll-snap-align:start;}
.sv-car-btn{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:36px; height:36px; border-radius:50%;
  background:#fff; border:1px solid var(--sv-border); color:var(--sv-nav-text);
  display:grid; place-items:center; cursor:pointer;
  box-shadow:0 2px 10px rgba(13,13,13,.12);
  transition:background .16s, color .16s, border-color .16s;
}
.sv-car-btn:hover{background:var(--sv-red); border-color:var(--sv-red); color:#fff;}
.sv-car-btn--prev{left:-16px;}
.sv-car-btn--next{right:-16px;}
.sv-car-btn[hidden]{display:none;}
.sv-resena{
  background:#fff; border:1px solid var(--sv-border);
  border-radius:var(--sv-radius); padding:16px 17px;
}
.sv-resena__h{display:flex; align-items:center; gap:10px; margin-bottom:8px;}
.sv-resena__av{
  width:36px; height:36px; border-radius:50%; flex:none;
  display:grid; place-items:center; color:#fff; font:700 13px/1 var(--sv-body);
}
.sv-resena__n{font-weight:700; font-size:13.5px; color:var(--sv-black);}
.sv-resena__z{font-size:12px; color:var(--sv-text-secondary);}
.sv-resena__s{color:#F5A623; letter-spacing:1px; font-size:13px; margin-bottom:7px;}
.sv-resena p{font-size:12.5px; line-height:1.5; color:var(--sv-graphite); margin-bottom:10px;}
.sv-resena__srv{
  display:inline-block; font:700 11px/1 var(--sv-body);
  letter-spacing:.03em; text-transform:uppercase;
  background:var(--sv-red-tint); color:var(--sv-red);
  padding:5px 9px; border-radius:4px;
}

@media (max-width:1300px){
  .sv-resenas{grid-auto-columns:calc((100% - 28px) / 3);}
}
@media (max-width:1000px){
  .sv-2col{grid-template-columns:1fr; gap:34px;}
  .sv-resenas{grid-auto-columns:calc((100% - 28px) / 3);}
}
@media (max-width:700px){
  .sv-resenas{grid-auto-columns:86%;}
  .sv-car-btn{display:none;}
}

/* ═══ CIERRE ═══ */
.sv-cierre-wrap{
  max-width:var(--sv-max); margin:0 auto;
  padding:0 var(--sv-gutter) 58px;
}
.sv-cierre{
  display:grid; grid-template-columns:300px 1fr auto;
  align-items:stretch; gap:0;
  background:var(--sv-info-bg);
  border:1px solid var(--sv-border);
  border-radius:var(--sv-radius); overflow:hidden;
}
.sv-cierre__foto{position:relative; min-height:186px;}
.sv-cierre__foto img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.sv-cierre__b{
  display:flex; align-items:center; gap:38px; flex-wrap:wrap;
  padding:26px 34px; flex:1;
}
.sv-cierre__txt{min-width:280px; flex:1;}
.sv-cierre__b h2{font-size:clamp(21px,2vw,27px); margin-bottom:5px;}
.sv-cierre__b p{font-size:14.5px; margin:0;}
.sv-cierre__precio{
  display:inline-block; margin-top:9px; font-size:13.5px;
  border-left:3px solid var(--sv-red); padding-left:11px; color:var(--sv-nav-text);
}
.sv-cierre__btns{display:flex; flex-wrap:wrap; gap:10px; align-items:center;}

/* ═══ FOOTER ═══ */
.sv-footer{background:var(--sv-charcoal); color:var(--sv-silver); padding:52px 0 26px;}
.sv-footer__g{display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:36px;}
.sv-footer__logo img{height:56px; width:auto; margin-bottom:14px;}
.sv-footer h3{color:#fff; font-size:15.5px; letter-spacing:.03em; margin-bottom:13px;}
.sv-footer p{font-size:14.5px; line-height:1.55; color:var(--sv-silver);}
.sv-footer ul{list-style:none; margin:0; padding:0; display:grid; gap:8px;}
.sv-footer a{color:var(--sv-silver); text-decoration:none; font-size:14.5px;}
.sv-footer a:hover{color:#fff;}
.sv-footer__c li{display:flex; gap:10px; align-items:flex-start; font-size:14.5px;}
.sv-footer__c svg{color:var(--sv-red); flex:none; margin-top:3px;}
.sv-footer__bot{
  margin-top:36px; padding-top:20px;
  border-top:1px solid rgba(255,255,255,.1);
  display:flex; flex-wrap:wrap; gap:10px 20px;
  justify-content:space-between; font-size:13.5px;
}
.sv-footer__legal{display:flex; flex-wrap:wrap; gap:16px;}

/* ═══ WHATSAPP FLOTANTE ═══ */
.sv-wa{
  position:fixed; right:18px; bottom:18px; z-index:80;
  width:54px; height:54px; border-radius:50%;
  background:#25D366; color:#fff; display:grid; place-items:center;
  box-shadow:0 4px 16px rgba(0,0,0,.24); text-decoration:none;
}
.sv-wa:hover{background:#1FAE55;}

/* ═══════════════════ RESPONSIVE ═══════════════════ */
/* Entre el móvil y el escritorio el diseño se adapta solo mediante clamp():
   no hacen falta tramos intermedios. Por debajo de 1020px el hero se apila. */
@media (max-width:1020px){
  .sv-hero__grid{grid-template-columns:1fr; gap:24px; min-height:0; padding-block:0 40px;}
  .sv-hero__texto{max-width:none;}
  .sv-hero__foto{
    position:relative; inset:auto; width:calc(100% + var(--sv-gutter)*2);
    margin:0 calc(var(--sv-gutter)*-1) 26px; height:240px;
  }
  .sv-hero__foto::after{display:none;}
  .sv-confianza .sv-wrap{grid-template-columns:repeat(2,1fr); gap:22px;}
  .sv-grid--4{grid-template-columns:repeat(2,1fr);}
  .sv-fases{grid-template-columns:1fr;}
  .sv-visita-mod{padding:26px 20px;}
  .sv-argus{grid-template-columns:repeat(2,1fr);}
  .sv-horeca{grid-template-columns:1fr;}
  .sv-horeca__foto{min-height:220px;}
  .sv-horeca__b{padding:32px 26px;}
  .sv-cobertura{grid-template-columns:1fr; gap:34px;}
  .sv-cobertura > div:not(.sv-mapa){padding-right:0;}
  .sv-2col{grid-template-columns:1fr; gap:44px;}
  .sv-cierre{grid-template-columns:1fr;}
  .sv-cierre__foto{min-height:190px;}
  .sv-cierre__b{padding:28px 26px; flex-direction:column; align-items:flex-start; gap:22px;}
  .sv-footer__g{grid-template-columns:1fr 1fr; gap:30px;}
}
@media (max-width:760px){
  :root{--sv-gutter:18px;}
  .sv-section{padding:50px 0;}
  .sv-nav__burger{display:block;}
  .sv-nav__links{
    display:none; position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:stretch; gap:0; background:#fff;
    border-bottom:1px solid var(--sv-border); padding:6px 0; margin:0;
    box-shadow:0 12px 26px rgba(0,0,0,.09);
  }
  .sv-nav__links.is-open{display:flex;}
  .sv-nav__links>li>a,.sv-nav__tel{padding:13px var(--sv-gutter); border-bottom:0;}
  .sv-nav__desp{position:static;}
  .sv-nav__sub{
    position:static; opacity:1; visibility:visible; transform:none;
    min-width:0; border:0; box-shadow:none; padding:0 0 6px;
    background:var(--sv-info-bg);
  }
  .sv-nav__sub a{padding:10px calc(var(--sv-gutter) + 14px); font-size:13.5px;}
  .sv-nav__sub--destacado{margin-top:0; padding-top:10px!important;}
  .sv-nav__links>li>a.is-active{border-left:3px solid var(--sv-red); padding-left:calc(var(--sv-gutter) - 3px);}
  .sv-nav__links .sv-btn{margin:8px var(--sv-gutter) 6px;}
  .sv-nav .sv-wrap{position:relative;}
  .sv-topbar{font-size:12.5px;}
  .sv-topbar__i span{display:none;}

  .sv-grid--2,.sv-grid--3,.sv-grid--4{grid-template-columns:1fr;}
  .sv-confianza .sv-wrap{grid-template-columns:1fr; gap:16px;}
  .sv-argus{grid-template-columns:1fr; gap:15px;}
  .sv-footer__g{grid-template-columns:1fr; gap:26px;}
  .sv-hero__btns{flex-wrap:wrap;}
  .sv-hero__btns .sv-btn,.sv-cierre__btns .sv-btn{flex:1 1 100%;}
  .sv-carrusel__pista{gap:40px;}
  img.sv-marca{height:34px;}
  @keyframes sv-desliza{from{transform:translateX(0);}to{transform:translateX(calc(-50% - 20px));}}
  .sv-mapa{aspect-ratio:1/1;}
    .sv-wa{right:14px; bottom:calc(14px + env(safe-area-inset-bottom));}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important; transition-duration:.01ms!important;}
  html{scroll-behavior:auto;}
}
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--sv-red); outline-offset:2px;
}


/* ═══ BANNER DE COOKIES (heredado del sistema anterior) ═══ */
/* Sus reglas usan los nombres de color del sistema antiguo:
   se enlazan aquí con la paleta nueva en lugar de reescribirlas una a una. */
/* ═══ BANNER DE COOKIES (heredado del sistema anterior) ═══ */
:root {
  --rojo:        var(--sv-red);
  --negro2:      var(--sv-charcoal);
  --gris-mid:    #3A3A3A;
  --blanco:      var(--sv-white);
  --texto:       #E8E8E8;
  --font-display: var(--sv-display);
  --ancho-max:   var(--sv-max);
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--negro2);
  border-top: 3px solid var(--rojo);
  box-shadow: 0 -6px 30px rgba(0,0,0,0.6);
  z-index: 10000;
  animation: fadeUp 0.35s ease both;
}
.cookie-banner[hidden] { display: none; }

.cookie-banner__inner {
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: 20px 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  max-height: 78vh;
  overflow-y: auto;
}

.cookie-banner__txt {
  flex: 1 1 340px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--texto);
}
.cookie-banner__txt a {
  color: var(--rojo);
  text-decoration: underline;
}

.cookie-banner__btns {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.cookie-btn {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 12px 24px;
  min-width: 132px;
  border: 2px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.15s;
}
.cookie-btn:hover {
  opacity: 0.88;
  transform: translateY(-1px);
}
.cookie-btn:active {
  transform: translateY(0);
}
.cookie-btn--si {
  background: var(--rojo);
  color: var(--blanco);
}
.cookie-btn--no {
  background: var(--gris-mid);
  color: var(--blanco);
}
.cookie-btn--alt {
  background: transparent;
  color: var(--texto);
  border-color: var(--gris-mid);
  min-width: 0;
  padding: 12px 18px;
}

.cookie-opt {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--texto);
  cursor: pointer;
}
.cookie-opt input {
  margin-top: 3px;
  width: 17px;
  height: 17px;
  accent-color: var(--rojo);
  cursor: pointer;
}
.cookie-opt strong {
  color: var(--blanco);
}
.cookie-opt--fija {
  opacity: 0.65;
  cursor: default;
}
.cookie-opt--fija input {
  cursor: not-allowed;
}

.cookie-panel {
  flex: 1 1 100%;
  border-top: 1px solid var(--gris-mid);
  padding-top: 16px;
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cookie-panel[hidden] {
  display: none;
}

.phone-sticky {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--rojo);
  color: white;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 800;
  text-align: center;
  padding: 16px;
  z-index: 998;
  letter-spacing: 0.04em;
}
@media (max-width: 860px) {
  .cookie-banner__inner {
    padding: 16px;
    gap: 14px;
  }
  .cookie-banner__txt {
    flex: 1 1 100%;
    font-size: 13px;
  }
  .cookie-btn {
    flex: 1 1 auto;
    min-width: 0;
    padding: 13px 12px;
    font-size: 14px;
  }
  .cookie-btn--alt {
    flex: 1 1 100%;
  }
}
@media (max-width: 768px) {
  .cookie-banner__inner {
    max-height: 78vh;
    overflow-y: auto;
  }
  body.cookies-abierto .wa-float {
    display: none;
  }
  .phone-sticky {
    display: block;
  }
  body.cookies-abierto .phone-sticky {
    display: none;
  }
}

/* ═══════════════════════════════════════════════════════════
   LANDINGS DE APARATO — secciones propias
   ═══════════════════════════════════════════════════════════ */

/* Aviso de urgencia del hero */
.sv-urgente{
  display:flex; align-items:center; gap:9px;
  font:700 14px/1.4 var(--sv-body); color:var(--sv-red);
  margin:-8px 0 18px;
}
.sv-urgente svg{flex:none;}

/* Averías frecuentes */
.sv-averias{display:grid; grid-template-columns:repeat(6,1fr); gap:14px;}
.sv-averia{
  background:#fff; border:1px solid var(--sv-border);
  border-radius:var(--sv-radius); padding:24px 16px;
  text-align:center; transition:border-color .17s, box-shadow .17s;
}
.sv-averia:hover{border-color:var(--sv-red); box-shadow:var(--sv-shadow-h);}
.sv-averia svg{color:var(--sv-red); margin:0 auto 14px;}
.sv-averia h3{font-size:14.5px; font-weight:800; margin-bottom:6px;}
.sv-averia p{font-size:12.5px; line-height:1.5; color:var(--sv-text-secondary); margin:0;}

.sv-averias__pie{
  display:flex; align-items:center; justify-content:center;
  gap:20px; flex-wrap:wrap; margin-top:26px;
}
.sv-averias__pie p{font-size:14.5px; color:var(--sv-text-secondary); margin:0;}

/* Bloque de urgencia por fuga de agua */
.sv-urgencia{
  display:flex; align-items:center; gap:24px; flex-wrap:wrap;
  background:var(--sv-visita-bg); border:1px solid var(--sv-visita-bd);
  border-radius:var(--sv-radius); padding:26px 30px;
}
.sv-urgencia__ico{color:var(--sv-red); flex:none;}
.sv-urgencia__txt{flex:1; min-width:280px;}
.sv-urgencia__txt h2{font-size:clamp(19px,1.8vw,24px); margin-bottom:7px;}
.sv-urgencia__txt p{font-size:14px; line-height:1.55; color:var(--sv-graphite); margin:0;}

/* ═══ HERO FOTO PLACEHOLDER ═══
   Para páginas donde aún no hay imagen disponible. */
.sv-hero__foto--vacio{
  border-radius:var(--sv-radius);
  background:var(--sv-bg-alt, #f5f5f7);
  min-height:360px;
  display:flex; align-items:center; justify-content:center;
  border:2px dashed var(--sv-border);
}

/* ═══ ¿POR QUÉ SERVIALTO? — sección con CTA lateral ═══ */
.sv-porq{
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:56px;
  align-items:start;
}
.sv-porq__args h2{margin-bottom:32px;}
.sv-porq__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:32px;
}
.sv-porq__item{
  display:flex;
  gap:16px;
  align-items:flex-start;
}
.sv-porq__item svg{
  flex-shrink:0;
  color:var(--sv-red);
  margin-top:2px;
}
.sv-porq__item h3{
  font-size:16px;
  margin:0 0 4px;
}
.sv-porq__item p{
  font-size:14px;
  color:var(--sv-text-secondary);
  margin:0;
}
.sv-porq__cta{
  background:var(--sv-bg-alt, #f5f5f7);
  border:1px solid var(--sv-border);
  border-radius:var(--sv-radius);
  padding:32px 28px;
  text-align:center;
  position:sticky;
  top:90px;
}
.sv-porq__cta > p:first-child{
  font-weight:600;
  font-size:17px;
  margin-bottom:12px;
}
.sv-porq__precio{
  font-size:22px;
  font-weight:700;
  margin:8px 0 4px;
}
@media (max-width:900px){
  .sv-porq{grid-template-columns:1fr; gap:32px;}
  .sv-porq__cta{position:static;}
}
@media (max-width:600px){
  .sv-porq__grid{grid-template-columns:1fr;}
}

@media (max-width:1100px){ .sv-averias{grid-template-columns:repeat(3,1fr);} }
@media (max-width:700px){
  .sv-averias{grid-template-columns:repeat(2,1fr);}
  .sv-urgencia{padding:22px 20px; gap:16px;}
  .sv-urgencia .sv-btn{width:100%;}
}

/* ═══ PÁGINA 404 ═══ */
.sv-404{padding:90px 0 100px; text-align:center;}
.sv-404__wrap{display:flex; flex-direction:column; align-items:center; max-width:640px;}
.sv-404__num{
  font-family:var(--sv-display); font-weight:900; line-height:.9;
  font-size:clamp(90px, 14vw, 160px);
  color:transparent; -webkit-text-stroke:2px var(--sv-border);
  letter-spacing:-.02em; margin-bottom:8px;
}
.sv-404 h1{margin-bottom:12px;}
.sv-404__desc{color:var(--sv-text-secondary); max-width:46ch;}
.sv-404__btns{display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin:26px 0 40px;}
.sv-404__enlaces{padding-top:28px; border-top:1px solid var(--sv-divider); width:100%;}
.sv-404__enlaces>span{display:block; font-size:13px; color:var(--sv-text-secondary); margin-bottom:12px;}
.sv-404__enlaces nav{display:flex; gap:10px 22px; flex-wrap:wrap; justify-content:center;}
.sv-404__enlaces nav a{
  font-size:14px; font-weight:700; color:var(--sv-black);
  text-decoration:none; border-bottom:2px solid transparent;
}
.sv-404__enlaces nav a:hover{color:var(--sv-red); border-color:var(--sv-red);}
@media (max-width:600px){
  .sv-404{padding:60px 0 70px;}
  .sv-404__btns .sv-btn{width:100%; justify-content:center;}
}