/* ==========================================================================
   CTP Done — Preprensa Digital
   Custom styles, animations & tech background (complements TailwindCSS)
   ========================================================================== */

:root {
  --red: #C40018;
  --red-bright: #FF1E3C;
  --red-deep: #8A0011;
  --black: #0D0D0D;
  --white: #FFFFFF;
  --gray-100: #F5F5F5;
  --gray-200: #E9E9EC;
  --gray-500: #6B6B72;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: var(--black);
  background: var(--white);
  overflow-x: hidden;
}

.font-display { font-family: 'Montserrat', 'Inter', sans-serif; }

/* Selection */
::selection { background: var(--red); color: #fff; }

/* Custom scrollbar */
::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: #111; }
::-webkit-scrollbar-thumb { background: linear-gradient(var(--red), var(--red-deep)); border-radius: 20px; }

/* ------------------------------------------------------------------ */
/* Buttons                                                             */
/* ------------------------------------------------------------------ */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-weight: 700;
  letter-spacing: .2px;
  border-radius: 999px;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease);
  overflow: hidden;
  isolation: isolate;
}
.btn::before { /* shine sweep */
  content: "";
  position: absolute;
  top: 0; left: -120%;
  width: 60%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.45), transparent);
  transform: skewX(-20deg);
  transition: left .7s var(--ease);
  z-index: 2;
}
.btn:hover::before { left: 140%; }
.btn-red {
  background: linear-gradient(135deg, var(--red-bright), var(--red));
  color: #fff;
  box-shadow: 0 10px 24px -8px rgba(196,0,24,.6);
}
.btn-red:hover { transform: translateY(-3px); box-shadow: 0 18px 34px -8px rgba(196,0,24,.7); }
.btn-dark { background: var(--black); color: #fff; }
.btn-dark:hover { transform: translateY(-3px); box-shadow: 0 16px 30px -10px rgba(0,0,0,.55); }
.btn-outline {
  background: rgba(255,255,255,.04);
  color: #fff;
  border: 1.5px solid rgba(255,255,255,.35);
  backdrop-filter: blur(6px);
}
.btn-outline:hover { transform: translateY(-3px); border-color: #fff; background: rgba(255,255,255,.1); }

/* ------------------------------------------------------------------ */
/* Header                                                              */
/* ------------------------------------------------------------------ */
.nav-link {
  position: relative;
  font-weight: 600;
  color: #14141a;
  transition: color .3s var(--ease);
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0; bottom: -6px;
  width: 100%; height: 2px;
  background: linear-gradient(90deg, var(--red), var(--red-bright));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ease);
}
.nav-link:hover, .nav-link.active { color: var(--red); }
.nav-link:hover::after, .nav-link.active::after { transform: scaleX(1); }

#site-header { transition: box-shadow .4s var(--ease), backdrop-filter .4s var(--ease), background .4s var(--ease); }
#site-header.scrolled {
  box-shadow: 0 10px 30px -12px rgba(0,0,0,.18);
  background: rgba(255,255,255,.88);
  backdrop-filter: saturate(180%) blur(14px);
}

/* ------------------------------------------------------------------ */
/* Hero tech background                                                */
/* ------------------------------------------------------------------ */
.hero {
  position: relative;
  background:
    radial-gradient(1100px 600px at 78% 18%, rgba(196,0,24,.42), transparent 60%),
    radial-gradient(700px 500px at 8% 90%, rgba(196,0,24,.18), transparent 55%),
    linear-gradient(160deg, #161618 0%, #0d0d0d 45%, #050505 100%);
}
.hero-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: radial-gradient(circle at 60% 40%, #000 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(circle at 60% 40%, #000 0%, transparent 75%);
}
.hero-diagonals {
  position: absolute; inset: 0; overflow: hidden;
  background-image: repeating-linear-gradient(115deg, transparent 0 60px, rgba(255,30,60,.05) 60px 62px);
  opacity: .8;
}
.hero-glow {
  position: absolute;
  width: 620px; height: 620px;
  right: -140px; top: -120px;
  background: radial-gradient(circle, rgba(255,30,60,.55), transparent 62%);
  filter: blur(40px);
  animation: glowPulse 7s var(--ease) infinite;
  pointer-events: none;
}
@keyframes glowPulse {
  0%,100% { transform: scale(1); opacity: .75; }
  50% { transform: scale(1.12); opacity: 1; }
}
#hero-particles { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

.scan-line {
  position: absolute; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255,30,60,.7), transparent);
  animation: scan 6s linear infinite;
  opacity: .5;
}
@keyframes scan {
  0% { top: 8%; } 50% { top: 82%; } 100% { top: 8%; }
}

