/*!
 * Portón & Construcción — estilos de la HOME para WordPress + Elessi.
 * Generado desde preview/assets/porton.css. NO editar a mano: si hay que
 * cambiar algo, se cambia en la maqueta y se vuelve a generar.
 *
 * Todo va acotado bajo `.pc-home` para no pisar los estilos de Elessi: en la
 * maqueta había 9 selectores globales (html, body, h1-h4, p, a, img) que sin
 * acotar habrían reescrito la tipografía de todo el sitio.
 *
 * Las reglas de cabecera, menú, pie y botón flotante de WhatsApp NO están
 * aquí: esas pantallas se montan aparte.
 */

/* ==========================================================================
   ARMADURA CONTRA EL TEMA ANFITRIÓN
   La maqueta daba por hecho que el color, la tipografía y el interlineado se
   heredaban del <body>. Elessi (como casi cualquier tema) define `h1,h2,h3`,
   `p` y `a` con valores propios, y esas reglas ganan a la herencia aunque
   nuestro CSS esté acotado: la herencia no compite en especificidad.
   Este bloque devuelve la herencia dentro de `.pc-home` y va PRIMERO, para
   que todas las reglas reales de más abajo lo sobrescriban.
   ========================================================================== */
.pc-home,.pc-home *,.pc-home *::before,.pc-home *::after{box-sizing:border-box}
.pc-home h1,.pc-home h2,.pc-home h3,.pc-home h4,.pc-home h5,.pc-home h6,
.pc-home p,.pc-home span,.pc-home li,.pc-home dt,.pc-home dd,.pc-home small,
.pc-home strong,.pc-home b,.pc-home em,.pc-home i,.pc-home label,.pc-home legend,
.pc-home figcaption,.pc-home blockquote,.pc-home th,.pc-home td,.pc-home a{
  color:inherit;font-family:inherit;line-height:inherit;letter-spacing:normal;
  text-transform:none;text-shadow:none}
.pc-home a{text-decoration:none}
.pc-home button,.pc-home input,.pc-home select,.pc-home textarea{
  font-family:inherit;font-size:inherit;line-height:inherit;color:inherit}
.pc-home img,.pc-home video{max-width:100%;height:auto;display:block;border:0}

/* ============================================================
   PORTÓN & CONSTRUCCIÓN — Maqueta de diseño (Home)
   Esta maqueta es la referencia visual para armar la página
   en Elementor. Todos los tokens coinciden con porton.css
   ============================================================ */
:root{
  --pc-red:#E4221D; --pc-red-dark:#B81813; --pc-red-soft:#FDECEB;
  /* Negros neutros, sin tinte de color. La referencia Voltix usaba un azul-negro
     (#0E121D), pero en superficies oscuras grandes —el cotizador, la sección de
     servicios— ese matiz se nota y se lee como azul, no como negro. */
  --pc-ink:#0F0F0F; --pc-ink-2:#171717; --pc-ink-3:#232323;
  --pc-black:#0A0A0A; --pc-graphite:#1A1A1A;
  --pc-slate-700:#3F3F46; --pc-slate-500:#71717A;
  --pc-on-dark:#ABABAB;
  --pc-border:#E4E4E7; --pc-bg:#FFFFFF; --pc-bg-alt:#F5F6F7;
  --pc-whatsapp:#25D366; --pc-success:#15803D;
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;
  --space-6:32px;--space-7:48px;--space-8:64px;--space-9:96px;
  --radius:4px;--radius-lg:8px;--radius-card:16px;--radius-pill:50px;
  --container:1240px;
  --font-display:'Barlow Condensed',system-ui,sans-serif;
  --font-body:'Inter',system-ui,-apple-system,sans-serif;
  --shadow-sm:0 1px 3px rgba(10,10,10,.08);
  --shadow-md:0 4px 16px rgba(10,10,10,.10);
  --shadow-lg:0 12px 40px rgba(10,10,10,.16);
}
.pc-home *, .pc-home *::before, .pc-home *::after{box-sizing:border-box}
.pc-home{-webkit-text-size-adjust:100%}
.pc-home{margin:0;font-family:var(--font-body);font-size:16px;line-height:1.6;
  color:var(--pc-black);background:var(--pc-bg);overflow-x:hidden}
.pc-home img{max-width:100%;height:auto;display:block}
.pc-home a{color:inherit;text-decoration:none}
.pc-home h1, .pc-home h2, .pc-home h3, .pc-home h4{font-family:var(--font-display);text-transform:uppercase;
  letter-spacing:.01em;margin:0;font-weight:800;line-height:1.1}
.pc-home h1{font-size:clamp(2.5rem,7vw,4.25rem);line-height:1.03;font-style:italic}
.pc-home h2{font-size:clamp(1.875rem,4.2vw,2.75rem)}
.pc-home h3{font-size:clamp(1.375rem,2.4vw,1.75rem);font-weight:700}
.pc-home p{margin:0 0 var(--space-4)}
.pc-home :focus-visible{outline:3px solid var(--pc-red);outline-offset:2px;border-radius:2px}
.pc-home .container{max-width:var(--container);margin:0 auto;padding:0 var(--space-5)}
.pc-home .section{padding:var(--space-8) 0}
@media(min-width:1024px){.pc-home .section{padding:var(--space-9) 0}}
.pc-home .section--alt{background:var(--pc-bg-alt)}
.pc-home .section--dark{background:var(--pc-black);color:#fff}
.pc-home .eyebrow{font-family:var(--font-display);font-weight:700;font-size:.875rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--pc-red);
  margin:0 0 var(--space-2)}