/* Hero media card */
.hero-media {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 40px 80px -30px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.06) inset;
  transform: perspective(1400px) rotateY(-7deg) rotateX(2deg);
  transition: transform .8s var(--ease);
}
.hero-media:hover { transform: perspective(1400px) rotateY(-3deg) rotateX(1deg); }
.hero-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(200deg, rgba(196,0,24,.28), transparent 55%);
  mix-blend-mode: screen;
}
.float-card { animation: floaty 6s var(--ease) infinite; }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }

/* Stat pills in hero */
.stat-chip { transition: transform .4s var(--ease), background .4s var(--ease); }
.stat-chip:hover { transform: translateY(-4px); }

/* ------------------------------------------------------------------ */
/* Service cards                                                       */
/* ------------------------------------------------------------------ */
.service-card {
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
  will-change: transform;
}
.service-card:hover {
  box-shadow: 0 24px 45px -30px rgba(13,13,13,.28);
  border-color: rgba(196,0,24,.22);
}
.service-card .img-wrap { overflow: hidden; }
.service-card .vermas { transition: gap .3s var(--ease), color .3s var(--ease); }
.service-card:hover .vermas { gap: .9rem; }

/* Icon badge */
.icon-badge {
  transition: transform .5s var(--ease), background .5s var(--ease), color .5s var(--ease);
}
.group:hover .icon-badge, .service-card:hover .icon-badge {
  transform: rotate(-6deg) scale(1.08);
  background: var(--red); color: #fff;
}

/* Sectores (sin movimiento; no son enlaces) */
.sector-ico { transition: all .4s var(--ease); }

/* Tech feature list check */
.feat-check { transition: transform .4s var(--ease); }
.group:hover .feat-check { transform: scale(1.15); }

/* Gallery */
.gallery-item { overflow: hidden; border-radius: 18px; }
.gallery-item img { transition: transform 1.1s var(--ease); }
.gallery-item .overlay { transition: opacity .5s var(--ease), transform .5s var(--ease); }

/* ------------------------------------------------------------------ */
/* Scroll reveal                                                       */
/* ------------------------------------------------------------------ */
[data-reveal] {
  opacity: 0;
  transition: opacity .8s var(--ease), transform .8s var(--ease);
  will-change: opacity, transform;
}
[data-reveal="up"]    { transform: translateY(46px); }
[data-reveal="left"]  { transform: translateX(-56px); }
[data-reveal="right"] { transform: translateX(56px); }
[data-reveal="zoom"]  { transform: scale(.9); }
[data-reveal].in { opacity: 1; transform: none; }