.pc-home .section-head{max-width:720px;margin-bottom:var(--space-7)}
.pc-home .section-head p{color:var(--pc-slate-700);font-size:1.0625rem;margin:var(--space-3) 0 0}
.pc-home .section--dark .section-head p{color:#A1A1AA}
.pc-home .rule{width:64px;height:4px;background:var(--pc-red);margin-top:var(--space-4)}



/* ---------- Botones (44px mínimo táctil) ---------- */
.pc-home .btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  min-height:48px;padding:0 var(--space-5);font-family:var(--font-display);
  font-weight:700;font-size:1.0625rem;text-transform:uppercase;letter-spacing:.03em;
  border:2px solid transparent;border-radius:var(--radius-pill);cursor:pointer;
  transition:background-color .2s ease,color .2s ease,transform .2s ease,border-color .2s ease}
/* Flecha diagonal como en la referencia */
.pc-home .btn svg.arrow-ne{width:16px;height:16px;flex:none}
.pc-home .btn:hover{transform:translateY(-1px)}
.pc-home .btn:active{transform:translateY(0)}
.pc-home .btn--primary{background:var(--pc-red);color:#fff}
.pc-home .btn--primary:hover{background:var(--pc-red-dark)}
.pc-home .btn--dark{background:var(--pc-black);color:#fff}
.pc-home .btn--dark:hover{background:var(--pc-graphite)}
.pc-home .btn--ghost{background:transparent;color:var(--pc-black);border-color:var(--pc-black)}
.pc-home .btn--ghost:hover{background:var(--pc-black);color:#fff}
.pc-home .btn--ghost-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.pc-home .btn--ghost-light:hover{background:#fff;color:var(--pc-black);border-color:#fff}
.pc-home .btn--wa{background:var(--pc-whatsapp);color:#062E17}
.pc-home .btn--wa:hover{background:#1FBA5A}
.pc-home .btn--lg{min-height:56px;font-size:1.1875rem;padding:0 var(--space-6)}
.pc-home .btn--block{width:100%}

/* ---------- Topbar ---------- */






@media(max-width:767px){
  }

/* ---------- Header ---------- */


@media(min-width:1024px){}

@media(min-width:1024px){}
/* Al bajar, el encabezado se compacta para no comerse la pantalla.
   El logo grande se luce arriba, que es donde importa. */


@media(min-width:1024px){
  
  
}
/* El menú horizontal aparece a partir de 1200px, no de 1024px: con el logo y
   la tipografía más grandes, 7 enlaces más el botón ya no caben cómodos en
   1024. Entre 1024 y 1199 se usa el menú de hamburguesa. */

@media(min-width:1200px){}


















          
















   

/* Punto que late, para que el ojo lo encuentre sin buscarlo */


@keyframes pc-latido{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.4;transform:scale(.7)}
}

/* En el menú móvil, misma idea adaptada a la lista vertical */



@media(prefers-reduced-motion:reduce){
  
}

@media(min-width:1200px){}

@media(min-width:1200px){}






/* ---------- Slot de imagen (reemplazar por foto real) ---------- */
.pc-home .photo{position:relative;background:
  repeating-linear-gradient(135deg,#1F1F22 0 14px,#232326 14px 28px);
  display:grid;place-items:center;overflow:hidden;color:#8A8A92;
  font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  letter-spacing:.1em;font-size:.75rem;text-align:center;padding:var(--space-4)}
.pc-home .photo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 55%,rgba(228,34,29,.16) 100%)}
.pc-home .photo span{position:relative;z-index:1;max-width:26ch}
.pc-home .photo--light{background:repeating-linear-gradient(135deg,#E9EAEC 0 14px,#F2F3F4 14px 28px);color:#9A9AA2}

/* ==========================================================================
   HERO — composición tomada de la referencia Voltix:
   foto a sangre + copy a la izquierda + columna derecha con tarjeta roja de
   dato y el cotizador oscuro montado sobre la sección siguiente.
   ========================================================================== */
.pc-home .hero{position:relative;background:var(--pc-ink);color:#fff;overflow:visible}

/* Capas de foto que se cruzan al cambiar de diapositiva */
.pc-home .hero__bg{position:absolute;inset:0;overflow:hidden;background:var(--pc-ink)}
.pc-home .hero__layer{position:absolute;inset:0;opacity:0;transition:opacity .6s ease}
.pc-home .hero__layer[data-active="true"]{opacity:1}
/* La foto llena el hero. El recorte se hace en vertical (la imagen es más
   ancha que alta), así que --hero-pos controla qué parte se conserva.
   Súbelo (30%) para mostrar más cielo, bájalo (60%) para mostrar más piso. */
.pc-home .hero__layer img{display:block;width:100%;height:100%;object-fit:cover;
  object-position:var(--hero-pos,center 45%);
  /* Acercamiento por diapositiva: --zoom es cuánto, --zoom-origen es hacia
     qué punto de la foto. Se define en el style de cada <img>. */
  transform:scale(var(--zoom,1));
  transform-origin:var(--zoom-origen,center center)}

/* Velo POR DIAPOSITIVA, medido no estimado.
   Cada foto necesita una cantidad distinta: se probó de 0 a 0,70 sobre cada
   una y se tomó la primera que deja el titular y el párrafo con 0 % de área
   bajo el mínimo de contraste. Poner a todas el valor de la más exigente
   apagaba sin motivo las otras dos.
     Foto 1 (portón, con piedra clara detrás del texto) → 0,55
     Foto 2 (garaje iluminado)                          → 0,40
     Foto 3 (puerta gris, peor caso para texto blanco)  → 0,40
   Se mantiene hasta el 55 % del ancho (donde vive el texto) y luego cae,
   para que el lado derecho de la foto se vea casi limpio. */
.pc-home .hero__layer::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,
    rgba(10,10,10,var(--velo,.55)) 0%,
    rgba(10,10,10,var(--velo,.55)) 55%,
    rgba(10,10,10,var(--velo-medio,.30)) 72%,
    rgba(10,10,10,var(--velo-lejos,.15)) 100%);
}
@media(max-width:1023px){
  /* En celular el texto ocupa todo el ancho, así que el velo va parejo. */
  .pc-home .hero__layer::after{background:rgba(10,10,10,var(--velo,.55))}
}

/* Sombra suave: solo despega el texto de la foto, sin el halo negro marcado
   que tenía antes. Dos capas cortas en vez de tres largas. */
.pc-home .slide-copy h1, .pc-home .slide__lead{
  text-shadow:
    0 1px 2px rgba(6,6,6,.55),
    0 2px 8px rgba(6,6,6,.35);
}
/* La píldora y los botones sí llevan su propio fondo: van sobre la zona baja
   de la foto, donde el piso claro no daría contraste con solo la sombra. */
.pc-home .slide__badge{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  background:rgba(10,10,10,.62)}
.pc-home .btn--ghost-light{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  background:rgba(10,10,10,.45)}
.pc-home .arrow{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  background:rgba(10,10,10,.45)}
.pc-home .dot::before{box-shadow:0 1px 3px rgba(6,6,6,.6)}

/* Ojo: solo padding vertical. El shorthand `padding` aquí borraría el padding
   lateral que .container necesita para no pegar el texto al borde. */
.pc-home .hero__grid{position:relative;z-index:2;display:grid;gap:var(--space-7);
  padding-top:var(--space-8);padding-bottom:var(--space-8)}
@media(min-width:1024px){
  .pc-home .hero__grid{grid-template-columns:1.08fr .92fr;gap:var(--space-8);
    align-items:start;padding-top:var(--space-9);padding-bottom:var(--space-9)}
}

/* ---- Columna de texto (cambia con el slider) ---- */
.pc-home .hero__copy{display:grid;align-content:center;min-height:300px}
@media(min-width:1024px){.pc-home .hero__copy{min-height:420px}}
.pc-home .slide-copy{grid-area:1/1;opacity:0;visibility:hidden;
  transition:opacity .45s ease,transform .45s ease;transform:translateY(10px)}
.pc-home .slide-copy[data-active="true"]{opacity:1;visibility:visible;transform:none}
.pc-home .slide-copy h1{margin:0}
.pc-home .slide-copy h1 em{color:var(--pc-red);font-style:italic}

/* ---- Efecto de tipeado del titular ----
   Cada letra se revela con opacity, no con display: así el espacio ya está
   reservado y la línea no salta mientras escribe (CLS = 0). El cursor es un
   elemento aparte que se va moviendo detrás de la última letra visible. */
.pc-home .pc-type__char{opacity:0;transition:opacity .08s linear}
.pc-home .pc-type__char.is-on{opacity:1}
.pc-home .pc-type__caret{display:inline-block;width:4px;height:.82em;
  background:currentColor;vertical-align:baseline;margin:0 .04em;
  animation:pc-blink 1s steps(1,end) infinite}
@keyframes pc-blink{0%,50%{opacity:1}50.01%,100%{opacity:0}}
.pc-home .pc-type.is-done .pc-type__caret{display:none}
.pc-home .slide__lead{font-size:clamp(1.0625rem,1.6vw,1.1875rem);color:#D2D2D2;
  max-width:50ch;margin:var(--space-5) 0 var(--space-6)}
.pc-home .slide__lead--fuerte{font-weight:700;color:#fff;font-size:clamp(1.125rem,1.9vw,1.375rem);
  margin-bottom:var(--space-4)}

/* Lista de ventajas del slider. Dos columnas en escritorio para que no alargue
   demasiado el hero; una sola en pantallas angostas. */
.pc-home .slide__lista{list-style:none;padding:0;margin:0 0 var(--space-6);
  display:grid;gap:var(--space-2) var(--space-5);max-width:44ch}
@media(min-width:600px){.pc-home .slide__lista{grid-template-columns:1fr 1fr}}
.pc-home .slide__lista li{display:flex;align-items:flex-start;gap:var(--space-2);
  font-size:.9375rem;font-weight:600;color:#fff;line-height:1.35;
  text-shadow:0 1px 2px rgba(6,6,6,.55),0 2px 8px rgba(6,6,6,.35)}
.pc-home .slide__lista svg{width:17px;height:17px;flex:none;margin-top:2px;color:var(--pc-red)}
/* El salto de "Asesoría / personalizada" solo aplica cuando la lista va a dos
   columnas, para que empareje con "Servicio técnico especializado". En una
   sola columna hay espacio de sobra y forzarlo se vería raro. */
.pc-home .slide__lista br{display:none}
@media(min-width:600px){.pc-home .slide__lista br{display:inline}}

.pc-home .slide__actions{display:flex;flex-wrap:wrap;gap:var(--space-3)}

/* Píldora de categoría, con borde como en la referencia */
.pc-home .slide__badge{display:inline-flex;align-items:center;gap:var(--space-2);
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.30);
  color:#fff;padding:8px var(--space-4);border-radius:var(--radius-pill);
  font-family:var(--font-display);font-weight:700;font-size:.8125rem;
  letter-spacing:.12em;text-transform:uppercase;margin-bottom:var(--space-5)}
.pc-home .slide__badge svg{width:16px;height:16px;color:var(--pc-red)}

/* ---- Controles del slider ---- */
.pc-home .slider__nav{position:relative;z-index:2;display:flex;align-items:center;
  gap:var(--space-3);margin-top:var(--space-6)}
.pc-home .slider__dots{display:flex;gap:var(--space-1)}
.pc-home .dot{width:44px;height:44px;display:grid;place-items:center;background:none;
  border:none;cursor:pointer;padding:0}
.pc-home .dot::before{content:"";width:28px;height:4px;border-radius:2px;
  background:rgba(255,255,255,.30);transition:background-color .2s ease,width .2s ease}
.pc-home .dot[aria-selected="true"]::before{background:var(--pc-red);width:40px}
.pc-home .slider__arrows{display:flex;gap:var(--space-2)}
.pc-home .arrow{width:44px;height:44px;display:grid;place-items:center;cursor:pointer;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.28);
  border-radius:50%;color:#fff;transition:background-color .2s,border-color .2s}
.pc-home .arrow:hover{background:var(--pc-red);border-color:var(--pc-red)}
.pc-home .arrow svg{width:18px;height:18px}

/* ---- Columna derecha: dato + cotizador ---- */
.pc-home .hero__aside{position:relative;z-index:20;display:grid;gap:var(--space-4)}
@media(min-width:1024px){
  /* La columna baja hasta que su base queda alineada con la de las tarjetas
     de cifras. Los dos márgenes van siempre juntos y con el mismo valor: si
     solo bajara el de arriba, el hero crecería otro tanto y el cotizador se
     saldría de pantalla en portátiles de 900px de alto. */
  .pc-home .hero__aside{margin-top:460px;margin-bottom:-610px}
}

/* Tarjeta roja de dato destacado. Vive en la franja blanca, encima de las
   tarjetas de cifras. */
.pc-home .stat-red{background:var(--pc-red);color:#fff;border-radius:var(--radius-card);
  padding:var(--space-5) var(--space-6);position:relative}
.pc-home .stat-red b{display:block;font-family:var(--font-display);font-style:italic;
  font-size:clamp(2rem,3.4vw,2.75rem);line-height:1;text-transform:uppercase}
.pc-home .stat-red p{margin:var(--space-2) 0 0;font-size:.9375rem;
  color:rgba(255,255,255,.92);max-width:34ch}
.pc-home .stat-red__arrow{position:absolute;top:var(--space-5);right:var(--space-5);
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:#fff;color:var(--pc-red);border:none;cursor:pointer;
  transition:transform .2s ease}
.pc-home .stat-red__arrow:hover{transform:rotate(45deg)}
.pc-home .stat-red__arrow svg{width:18px;height:18px}
/* ---------- Franja de datos (sección blanca bajo el hero) ---------- */
.pc-home .stats-strip{background:var(--pc-bg);padding:var(--space-8) 0 var(--space-8)}
@media(min-width:1024px){.pc-home .stats-strip{padding:var(--space-9) 0 var(--space-8)}}
/* La columna izquierda: tarjeta roja arriba, las dos de cifras debajo.
   En escritorio ocupa media pantalla para dejar libre el ancho del cotizador
   que baja del hero. */
.pc-home .stats-strip__col{display:grid;gap:var(--space-4)}
@media(min-width:1024px){
  .pc-home .stats-strip__col{width:calc(50% - var(--space-6));gap:var(--space-5)}
}

/* En celular van apiladas: a dos columnas el interior queda en ~112px y
   "24 Provincias" se parte en dos líneas. */
.pc-home .stats-strip__grid{display:grid;gap:var(--space-4);grid-template-columns:1fr}
@media(min-width:640px){.pc-home .stats-strip__grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.pc-home .stats-strip__grid{gap:var(--space-5)}}
.pc-home .stat-card{border:1px solid var(--pc-border);border-radius:var(--radius-card);
  padding:var(--space-6) var(--space-5);background:#fff;
  transition:border-color .2s ease,transform .2s ease}
.pc-home .stat-card:hover{border-color:var(--pc-red);transform:translateY(-3px)}
.pc-home .stat-card h3{color:var(--pc-red);font-size:1.5rem;margin:0 0 var(--space-3)}
.pc-home .stat-card p{font-size:.875rem;color:var(--pc-slate-700);margin:0 0 var(--space-4)}
.pc-home .stat-card b{display:block;font-family:var(--font-display);font-weight:800;
  font-size:clamp(1.75rem,3vw,2.25rem);line-height:1;color:var(--pc-black)}

/* ---------- Barra de confianza ---------- */
.pc-home .trust{background:var(--pc-ink);color:#fff;border-top:4px solid var(--pc-red)}
.pc-home .trust__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-5);
  padding:var(--space-6) 0}
@media(min-width:768px){.pc-home .trust__grid{grid-template-columns:repeat(4,1fr)}}
.pc-home .trust__item{display:flex;gap:var(--space-3);align-items:flex-start}
.pc-home .trust__item svg{width:30px;height:30px;color:var(--pc-red);flex:none}
.pc-home .trust__item strong{display:block;font-family:var(--font-display);font-size:1.125rem;
  text-transform:uppercase;letter-spacing:.02em;line-height:1.2}
.pc-home .trust__item span{font-size:.875rem;color:var(--pc-on-dark)}

/* ==========================================================================
   COTIZADOR — tarjeta oscura dentro de la columna derecha del hero
   ========================================================================== */
.pc-home .quoter__card{background:var(--pc-ink-2);color:#fff;
  border:1px solid rgba(255,255,255,.10);border-radius:var(--radius-card);
  box-shadow:0 24px 60px rgba(0,0,0,.45);padding:var(--space-5)}
@media(min-width:768px){.pc-home .quoter__card{padding:var(--space-6)}}

.pc-home .quoter__head{margin-bottom:var(--space-5)}
.pc-home .quoter__head h2{margin:0;font-size:clamp(1.5rem,2.6vw,2rem);color:#fff}
.pc-home .quoter__head h2 em{color:var(--pc-red);font-style:normal}
.pc-home .quoter__head p{margin:var(--space-2) 0 0;color:var(--pc-on-dark);font-size:.9375rem}

.pc-home .steps{display:flex;gap:var(--space-3);align-items:center;flex-wrap:wrap;
  margin-top:var(--space-4);padding-top:var(--space-4);
  border-top:1px solid rgba(255,255,255,.10)}
.pc-home .step-chip{display:flex;align-items:center;gap:var(--space-2);font-size:.8125rem;
  font-weight:600;color:#8A8A8A}
.pc-home .step-chip b{width:24px;height:24px;display:grid;place-items:center;border-radius:50%;
  background:rgba(255,255,255,.10);color:#D2D2D2;font-size:.75rem}
.pc-home .step-chip[data-state="active"]{color:#fff}
.pc-home .step-chip[data-state="active"] b{background:var(--pc-red);color:#fff}
.pc-home .step-chip[data-state="done"]{color:#D2D2D2}
.pc-home .step-chip[data-state="done"] b{background:var(--pc-success);color:#fff}

.pc-home .q-step{display:none}
.pc-home .q-step[data-active="true"]{display:block}

/* ---- Ramas condicionales del paso 2 ----
   Solo se ve la del producto elegido. Las ocultas además se desactivan por JS
   para que no se validen ni viajen en el envío. */
.pc-home .q-rama{display:none}
.pc-home .q-rama[data-visible="true"]{display:block}
.pc-home [data-cuando]{display:none}
.pc-home [data-cuando][data-visible="true"]{display:block}

.pc-home .q-fieldset{border:0;padding:0;margin:0 0 var(--space-4);min-width:0}
.pc-home .q-fieldset legend{font-weight:600;font-size:.875rem;color:#fff;padding:0;
  margin-bottom:var(--space-3)}
.pc-home .q-fieldset .hint{margin:-8px 0 var(--space-3);font-size:.75rem;color:#909090}
/* El `display:none` base vive en `.field .error`, y estos errores no están
   dentro de un .field: sin esta línea se verían siempre. */
.pc-home .q-fieldset .error{display:none;margin-top:var(--space-3)}
.pc-home .q-fieldset[data-invalid="true"] .error{display:flex}

/* Opciones cortas en fila (tipo de panel) */
.pc-home .q-radios{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.pc-home .q-radios label{position:relative;flex:1 1 120px}
.pc-home .q-radios input{position:absolute;opacity:0;width:1px;height:1px}
.pc-home .q-radios span{display:flex;align-items:center;justify-content:center;
  min-height:48px;padding:0 var(--space-4);text-align:center;
  border:1.5px solid rgba(255,255,255,.16);border-radius:10px;
  background:rgba(255,255,255,.05);color:#EAEAEA;cursor:pointer;
  font-weight:600;font-size:.875rem;
  transition:border-color .2s,background-color .2s}
.pc-home .q-radios span:hover{border-color:rgba(255,255,255,.42)}
.pc-home .q-radios input:checked + span{border-color:var(--pc-red);
  background:rgba(228,34,29,.30);color:#fff;
  box-shadow:0 0 0 1.5px var(--pc-red)}
.pc-home .q-radios input:focus-visible + span{outline:3px solid #fff;outline-offset:3px}

/* Lista de opciones únicas (servicio técnico) */
.pc-home .q-checks{display:grid;gap:var(--space-2)}
.pc-home .q-checks label{position:relative;display:block}
.pc-home .q-checks input{position:absolute;opacity:0;width:1px;height:1px}
.pc-home .q-checks span{display:flex;align-items:center;gap:var(--space-3);
  min-height:48px;padding:var(--space-2) var(--space-4);
  border:1.5px solid rgba(255,255,255,.16);border-radius:10px;
  background:rgba(255,255,255,.05);color:#EAEAEA;cursor:pointer;
  font-weight:600;font-size:.875rem;line-height:1.3;
  transition:border-color .2s,background-color .2s}
/* Círculo, no cuadrado: la forma le dice al usuario que solo puede elegir uno.
   El cuadrado con palomita significa "puedes marcar varios". */
.pc-home .q-checks span::before{content:"";width:20px;height:20px;flex:none;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.35);background:transparent;
  background-position:center;background-repeat:no-repeat;background-size:20px;
  transition:background-color .18s,border-color .18s}
.pc-home .q-checks span:hover{border-color:rgba(255,255,255,.42)}
.pc-home .q-checks input:checked + span{border-color:var(--pc-red);
  background:rgba(228,34,29,.22);color:#fff}
.pc-home .q-checks input:checked + span::before{
  background-color:var(--pc-red);border-color:var(--pc-red);
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='5' fill='%23fff'/%3E%3C/svg%3E")}
.pc-home .q-checks input:focus-visible + span{outline:3px solid #fff;outline-offset:3px}

/* Subir foto */
.pc-home .q-foto input[type="file"]{position:absolute;opacity:0;width:1px;height:1px}
.pc-home .q-file{display:flex;align-items:center;gap:var(--space-3);
  min-height:52px;padding:0 var(--space-4);
  border:1.5px dashed rgba(255,255,255,.28);border-radius:10px;
  background:rgba(255,255,255,.04);color:#C9C9C9;cursor:pointer;
  font-size:.875rem;font-weight:600;
  transition:border-color .2s,background-color .2s,color .2s}
.pc-home .q-file:hover{border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.07);color:#fff}
.pc-home .q-file svg{width:20px;height:20px;flex:none;color:var(--pc-red)}
.pc-home .q-file span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pc-home .q-foto[data-con-archivo="true"] .q-file{border-style:solid;border-color:var(--pc-red);
  background:rgba(228,34,29,.14);color:#fff}
.pc-home .q-foto input[type="file"]:focus-visible + .q-file, .pc-home .q-file:focus-within{outline:3px solid var(--pc-red);outline-offset:2px}

/* Campos: una columna, porque la tarjeta es angosta */
.pc-home .field-grid{display:grid;gap:var(--space-4);margin-bottom:var(--space-4)}
@media(min-width:480px){.pc-home .field-grid--2{grid-template-columns:1fr 1fr}}
/* Grupo de campos con un título común (ej. las dos medidas) */
.pc-home .field-group{border:0;padding:0;margin:0 0 var(--space-4);min-width:0}
.pc-home .field-group legend{font-weight:600;font-size:.875rem;color:#fff;padding:0;
  margin-bottom:2px}
/* Esta pista vive fuera de .field, así que no la alcanza la regla `.field .hint` */
.pc-home .field-group .hint{margin:0 0 var(--space-3);font-size:.75rem;color:#909090;
  line-height:1.45}
.pc-home .field-group .field-grid{margin-bottom:0}
.pc-home .field{margin-bottom:var(--space-4)}
.pc-home .field:last-child{margin-bottom:0}
.pc-home .field label{display:block;font-weight:600;font-size:.875rem;margin-bottom:6px;color:#fff}
.pc-home .field .req{color:var(--pc-red)}
.pc-home .field .hint{font-size:.75rem;color:#909090;margin-top:5px}
.pc-home .field input, .pc-home .field select, .pc-home .field textarea{width:100%;min-height:48px;
  padding:var(--space-3) var(--space-4);font-family:inherit;font-size:1rem;
  color:#fff;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);border-radius:10px;
  transition:border-color .2s,box-shadow .2s,background-color .2s}
.pc-home .field input::placeholder, .pc-home .field textarea::placeholder{color:#909090}
/* Los desplegables deben verse distintos de un campo de texto: fondo algo más
   claro, flecha con contraste y cursor de mano. Antes parecían campos de
   escribir y nadie los tocaba. */
.pc-home .field select{appearance:none;cursor:pointer;
  background-color:rgba(255,255,255,.10);
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EAEAEA' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;
  background-size:20px;padding-right:46px}
.pc-home .field select:hover{border-color:rgba(255,255,255,.34);
  background-color:rgba(255,255,255,.14)}
.pc-home .field textarea{min-height:88px;resize:vertical}
.pc-home .field input:focus, .pc-home .field select:focus, .pc-home .field textarea:focus{outline:none;
  border-color:var(--pc-red);background:rgba(255,255,255,.09);
  box-shadow:0 0 0 3px rgba(228,34,29,.28)}
.pc-home .field .error{display:none;color:#FF8A84;font-size:.75rem;font-weight:600;
  margin-top:5px;align-items:center;gap:5px}
.pc-home .field[data-invalid="true"] input, .pc-home .field[data-invalid="true"] select{border-color:var(--pc-red)}
.pc-home .field[data-invalid="true"] .error{display:flex}

/* Opciones del paso 1: dos columnas compactas */
.pc-home .choices{display:grid;gap:var(--space-2);grid-template-columns:repeat(2,1fr)}
.pc-home .choice{position:relative}
.pc-home .choice input{position:absolute;opacity:0;width:1px;height:1px}
.pc-home .choice span{position:relative;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  text-align:center;min-height:98px;justify-content:center;
  padding:var(--space-4) var(--space-2);
  border:1.5px solid rgba(255,255,255,.16);border-radius:10px;
  background:rgba(255,255,255,.05);cursor:pointer;
  font-weight:600;font-size:.8125rem;line-height:1.25;color:#EAEAEA;
  transition:border-color .2s,background-color .2s,transform .2s,box-shadow .2s}
.pc-home .choice span svg{width:26px;height:26px;color:#BBBBBB;transition:color .2s}
.pc-home .choice span:hover{border-color:rgba(255,255,255,.42);
  background:rgba(255,255,255,.09);transform:translateY(-2px)}

/* Estado elegido: se nota de un vistazo. El borde extra va con box-shadow y
   no con border-width, para que la tarjeta no cambie de tamaño al marcarla. */
.pc-home .choice input:checked + span{
  border-color:var(--pc-red);
  box-shadow:0 0 0 1.5px var(--pc-red),0 6px 18px rgba(228,34,29,.28);
  background:rgba(228,34,29,.30);color:#fff}
.pc-home .choice input:checked + span svg{color:#fff}
.pc-home .choice input:focus-visible + span{outline:3px solid #fff;outline-offset:3px}

/* Palomita de confirmación en la esquina */
.pc-home .choice span::after{content:"";position:absolute;top:7px;right:7px;
  width:19px;height:19px;border-radius:50%;background:var(--pc-red);
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12l5 5L20 6'/%3E%3C/svg%3E");
  background-size:12px;background-position:center;background-repeat:no-repeat;
  opacity:0;transform:scale(.4);
  transition:opacity .18s ease,transform .18s cubic-bezier(.34,1.56,.64,1)}
.pc-home .choice input:checked + span::after{opacity:1;transform:none}

.pc-home .q-actions{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-5);
  padding-top:var(--space-4);border-top:1px solid rgba(255,255,255,.10)}
.pc-home .q-actions .spacer{flex:1}
.pc-home .q-actions .btn{flex:1 1 auto}
.pc-home .q-actions .btn--ghost{color:#fff;border-color:rgba(255,255,255,.35)}
.pc-home .q-actions .btn--ghost:hover{background:#fff;color:var(--pc-ink);border-color:#fff}

.pc-home .q-summary{background:rgba(255,255,255,.05);border-left:3px solid var(--pc-red);
  padding:var(--space-3) var(--space-4);border-radius:8px;margin-bottom:var(--space-4)}
.pc-home .q-summary dl{display:grid;gap:6px 12px;margin:0;grid-template-columns:auto 1fr}
.pc-home .q-summary dt{font-size:.8125rem;color:#909090}
.pc-home .q-summary dd{margin:0;font-weight:600;font-size:.875rem;color:#fff}

.pc-home .q-note{display:flex;gap:var(--space-3);align-items:flex-start;font-size:.8125rem;
  color:var(--pc-on-dark);background:rgba(255,255,255,.04);
  border:1px dashed rgba(255,255,255,.16);padding:var(--space-3);border-radius:10px}
.pc-home .q-note svg{width:18px;height:18px;color:var(--pc-red);flex:none;margin-top:2px}

.pc-home .q-done{text-align:center;padding:var(--space-6) var(--space-2)}
.pc-home .q-done h3{color:#fff}
.pc-home .q-done p{color:var(--pc-on-dark)}
.pc-home .q-done > svg{width:56px;height:56px;color:#4ADE80;margin:0 auto var(--space-4);display:block}

/* ---------- Tarjetas de categoría ---------- */
.pc-home .cat-grid{display:grid;gap:var(--space-5);grid-template-columns:repeat(2,1fr)}
@media(min-width:768px){.pc-home .cat-grid{grid-template-columns:repeat(3,1fr)}}
.pc-home .cat{display:flex;flex-direction:column;background:#fff;border:1px solid var(--pc-border);
  border-radius:var(--radius-lg);overflow:hidden;transition:transform .2s ease,
  box-shadow .2s ease,border-color .2s ease}
.pc-home .cat:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--pc-red)}
.pc-home .cat__media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--pc-ink)}
.pc-home .cat__media img, .pc-home .cat__media video{position:absolute;inset:0;display:block;
  width:100%;height:100%;object-fit:cover}
/* El vídeo entra por encima de la foto con un fundido. La foto queda debajo:
   si el vídeo tarda o falla, no se ve ningún hueco negro. */
.pc-home .cat__media video{opacity:0;transition:opacity .4s ease}
.pc-home .cat__media video.is-on{opacity:1}
.pc-home .cat[data-video] .cat__media::after{
  content:"";position:absolute;right:10px;bottom:10px;width:34px;height:34px;
  border-radius:50%;background:rgba(10,10,10,.55) no-repeat center/12px;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  opacity:1;transition:opacity .25s ease;
}
.pc-home .cat[data-video]:hover .cat__media::after{opacity:0}   /* al reproducirse, sobra */
.pc-home .cat__body{padding:var(--space-4) var(--space-4) var(--space-5);display:flex;
  flex-direction:column;gap:var(--space-2);flex:1}
.pc-home .cat__body h3{font-size:1.25rem}
.pc-home .cat__body p{font-size:.875rem;color:var(--pc-slate-700);margin:0;flex:1}
.pc-home .cat__link{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-display);
  font-weight:700;text-transform:uppercase;font-size:.9375rem;color:var(--pc-red);
  margin-top:var(--space-2)}
.pc-home .cat__link svg{width:16px;height:16px;transition:transform .2s}
.pc-home .cat:hover .cat__link svg{transform:translateX(4px)}
.pc-home .cat__count{font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--pc-slate-500)}

/* ---------- Servicios ---------- */
.pc-home .srv-grid{display:grid;gap:var(--space-5)}
@media(min-width:768px){.pc-home .srv-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.pc-home .srv-grid{grid-template-columns:repeat(4,1fr)}}
.pc-home .srv{background:var(--pc-graphite);border:1px solid #2A2A2E;border-radius:var(--radius-lg);
  padding:var(--space-6) var(--space-5);display:flex;flex-direction:column;gap:var(--space-3);
  transition:border-color .2s,transform .2s}
.pc-home .srv:hover{border-color:var(--pc-red);transform:translateY(-4px)}
.pc-home .srv__icon{width:56px;height:56px;display:grid;place-items:center;background:var(--pc-red);
  border-radius:var(--radius);color:#fff;margin-bottom:var(--space-2);
  position:relative;overflow:hidden}
.pc-home .srv__icon svg{width:28px;height:28px}



/* 1. La caja entra con un rebote */
.pc-home .srv__icon{transform:scale(.55) rotate(-14deg);opacity:0;
  transition:transform .45s cubic-bezier(.34,1.56,.64,1),opacity .3s ease}
.pc-home .srv.is-in .srv__icon{transform:none;opacity:1}

/* 2. El trazo del icono se dibuja solo */
.pc-home .srv__icon svg [data-draw]{stroke-dasharray:1;stroke-dashoffset:1;
  transition:stroke-dashoffset .8s ease .25s}
.pc-home .srv.is-in .srv__icon svg [data-draw]{stroke-dashoffset:0}

/* 3. Un destello cruza la caja roja */
.pc-home .srv__icon::after{content:"";position:absolute;inset:-20%;
  background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.55) 50%,transparent 62%);
  transform:translateX(-140%)}
.pc-home .srv.is-in .srv__icon::after{animation:pc-shine 1s ease .55s 1 both}
@keyframes pc-shine{to{transform:translateX(140%)}}

/* 4. Al pasar el mouse, cada icono hace lo que su herramienta haría */
.pc-home .srv:hover .srv__icon, .pc-home .srv:focus-within .srv__icon{transform:translateY(-4px)}
.pc-home .srv[data-icono="llave"]:hover svg{animation:pc-tilt .6s ease}
.pc-home .srv[data-icono="reloj"]:hover svg{animation:pc-giro 1.1s cubic-bezier(.4,0,.2,1)}
.pc-home .srv[data-icono="engranaje"]:hover svg{animation:pc-giro-corto .6s cubic-bezier(.4,0,.2,1)}
.pc-home .srv[data-icono="control"]:hover svg{animation:pc-pulso .5s ease}
@keyframes pc-tilt{0%{transform:rotate(0)}30%{transform:rotate(-18deg)}
  65%{transform:rotate(14deg)}100%{transform:rotate(0)}}
@keyframes pc-giro{to{transform:rotate(360deg)}}
@keyframes pc-giro-corto{to{transform:rotate(90deg)}}
@keyframes pc-pulso{0%,100%{transform:scale(1)}45%{transform:scale(1.22)}}
.pc-home .srv h3{color:#fff;font-size:1.25rem}
.pc-home .srv p{color:#A1A1AA;font-size:.9375rem;margin:0;flex:1}
.pc-home .srv ul{list-style:none;padding:0;margin:0;display:grid;gap:6px}
.pc-home .srv li{display:flex;gap:var(--space-2);font-size:.875rem;color:#D4D4D8}
.pc-home .srv li svg{width:16px;height:16px;color:var(--pc-red);flex:none;margin-top:4px}

/* ---------- Marcas: carrusel continuo en una sola fila ----------
   Los logos son oficiales, con fondo transparente, así que la banda va en
   blanco y se ven limpios sobre cualquier tono. */
.pc-home .section--marcas{background:#FFFFFF}

.pc-home .marquee{
  position:relative;overflow:hidden;padding:var(--space-6) 0;
  /* Los bordes se desvanecen: los logos entran y salen sin cortarse en seco */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
}
.pc-home .marquee__track{display:flex;width:max-content;
  animation:pc-marquee 34s linear infinite}
/* Se detiene al pasar el mouse, para poder mirar un logo concreto */
.pc-home .marquee:hover .marquee__track, .pc-home .marquee:focus-within .marquee__track{animation-play-state:paused}
@keyframes pc-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.pc-home .marquee__set{display:flex;align-items:center;gap:var(--space-8);
  list-style:none;margin:0;padding:0 var(--space-6)}
.pc-home .marquee__set li{flex:none;display:grid;place-items:center;min-height:132px}

/* Los logos tienen proporciones muy distintas: LiftMaster y Genius son
   palabras largas y bajas, Nice y Ace Doors son casi cuadrados. Si todos
   midieran igual de alto, unos se verían enormes y otros diminutos.
   --esc está calculado midiendo el área real de tinta de cada archivo, de
   modo que los nueve ocupen el mismo peso visual. No lo cambies a ojo. */
.pc-home .marquee__set img{
  height:calc(92px * var(--esc,1));
  width:auto;max-width:none;object-fit:contain;
  /* Siempre a color: son los logos oficiales y así se reconocen al instante. */
  transition:transform .25s ease;
}
.pc-home .marquee__set li:hover img{transform:scale(1.08)}

/* Sin animación: se convierte en una fila que se arrastra con el dedo */
@media(prefers-reduced-motion:reduce){
  .pc-home .marquee__track{animation:none}
  .pc-home .marquee{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .pc-home .marquee__set:last-child{display:none}
  .pc-home .marquee__set li:hover img{transform:none}
}

/* ---------- Empresa / por qué ---------- */
.pc-home .why{display:grid;gap:var(--space-7);align-items:center}
@media(min-width:1024px){.pc-home .why{grid-template-columns:1fr 1fr;gap:var(--space-8)}}
.pc-home .why__media{position:relative;aspect-ratio:4/3;border-radius:var(--radius-lg);
  overflow:hidden;background:var(--pc-ink)}
.pc-home .why__media video{position:absolute;inset:0;display:block;
  width:100%;height:100%;object-fit:cover}
.pc-home .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4);
  margin:var(--space-6) 0}
.pc-home .stat b{display:block;font-family:var(--font-display);font-size:2.5rem;
  color:var(--pc-red);line-height:1;font-style:italic}
/* Solo el <span> hijo directo es la etiqueta. El que va dentro del <b> es el
   contador y debe heredar el tamaño grande. */
.pc-home .stat > span{display:block;font-size:.8125rem;color:var(--pc-slate-500);
  text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.pc-home .checklist{list-style:none;padding:0;margin:0 0 var(--space-6);display:grid;gap:var(--space-3)}
.pc-home .checklist li{display:flex;gap:var(--space-3);align-items:flex-start}
.pc-home .checklist svg{width:22px;height:22px;color:var(--pc-red);flex:none;margin-top:1px}

/* ---------- Galería ---------- */
.pc-home .gallery{display:grid;gap:var(--space-3);grid-template-columns:repeat(2,1fr)}
@media(min-width:768px){.pc-home .gallery{grid-template-columns:repeat(4,1fr)}}
.pc-home .gallery__item{position:relative;aspect-ratio:1;overflow:hidden;
  border-radius:var(--radius);background:var(--pc-ink);
  transition:transform .2s ease}
.pc-home .gallery__item img, .pc-home .gallery__item video{position:absolute;inset:0;display:block;
  width:100%;height:100%;object-fit:cover}
.pc-home .gallery__item:hover{transform:scale(1.02);z-index:2}
/* El destacado ocupa dos columnas y dos filas: queda cuadrado igual que el resto */
.pc-home .gallery__item--destacado{grid-column:span 2;grid-row:span 2}

/* ---------- FAQ ---------- */
.pc-home .faq{max-width:860px;margin:0 auto}
.pc-home .faq details{border:1px solid var(--pc-border);border-radius:var(--radius);
  background:#fff;margin-bottom:var(--space-3);transition:border-color .2s}
.pc-home .faq details[open]{border-color:var(--pc-red)}
.pc-home .faq summary{cursor:pointer;list-style:none;padding:var(--space-4) var(--space-5);
  font-family:var(--font-display);font-weight:700;font-size:1.1875rem;
  text-transform:uppercase;display:flex;justify-content:space-between;
  align-items:center;gap:var(--space-4);min-height:60px}
.pc-home .faq summary::-webkit-details-marker{display:none}
.pc-home .faq summary svg{width:22px;height:22px;color:var(--pc-red);flex:none;transition:transform .2s}
.pc-home .faq details[open] summary svg{transform:rotate(45deg)}
.pc-home .faq p{padding:0 var(--space-5) var(--space-5);margin:0;color:var(--pc-slate-700)}

/* ---------- CTA final ---------- */
.pc-home .cta{background:var(--pc-red);color:#fff;text-align:center}
.pc-home .cta h2{font-size:clamp(2rem,4.5vw,3rem);font-style:italic}
.pc-home .cta p{max-width:60ch;margin:var(--space-4) auto var(--space-6);font-size:1.0625rem;
  color:rgba(255,255,255,.92)}
.pc-home .cta__actions{display:flex;gap:var(--space-3);justify-content:center;flex-wrap:wrap}
.pc-home .cta .btn--dark:hover{background:#000}

/* ---------- Footer ---------- */


@media(min-width:768px){}








.pc-home .social{display:flex;gap:var(--space-2);margin-top:var(--space-4)}
.pc-home .social a{width:44px;height:44px;display:grid;place-items:center;
  border:1px solid #2A2A2E;border-radius:var(--radius);transition:background-color .2s,border-color .2s}
.pc-home .social a:hover{background:var(--pc-red);border-color:var(--pc-red);color:#fff}
.pc-home .social svg{width:20px;height:20px}


/* ---------- WhatsApp flotante ---------- */




@media(min-width:768px){
  }

/* ---------- Reveal en scroll ---------- */
.pc-home [data-reveal]{opacity:0;transform:translateY(16px);
  transition:opacity .45s ease-out,transform .45s ease-out}
.pc-home [data-reveal].is-in{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  .pc-home *, .pc-home *::before, .pc-home *::after{animation-duration:.01ms!important;
    animation-iteration-count:1!important;transition-duration:.01ms!important}
  .pc-home [data-reveal]{opacity:1;transform:none}
}