/* Counter underline shimmer */
.count-num { background: linear-gradient(120deg, #fff, #ffb3bd, #fff); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Marquee tech tags */
.marquee { display: flex; gap: 3rem; width: max-content; animation: marquee 26s linear infinite; }
@keyframes marquee { to { transform: translateX(-50%); } }
.marquee-wrap:hover .marquee { animation-play-state: paused; }

/* Mobile menu */
#mobile-menu { transition: opacity .4s var(--ease), transform .4s var(--ease); }
#mobile-menu.hidden-menu { opacity: 0; transform: translateY(-12px); pointer-events: none; }
.burger span { transition: transform .35s var(--ease), opacity .25s var(--ease); }
.burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Section heading kicker */
.kicker {
  display: inline-flex; align-items: center; gap: .55rem;
  font-weight: 700; letter-spacing: 3px; text-transform: uppercase;
  font-size: .74rem; color: var(--red);
}
.kicker::before { content: ""; width: 30px; height: 2px; background: var(--red); display: inline-block; }

/* Back to top */
#to-top { transition: opacity .4s var(--ease), transform .4s var(--ease); }
#to-top.hide { opacity: 0; transform: translateY(20px) scale(.8); pointer-events: none; }

/* Form inputs */
.field {
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
}
.field:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 4px rgba(196,0,24,.12);
  background: #fff;
}
/* Select: chevron propio, centrado verticalmente */
select.field {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23C40018' stroke-width='2.5' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1.05rem;
  padding-right: 2.75rem;
}

/* Progress bar top */
#scroll-progress { transform-origin: left; transform: scaleX(0); }

/* ==========================================================================
   Multi-page components
   ========================================================================== */

/* Hero: video de la máquina incrustado a la derecha (portada inicio) */
.hero-video-side {
  position: absolute; top: 0; right: 0; bottom: 0; width: 60%; height: 100%;
  object-fit: cover; object-position: center; opacity: .95; z-index: 1; pointer-events: none;
}
.hero-video-fade {
  position: absolute; top: 0; right: 0; bottom: 0; width: 60%; z-index: 2; pointer-events: none;
  background:
    linear-gradient(90deg, #0d0d0f 0%, rgba(13,13,15,.82) 18%, rgba(13,13,15,.3) 52%, rgba(13,13,15,0) 100%),
    linear-gradient(0deg, rgba(13,13,15,.55), transparent 42%),
    radial-gradient(600px 400px at 88% 22%, rgba(196,0,24,.22), transparent 65%);
}
@media (max-width: 1023px) {
  .hero-video-side { width: 100%; opacity: .42; }
  .hero-video-fade { width: 100%;
    background: linear-gradient(180deg, rgba(13,13,15,.6), rgba(13,13,15,.82)); }
}

/* Foco visible por teclado (accesibilidad) */
:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; border-radius: 4px; }
.btn:focus-visible, .wa-btn:focus-visible, #asist-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--red); }
.page-hero :focus-visible, .hero :focus-visible, .bg-ink :focus-visible { outline-color: #fff; }

/* Respaldo sin JavaScript: no ocultar el contenido revelado */
@media (scripting: none) {
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* Hero video */
.hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0; opacity: .5;
}
.hero-video-tint {
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(1100px 600px at 78% 20%, rgba(196,0,24,.5), transparent 60%),
    linear-gradient(160deg, rgba(13,13,13,.72) 0%, rgba(13,13,13,.82) 45%, rgba(5,5,5,.92) 100%);
}

/* Page hero (interior pages, shorter) */
.page-hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(900px 500px at 82% 10%, rgba(196,0,24,.4), transparent 60%),
    linear-gradient(160deg, #161618 0%, #0d0d0d 55%, #050505 100%);
}

/* WhatsApp floating button */
.wa-btn {
  position: fixed; right: 1.5rem; bottom: 5.5rem; z-index: 50;
  width: 56px; height: 56px; border-radius: 999px;
  background: #25D366; color: #fff; display: grid; place-items: center;
  box-shadow: 0 12px 30px -8px rgba(37,211,102,.6);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.wa-btn:hover { transform: scale(1.08) translateY(-2px); box-shadow: 0 18px 38px -8px rgba(37,211,102,.7); }
.wa-btn::before {
  content: "Hablar por WhatsApp"; position: absolute; right: 68px; top: 50%; transform: translateY(-50%);
  background: #0d0d0d; color: #fff; font-size: 12px; font-weight: 600; padding: 6px 11px; border-radius: 8px;
  white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .2s var(--ease); box-shadow: 0 6px 18px -6px rgba(0,0,0,.5);
}
.wa-btn:hover::before, .wa-btn:focus-visible::before { opacity: 1; }
.wa-btn::after {
  content: ""; position: absolute; inset: -6px; border-radius: 999px;
  border: 2px solid #25D366; opacity: .55; animation: waPulse 2.4s var(--ease) infinite;
}
@keyframes waPulse { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(1.5); opacity: 0; } }

/* Dropdown */
.dropdown > .dropdown-menu {
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
}
.dropdown:hover > .dropdown-menu, .dropdown:focus-within > .dropdown-menu {
  opacity: 1; visibility: visible; transform: translateY(0);
}

/* Team cards (sin movimiento; no son enlaces) */
.team-card { transition: box-shadow .5s var(--ease); }
.team-avatar {
  background: linear-gradient(150deg, var(--red-bright), var(--red-deep));
  position: relative; overflow: hidden;
}
.team-avatar::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 35% 25%, rgba(255,255,255,.35), transparent 55%);
}

/* Process timeline */
.timeline { position: relative; }
.step-card { transition: box-shadow .5s var(--ease), border-color .5s var(--ease); }
a.step-card:hover { border-color: rgba(196,0,24,.4); box-shadow: 0 26px 50px -28px rgba(13,13,13,.35); }
.step-num {
  font-family: 'Montserrat', sans-serif; font-weight: 800;
  background: linear-gradient(150deg, var(--red-bright), var(--red)); -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Blog cards — solo se mueven si son enlaces (acción) */
.post-card { transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
a.post-card:hover { transform: translateY(-8px); box-shadow: 0 30px 55px -28px rgba(13,13,13,.4); }
.post-card .img-wrap { overflow: hidden; }

/* Accordion (tutoriales) */
.acc-item { transition: border-color .3s var(--ease); }
.acc-item.open { border-color: rgba(196,0,24,.4); }
.acc-head { cursor: pointer; }
.acc-body {
  max-height: 0; overflow: hidden;
  transition: max-height .45s var(--ease), padding .45s var(--ease);
}
.acc-item.open .acc-body { max-height: 420px; }
.acc-icon { transition: transform .35s var(--ease); }
.acc-item.open .acc-icon { transform: rotate(45deg); }

/* Map */
.map-frame { border: 0; width: 100%; height: 100%; min-height: 320px; filter: grayscale(.2) contrast(1.05); }

/* Info tile — solo se anima si es un enlace (acción) */
.info-tile { transition: box-shadow .4s var(--ease), border-color .4s var(--ease); }
a.info-tile:hover { box-shadow: 0 20px 40px -28px rgba(13,13,13,.3); border-color: rgba(196,0,24,.2); }

/* Flujograma de proceso (servicios) */
.flow-arrow{display:flex;align-items:center;justify-content:center;color:#C40018;font-weight:800;font-size:1.4rem;line-height:1;transform:rotate(90deg)}
@media(min-width:768px){.flow-arrow{transform:none;min-width:1.5rem}}

/* ==========================================================================
   Rediseño 2026 — imágenes incrustadas / sangradas + animaciones sutiles
   ========================================================================== */

/* Acordeón: más altura para contenido de Nosotros */
.acc-item.open .acc-body { max-height: 680px; }

/* Foto de hero que sangra hasta el borde derecho de la página (se "incrusta"
   en el fondo oscuro mediante un degradado). Sin bordes redondeados. */
.hero-photo {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: 46%; background-size: cover; background-position: center;
  clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%);
}
.hero-photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, #0d0d0d 0%, rgba(13,13,13,.72) 26%, rgba(13,13,13,.15) 62%, rgba(196,0,24,.12) 100%);
}
@media (max-width: 1023px) { .hero-photo { display: none; } }

/* Panel de imagen recto que sobresale del contenedor hasta el borde de la pantalla */
.bleed-right, .bleed-left, .bleed-full { position: relative; }
@media (min-width: 1024px) {
  .bleed-right { margin-right: calc((100vw - 100%) / -2); }
  .bleed-left  { margin-left:  calc((100vw - 100%) / -2); }
  .bleed-full  { margin-left:  calc((100vw - 100%) / -2); margin-right: calc((100vw - 100%) / -2); }
}
.frame-straight { border-radius: 4px; overflow: hidden; position: relative; }
.frame-straight::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; z-index: 2;
  background: linear-gradient(var(--red-bright), var(--red-deep));
}
.frame-img { transition: transform 1.1s var(--ease); }

/* Imagen full-bleed usada como fondo de sección con contenido encima */
.section-photo-bg { position: relative; overflow: hidden; }
.section-photo-bg > .bg-media {
  position: absolute; inset: 0; background-size: cover; background-position: center;
}
.section-photo-bg > .bg-media::after { content: ""; position: absolute; inset: 0; }

/* Tarjeta de servicio (esquinas redondeadas, sin zoom) */
.card-straight { border-radius: 1rem; }
.card-straight .img-wrap { overflow: hidden; }

/* Estadísticas: el número cuenta hacia arriba (JS). Sin movimiento extra. */
.stat-num { display: inline-block; }

/* Logo: latido sutil + brillo al pasar el mouse */
.logo-mark { transition: transform .5s var(--ease), filter .5s var(--ease); }
.logo-link:hover .logo-mark { transform: rotate(-6deg) scale(1.08); filter: drop-shadow(0 6px 14px rgba(196,0,24,.45)); }
/* .logo-breathe: sin movimiento (el logo del pie no se anima) */

/* Chip/etiqueta con leve realce */
.tag-chip { transition: transform .3s var(--ease), background .3s var(--ease), color .3s var(--ease); }
.tag-chip:hover { transform: translateY(-3px); background: var(--red); color: #fff; border-color: var(--red); }

/* Texto desplegable de tutoriales (details/summary nativo) */
.tut-details > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .4rem; color: var(--red); font-weight: 600; font-size: .85rem; user-select: none; }
.tut-details > summary::-webkit-details-marker { display: none; }
.tut-details > summary::after { content: "+"; font-size: 1.15rem; line-height: 1; transition: transform .3s var(--ease); }
.tut-details[open] > summary { color: var(--red-deep); }
.tut-details[open] > summary::after { transform: rotate(45deg); }

/* Kicker con línea que crece al revelarse */
[data-reveal].in .kicker::before { animation: kickerLine .6s var(--ease) both; }
@keyframes kickerLine { from { width: 0; } to { width: 30px; } }

/* ============================================================
   ENVÍO DE ARCHIVOS — tarjetas con el mismo lenguaje del ERP
   ============================================================ */
.erp-card { background:#fff; border:1px solid #e2e8f0; border-radius:16px;
  box-shadow:0 1px 2px rgba(0,0,0,.05); padding:1.5rem; }
.erp-card + .erp-card { margin-top:1rem; }
.erp-head { display:flex; align-items:center; gap:.75rem; margin-bottom:1.25rem; }
.erp-step { flex:none; width:2rem; height:2rem; border-radius:9999px; background:var(--red,#C40018);
  color:#fff; font-weight:800; font-size:.875rem; display:grid; place-items:center; }
.erp-title { font-weight:700; font-size:1.0625rem; letter-spacing:-.01em; }
.erp-sub { font-size:.8125rem; color:#64748b; margin-top:.125rem; }
.erp-label { display:block; margin-bottom:.3rem; font-size:.8125rem; font-weight:600; color:#334155; }
.erp-input, .erp-select, .erp-textarea {
  width:100%; border:1px solid #cbd5e1; background:#fff; border-radius:.5rem;
  padding:.55rem .7rem; font-size:.875rem; color:#0f172a; outline:none;
  transition:border-color .15s, box-shadow .15s; font-family:inherit; }
.erp-input:focus, .erp-select:focus, .erp-textarea:focus {
  border-color:var(--red,#C40018); box-shadow:0 0 0 3px rgba(196,0,24,.15); }
.erp-input::placeholder, .erp-textarea::placeholder { color:#94a3b8; }
.erp-textarea { resize:vertical; min-height:5rem; }
.erp-select { appearance:none; padding-right:2rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%2364748b' stroke-width='2.5' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .6rem center; background-size:1rem; }
.erp-hint { font-size:.75rem; color:#64748b; margin-top:.3rem; line-height:1.5; }
.erp-grid { display:grid; gap:.75rem; }
@media (min-width:640px){ .erp-grid-2 { grid-template-columns:repeat(2,1fr); }
  .erp-grid-3 { grid-template-columns:repeat(3,1fr); } }
@media (min-width:1024px){ .erp-grid-4 { grid-template-columns:repeat(4,1fr); } }

/* Ítem repetible del trabajo */
.erp-item { border:1px solid #e2e8f0; border-radius:12px; padding:1rem; background:#fff; }
.erp-item + .erp-item { margin-top:.75rem; }
.erp-item-head { display:flex; align-items:center; gap:.5rem; margin-bottom:.75rem; }
.erp-item-n { flex:none; width:1.5rem; height:1.5rem; border-radius:9999px; background:var(--red,#C40018);
  color:#fff; font-size:.6875rem; font-weight:800; display:grid; place-items:center; }
.erp-quitar { font-size:.75rem; color:#dc2626; background:none; border:0; cursor:pointer; }
.erp-quitar:hover { text-decoration:underline; }
.erp-sub-box { margin-top:.75rem; background:#f8fafc; border-radius:.5rem; padding:.6rem; }
.erp-mini { height:2rem; padding:.25rem .5rem; font-size:.8125rem; }
.erp-chk { display:inline-flex; align-items:center; gap:.3rem; font-size:.875rem; color:#475569; cursor:pointer; }
.erp-chk input { accent-color:var(--red,#C40018); width:1rem; height:1rem; }
.erp-tinta { font-weight:800; color:#334155; }

/* Zona de archivos */
.erp-drop { border:2px dashed #cbd5e1; border-radius:12px; padding:1.75rem 1rem; text-align:center;
  background:#f8fafc; transition:border-color .15s, background .15s; cursor:pointer; display:block; }
.erp-drop:hover, .erp-drop.dragover { border-color:var(--red,#C40018); background:rgba(196,0,24,.04); }
.erp-files { margin-top:.75rem; display:flex; flex-direction:column; gap:.4rem; }
.erp-file { display:flex; align-items:center; gap:.5rem; font-size:.8125rem; color:#334155;
  background:#f1f5f9; border-radius:.5rem; padding:.4rem .6rem; }
.erp-file b { font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.erp-meter { height:.375rem; border-radius:9999px; background:#e2e8f0; overflow:hidden; margin-top:.6rem; }
.erp-meter span { display:block; height:100%; background:#16a34a; width:0; transition:width .2s, background .2s; }
.erp-meter.warn span { background:#f59e0b; }
.erp-meter.over span { background:#dc2626; }

/* Aviso / asistencia */
.erp-aviso { border-radius:.75rem; padding:.75rem .9rem; font-size:.8125rem; line-height:1.55; }
.erp-aviso-info { background:#eff6ff; border:1px solid #bfdbfe; color:#1e40af; }
.erp-aviso-warn { background:#fff7ed; border:1px solid #fed7aa; color:#9a3412; }
.erp-aviso-ok   { background:#ecfdf5; border:1px solid #a7f3d0; color:#065f46; }

/* Resumen en vivo */
/* La columna fluye normal; el preview de OP es el que queda pegado. */
.erp-resumen { position:static; }
.erp-pre { background:#0f172a; color:#e2e8f0; border-radius:.75rem; padding:.9rem;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.75rem;
  line-height:1.6; white-space:pre-wrap; word-break:break-word; max-height:22rem; overflow:auto; }
.erp-pre .k { color:#f87171; }

/* ---- Bloque técnico plegable ---- */
.erp-detalles { margin-top:.9rem; border-top:1px solid #e2e8f0; padding-top:.75rem; }
.erp-detalles > summary { cursor:pointer; list-style:none; font-size:.8125rem; font-weight:600;
  color:#334155; display:flex; align-items:center; gap:.4rem; }
.erp-detalles > summary::-webkit-details-marker { display:none; }
.erp-detalles > summary::before { content:""; width:.5rem; height:.5rem; flex:none;
  border-right:2px solid #94a3b8; border-bottom:2px solid #94a3b8;
  transform:rotate(-45deg); transition:transform .2s; margin-right:.15rem; }
.erp-detalles[open] > summary::before { transform:rotate(45deg); }
.erp-detalles > summary:hover { color:var(--red,#C40018); }
.erp-op { font-weight:400; color:#94a3b8; }

/* ---- Cruz de pinza: se marcan uno o varios lados, con sus cm ---- */
.pinza-grid { display:grid; grid-template-columns:4.5rem 7rem 4.5rem;
  grid-template-rows:auto 4.5rem auto; gap:.4rem; align-items:center; justify-items:center; }
.pinza-centro { grid-column:2; grid-row:2; width:100%; height:100%; display:grid; place-items:center;
  border:2px dashed #cbd5e1; border-radius:.5rem; font-size:.625rem; font-weight:700;
  letter-spacing:.08em; color:#94a3b8; }
.pinza-cell { display:flex; flex-direction:column; align-items:center; gap:.25rem; }
.p-arriba { grid-column:2; grid-row:1; }
.p-abajo  { grid-column:2; grid-row:3; }
.p-izq    { grid-column:1; grid-row:2; }
.p-der    { grid-column:3; grid-row:2; }
.pinza-btn { width:2rem; height:2rem; border-radius:.4rem; border:0; cursor:pointer;
  background:#e2e8f0; color:#64748b; font-size:1rem; font-weight:700; line-height:1;
  transition:background .15s, color .15s, transform .1s; }
.pinza-btn:hover { background:#cbd5e1; }
.pinza-btn.on { background:var(--red,#C40018); color:#fff; }
.pinza-btn:active { transform:scale(.94); }
.pinza-cm { width:3.4rem; text-align:center; border:1px solid #cbd5e1; border-radius:.35rem;
  padding:.2rem .25rem; font-size:.75rem; font-family:inherit; outline:none; }
.pinza-cm:focus { border-color:var(--red,#C40018); box-shadow:0 0 0 2px rgba(196,0,24,.15); }

/* ---- Aviso de datos recordados ---- */
.erp-recordado { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap;
  background:#ecfdf5; border:1px solid #a7f3d0; color:#065f46;
  border-radius:.6rem; padding:.55rem .75rem; font-size:.8125rem; margin-bottom:1rem; }
.erp-recordado button { background:none; border:0; color:#065f46; text-decoration:underline;
  cursor:pointer; font-size:.8125rem; font-family:inherit; padding:0; }
.erp-recordado button:hover { color:var(--red,#C40018); }

/* El plegado no puede depender del estilo por defecto del navegador:
   algunos motores embebidos no ocultan el contenido de <details> cerrado. */
.erp-detalles > *:not(summary),
.tut-details > *:not(summary) { display: none; }
.erp-detalles[open] > *:not(summary),
.tut-details[open] > *:not(summary) { display: block; }

/* ---- Tarjeta que gira al tocarla ---- */
.flip-card { perspective: 1200px; cursor: pointer; min-height: 15.5rem; }
.flip-inner { position: relative; width: 100%; height: 100%; min-height: inherit;
  transition: transform .6s cubic-bezier(.4,.2,.2,1); transform-style: preserve-3d; }
.flip-card.flipped .flip-inner { transform: rotateY(180deg); }
.flip-face { position: absolute; inset: 0; backface-visibility: hidden;
  -webkit-backface-visibility: hidden; display: flex; flex-direction: column; justify-content: center; }
.flip-back { transform: rotateY(180deg); }
.flip-card:focus-visible { outline: 3px solid var(--red,#C40018); outline-offset: 3px; border-radius: 16px; }
.flip-pista { display: inline-flex; align-items: center; gap: .35rem; margin-top: 1rem;
  font-size: .75rem; font-weight: 700; letter-spacing: .04em; color: var(--red,#C40018); }
.flip-card:hover .flip-pista { text-decoration: underline; }
.flip-lista { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem .75rem;
  font-size: .8125rem; color: #475569; }
.flip-lista li { position: relative; padding-left: .95rem; list-style: none; }
.flip-lista li::before { content: "✓"; position: absolute; left: 0; color: var(--red,#C40018); font-weight: 800; }
@media (prefers-reduced-motion: reduce) { .flip-inner { transition: none; } }

/* ---- Tarjetas de tutoriales que giran ---- */
.tut-card { min-height: 21.5rem; }
.tut-card .flip-face { border-radius: 1rem; border: 1px solid rgba(0,0,0,.06); background: #fff;
  overflow: hidden; box-shadow: 0 20px 45px -25px rgba(13,13,13,.25); }
.tut-front { justify-content: flex-start; padding: 0; }
.tut-img { position: relative; height: 9.5rem; flex: none; overflow: hidden; }
.tut-badge { position: absolute; top: .75rem; left: .75rem; font-size: 10px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: #fff; background: rgba(196,0,24,.9);
  border-radius: .25rem; padding: .25rem .5rem; }
.tut-num { position: absolute; top: .75rem; right: .75rem; width: 2rem; height: 2rem;
  display: grid; place-items: center; border-radius: .5rem; background: rgba(255,255,255,.95);
  color: var(--red,#C40018); font-family: Montserrat, sans-serif; font-weight: 800; font-size: .75rem; }
.tut-cuerpo { padding: 1.5rem; display: flex; flex-direction: column; flex: 1; justify-content: space-between; }
.tut-card .tut-back { padding: 1.75rem 1.5rem; justify-content: flex-start;
  background: #0D0D0D; color: #fff; border-color: #0D0D0D; }
.tut-card .tut-back h3 { color: #fff; margin-top: .6rem; }
.tut-num-back { display: inline-grid; place-items: center; width: 2rem; height: 2rem; flex: none;
  border-radius: .5rem; background: var(--red,#C40018); color: #fff;
  font-family: Montserrat, sans-serif; font-weight: 800; font-size: .75rem; }
.tut-texto { font-size: .8125rem; line-height: 1.65; color: rgba(255,255,255,.72); margin-top: .7rem; }
.tut-texto strong { color: #fff; font-weight: 700; }
.tut-card .tut-back .flip-pista { color: #FF1E3C; margin-top: auto; padding-top: .9rem; }

/* ---- Tarjeta "Visítanos" con foto de fondo ---- */
.visita { position: relative; overflow: hidden; border-radius: 1.5rem;
  background: var(--ink,#0D0D0D); color: #fff; min-height: 30rem; }
.visita-foto { position: absolute; inset: 0; background-size: cover; background-position: center;
  opacity: .3; }
.visita-velo { position: absolute; inset: 0;
  background: linear-gradient(155deg, rgba(13,13,13,.6) 0%, rgba(13,13,13,.93) 55%, rgba(13,13,13,.98) 100%); }
.visita-velo::after { content: ""; position: absolute; inset: 0; opacity: .35;
  background-image: repeating-linear-gradient(115deg, transparent 0 46px, rgba(196,0,24,.55) 46px 48px); }
.visita-contenido { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column;
  justify-content: center; padding: 2.5rem; }
.visita-icono { width: 2.5rem; height: 2.5rem; flex: none; display: grid; place-items: center;
  border-radius: .75rem; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.1);
  color: var(--red-bright,#FF1E3C); }
.visita-entrega { display: flex; align-items: flex-start; gap: .875rem; margin-top: 1.75rem;
  padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.12); }
.visita-icono-rojo { width: 2.5rem; height: 2.5rem; flex: none; display: grid; place-items: center;
  border-radius: .75rem; background: var(--red,#C40018); color: #fff; }
@media (max-width: 640px) { .visita-contenido { padding: 1.75rem; } }

/* ---- Preguntas frecuentes ---- */
.tut-details > summary.faq-q { font-family: Montserrat, Inter, sans-serif; font-weight: 700;
  font-size: .975rem; color: var(--ink,#0D0D0D); line-height: 1.4; align-items: flex-start; gap: .6rem; }
.tut-details[open] > summary.faq-q { color: var(--red,#C40018); }
.tut-details > summary.faq-q::after { margin-left: auto; color: var(--red,#C40018); }

/* ============================================================
   PREVIEW DE OP EN VIVO (envío de archivos)
   El mismo lenguaje visual servirá de base para el correo real.
   ============================================================ */
.op-preview { position: sticky; top: 6rem; z-index: 5; background: #fff; border: 1px solid #e2e8f0;
  border-radius: 16px; overflow: hidden; box-shadow: 0 20px 45px -25px rgba(13,13,13,.25); }
.op-head { display: flex; align-items: center; justify-content: space-between;
  background: var(--ink,#0D0D0D); color: #fff; padding: .85rem 1rem; }
.op-marca { display: inline-flex; align-items: center; gap: .55rem; font-family: Montserrat, sans-serif;
  font-weight: 800; font-size: .95rem; letter-spacing: -.01em; }
.op-marca img { border-radius: 6px; }
.op-marca b { color: var(--red-bright,#FF1E3C); }
.op-tag { font-size: .625rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: #fff; background: var(--red,#C40018); border-radius: 999px; padding: .2rem .55rem; }
.op-titulo { font-family: Montserrat, sans-serif; font-weight: 800; font-size: .95rem;
  padding: .9rem 1rem .3rem; color: var(--ink,#0D0D0D); }
.op-body { padding: 0 1rem 1rem; }
.op-sec { margin-top: .9rem; }
.op-sec:first-child { margin-top: .3rem; }
.op-sec-t { font-size: .625rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--red,#C40018); border-bottom: 1px solid #f1f5f9; padding-bottom: .3rem; margin-bottom: .5rem; }
.op-row { display: flex; gap: .5rem; font-size: .8125rem; line-height: 1.5; padding: .1rem 0; }
.op-row .k { flex: none; width: 5.5rem; color: #94a3b8; }
.op-row .v { color: #334155; font-weight: 500; min-width: 0; word-break: break-word; }
.op-row .v.vacio { color: #cbd5e1; font-weight: 400; font-style: italic; }
.op-item { border: 1px solid #eef2f6; border-radius: 10px; padding: .6rem .7rem; margin-top: .5rem; }
.op-item-h { display: flex; align-items: center; gap: .45rem; margin-bottom: .35rem; }
.op-item-n { flex: none; width: 1.25rem; height: 1.25rem; border-radius: 999px; background: var(--red,#C40018);
  color: #fff; font-size: .625rem; font-weight: 800; display: grid; place-items: center; }
.op-item-nom { font-weight: 700; font-size: .8125rem; color: var(--ink,#0D0D0D); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op-chips { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .35rem; }
.op-chip { font-size: .6875rem; font-weight: 600; color: #475569; background: #f1f5f9;
  border-radius: 6px; padding: .15rem .45rem; }
.op-tintas { display: inline-flex; gap: .2rem; }
.op-t { width: 1.05rem; height: 1.05rem; border-radius: 4px; font-size: .5625rem; font-weight: 800;
  display: grid; place-items: center; color: #fff; }
.op-t.c { background: #00AEEF; } .op-t.m { background: #EC008C; }
.op-t.y { background: #FFF200; color: #665600; } .op-t.k { background: #231F20; }
.op-t.off { background: #e2e8f0; color: #94a3b8; }
.op-nota { font-size: .6875rem; color: #94a3b8; line-height: 1.5; background: #f8fafc;
  border-top: 1px solid #f1f5f9; padding: .7rem 1rem; margin: 0; }
@media (max-width: 1023px) { .op-preview { position: static; } }