/* ── Perigami — hoja de estilos ───────────────────────────────────────── */

/* ── Fuente: Ubuntu Mono auto-hospedada ───────────────────────────────── */
@font-face {
  font-family: 'Ubuntu Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/ubuntu-mono-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Ubuntu Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/ubuntu-mono-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Ubuntu Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/ubuntu-mono-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Ubuntu Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/ubuntu-mono-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── Variables ────────────────────────────────────────────────────────── */
:root {
  --cyan:    #009DD8;
  --green:   #6DD900;
  --orange:  #FF7100;
  --pink:    #F6006A;
  --blue:    #1700BC;
  --yellow:  #FFD900;
  --bg:      #000;
  --surface: #0c0c1b;
  --border:  #1c1c3a;
  --text:    #bfcfe0;
  --muted:   #808080;
  --font:    'Ubuntu Mono', monospace;
  --gap:          clamp(.65rem, 2.2vw, 1.1rem);
  --cut-lg:   10px;
  --cut-lg-h: var(--cut-lg);
  --clip-lg: polygon(var(--cut-lg-h) 0, 100% 0, 100% calc(100% - var(--cut-lg)),
                     calc(100% - var(--cut-lg-h)) 100%, 0 100%, 0 var(--cut-lg));
  --ring-w: 2px;
  --ring-w-diag: calc(var(--ring-w) * .41421);
  --clip-lg-ring: polygon(
    var(--cut-lg-h) 0, 100% 0, 100% calc(100% - var(--cut-lg)),
    calc(100% - var(--cut-lg-h)) 100%, 0 100%, 0 var(--cut-lg), var(--cut-lg-h) 0,
    calc(var(--cut-lg-h) + var(--ring-w-diag)) var(--ring-w),
    var(--ring-w) calc(var(--cut-lg) + var(--ring-w-diag)),
    var(--ring-w) calc(100% - var(--ring-w)),
    calc(100% - var(--cut-lg-h) - var(--ring-w-diag)) calc(100% - var(--ring-w)),
    calc(100% - var(--ring-w)) calc(100% - var(--cut-lg) - var(--ring-w-diag)),
    calc(100% - var(--ring-w)) var(--ring-w),
    calc(var(--cut-lg-h) + var(--ring-w-diag)) var(--ring-w)
  );
  --max-w:        62vw;
  --max-w-mobile: 92vw;
  --max-w-logo:   540px;

  --cols-desktop: 7;
  --cols-tablet:  5;
  --cols-mobile:  3;
  --breakpoint:        900px;
  --breakpoint-mobile: 600px;
  --fs:      clamp(.85rem, 2.1vw, 1.02rem);
  --fs-sm:   clamp(.75rem, 1.8vw, .88rem);
  --tri-gap: 6px;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root { user-select: none; }

/* ── Fondo: patrón, viñeta y charco de luz ────────────────────────────── */
body {
  font-family: var(--font);
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse 70% 70% at 50% 50%, transparent 30%, rgba(0,0,0,1) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54.12 93.75'%3E%3Cpath fill='%23009DD8' fill-opacity='.12' d='M37.64,0l14.15,24.5c.52.9,1.43,1.35,2.34,1.35V0h-16.48ZM7.01,29.9h40.1c2.08,0,3.38-2.25,2.34-4.05L34.52,0h-14.92L4.68,25.85c-1.04,1.8.26,4.05,2.34,4.05ZM51.79,38l-20.05,34.72c-1.04,1.8.26,4.05,2.34,4.05h20.05v-40.12c-.91,0-1.82.45-2.34,1.35ZM47.11,32.6H7.01c-2.08,0-3.38,2.25-2.34,4.05l20.05,34.72c1.04,1.8,3.64,1.8,4.68,0l20.05-34.72c1.04-1.8-.26-4.05-2.34-4.05ZM22.38,72.72L2.34,38c-.52-.9-1.43-1.35-2.34-1.35v40.12h20.05c2.08,0,3.38-2.25,2.34-4.05ZM31.74,83.52l5.9,10.22h16.48v-14.27h-20.05c-2.08,0-3.38,2.25-2.34,4.05ZM2.34,24.5L16.48,0H0v25.85c.91,0,1.82-.45,2.34-1.35ZM24.72,84.87l-5.12,8.88h14.92l-5.12-8.88c-1.04-1.8-3.64-1.8-4.68,0ZM20.04,79.47H0v14.27h16.48l5.9-10.22c1.04-1.8-.26-4.05-2.34-4.05Z'/%3E%3C/svg%3E");
  background-size: 100% 100%, 140px 242.49px;
  background-repeat: no-repeat, repeat;
  color: var(--text);
  height: 100vh;
  height: 100dvh;
  display: flex;
  justify-content: center;
  padding: var(--gap);
  overflow: hidden;
}
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse 62% 52% at 50% 42%, rgba(0,157,216,.13) 0%, transparent 68%);
  animation: bg-pulse 10s ease-in-out infinite;
  pointer-events: none;
  z-index: -2;
}
@keyframes bg-pulse {
  0%, 100% { opacity: .35; }
  50%      { opacity:  1;  }
}

body.modal-open { overflow: hidden; }
/* ── Animaciones de fondo en pausa con un modal abierto ───────────────── */
body.modal-open::after,
body.modal-open :is(.new-badge, .ir-servicios) {
  animation-play-state: paused;
}

/* ── Container ────────────────────────────────────────────────────────── */
.container {
  position: relative;
  width: 100%;
  max-width: var(--max-w);
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

@media (max-width: 899px) {
  .container { max-width: 82vw; }
}
@media (max-width: 600px) {
  .container { max-width: var(--max-w-mobile); }
}

/* ── Logo ─────────────────────────────────────────────────────────────── */
.logo-row {
  flex-shrink: 0;
  padding: 0 calc(var(--gap) * 2);
  max-width: var(--max-w-logo);
  align-self: center;
  width: 100%;
}
header { width: 100%; }
.logo-trigger { cursor: pointer; transform-origin: bottom center; width: 100%; }
.logo-visual { position: relative; aspect-ratio: 134.6 / 35; }
.plus-trigger {
  position: absolute;
  top: 6%;
  left: 100%;
  width: 4%;
  aspect-ratio: 1;
  padding: 0;
  margin: 0;
  border: none;
  background: none;
  cursor: pointer;
}
.plus-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.plus-trigger .cls-1 { fill: var(--cyan); transition: fill .2s ease; }
.plus-trigger:hover .cls-1,
.plus-trigger:focus-visible .cls-1,
.plus-trigger:active .cls-1 { fill: #fff; }
.plus-trigger:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
@keyframes logo-unfold {
  from { transform: perspective(900px) rotateX(-16deg); }
  to   { transform: perspective(900px) rotateX(0deg);   }
}
.logo-trigger:hover:not(:has(.plus-trigger:hover)) { animation: logo-unfold 420ms cubic-bezier(.22,.68,.35,1) forwards; }
.logo-trigger:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }
.logo-svg { display: block; width: 100%; height: auto; overflow: visible; }

html:not(.no-js) #logoHeader         { opacity: 0; }
html:not(.no-js) #logoHeader.is-in   { opacity: 1; }

.logo-svg .borde {
  fill: #fff;
  clip-path: circle(0% at var(--mx, 50%) var(--my, 50%));
  transition: clip-path .65s cubic-bezier(.16,.84,.44,1);
}
.logo-trigger:hover:not(:has(.plus-trigger:hover))  .logo-svg .borde,
.logo-trigger:focus-visible:not(:has(.plus-trigger:focus-visible)) .logo-svg .borde,
.logo-trigger:active:not(:has(.plus-trigger:active)) .logo-svg .borde {
  clip-path: circle(150% at var(--mx, 50%) var(--my, 50%));
}

/* ── Main / Masonry ───────────────────────────────────────────────────── */
main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable both-edges;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
}
main::-webkit-scrollbar { display: none; }
.pagina-mosaico {
  position: relative;
  flex: none;
  height: 100%;
  display: flex;
  flex-direction: column;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.masonry {
  flex: 1;
  min-height: 0;
  position: relative;
  overflow: visible;
  perspective: 1100px;
}
.no-js .masonry {
  display: grid;
  grid-template-columns: repeat(var(--cols-mobile), 1fr);
  gap: 6px;
  padding: .6rem 0;
}
@media (min-width: 600px) { .no-js .masonry { grid-template-columns: repeat(var(--cols-tablet), 1fr); } }
@media (min-width: 900px) { .no-js .masonry { grid-template-columns: repeat(var(--cols-desktop), 1fr); } }
.no-js .project-item        { position: static; aspect-ratio: 1 / .866; }
.no-js .project-item.prior  { grid-column: span 2; grid-row: span 2; }
.no-js .project-item.huge   { grid-column: span 3; grid-row: span 3; }
.no-js .project-item:nth-child(odd)  .project-card { clip-path: polygon(50% 8%, 92% 92%, 8% 92%); }
.no-js .project-item:nth-child(even) .project-card { clip-path: polygon(8% 8%, 92% 8%, 50% 92%); }

/* ── Tarjeta: triángulo recortado ─────────────────────────────────────── */
.project-item {
  position: absolute;
  pointer-events: none;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.55));
}

.hover-ring {
  position: absolute;
  z-index: 100;
  background: #fff;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.hover-ring.is-visible { opacity: 1; }

.project-card {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: var(--surface);
  background-image: var(--prev, none);
  transition: background-color .4s ease;
  background-size: cover;
  background-position: var(--bg-x, center) var(--bg-y, center);
  text-decoration: none;
  cursor: pointer;
  display: block;
  pointer-events: auto;
  clip-path: var(--tri-clip, none);
  box-shadow:
    inset 0 0 30px 5px color-mix(in srgb, var(--paper, transparent) 65%, transparent);
}
.project-card:not([style]) {
  background-image: linear-gradient(135deg,
    rgba(0,157,216,.18) 0%, rgba(109,217,0,.10) 50%, rgba(246,0,106,.14) 100%);
}

.project-card.is-dragging { opacity: .35; }
.project-card:focus-visible { outline: none; }

.project-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(8,8,15,.05) 0%,
    rgba(8,8,15,.20) 60%,
    rgba(8,8,15,.38) 100%);
  pointer-events: none;
  transition: background .3s ease;
}
.project-card.flash::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #fff;
  pointer-events: none;
  animation: hover-flash .5s ease-out forwards;
}
@keyframes hover-flash {
  from { opacity: .9; }
  to   { opacity: 0; }
}

.new-badge {
  position: absolute;
  inset: 0;
  clip-path: var(--tri-clip, none);
  box-shadow: inset 0 0 0 3px var(--yellow);
  animation: new-badge-pulse 2.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes new-badge-pulse {
  0%, 100% { opacity: .55; }
  50%      { opacity: 1;   }
}

/* ── Deslizar para recargar ───────────────────────────────────────────── */
.tiron-recarga {
  position: fixed;
  top: 0;
  left: 50%;
  z-index: 160;
  line-height: 0;
  color: #fff;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.5));
  transform: translate(-50%, -100%);
  opacity: 0;
  pointer-events: none;
  transition: transform .25s ease, opacity .25s ease;
}
.tiron-recarga[style*="transform"] { transition: none; }
.tiron-recarga svg { display: block; overflow: visible; }
.tiron-recarga__tri { fill: #161c26; transition: fill .2s ease; }
.tiron-recarga.listo { color: #000; }
.tiron-recarga.listo .tiron-recarga__tri { fill: #fff; }

/* ── Franja de accesos (redes, contacto) ──────────────────────────────── */
html:not(.no-js) .util-strip       { opacity: 0; }
html:not(.no-js) .util-strip.is-in { opacity: 1; }
.util-strip {
  position: fixed;
  right: var(--gap);
  bottom: var(--gap);
  display: flex;
  z-index: 150;
  pointer-events: none;
}
.util-strip-left { right: auto; left: var(--gap); }
.util-tri {
  position: relative;
  display: block;
  pointer-events: auto;
  background: #161c26;
  border: none;
  padding: 0;
  cursor: pointer;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.5));
  transition: filter .2s ease, background-color .2s ease;
}
.util-tri + .util-tri { margin-left: -32px; }
.util-tri:hover, .util-tri:focus-visible, .util-tri:active {
  background: #fff;
  filter: drop-shadow(0 6px 8px rgba(0,0,0,.6));
  outline: none;
}
.util-tri .util-hole { color: #fff; mix-blend-mode: normal; }
.util-tri:hover .util-hole, .util-tri:focus-visible .util-hole, .util-tri:active .util-hole,
.util-tri.pulsado .util-hole {
  color: #000;
}
/* ── "Dato de hoy" como calendario ────────────────────────────────────── */
.util-tri.pulsado {
  background: #fff;
  filter: drop-shadow(0 6px 8px rgba(0,0,0,.6));
}
.util-tri.dato-hoy.con-fecha:hover,
.util-tri.dato-hoy.con-fecha:focus-visible,
.util-tri.dato-hoy.con-fecha:active,
.util-tri.dato-hoy.con-fecha.pulsado { background: var(--dato-acento); }
.dato-hoy-cal { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.dato-hoy-cal .banda { fill: var(--dato-acento); }
.dato-hoy-cal .borde { fill: none; stroke: var(--dato-acento); stroke-width: 3; }
.dato-hoy-cal text {
  font-family: var(--font); font-weight: 700;
  text-anchor: middle; dominant-baseline: central;
}
.dato-hoy-cal .banda, .dato-hoy-cal text { transition: fill .2s ease; }
.dato-hoy-cal .mes { fill: #0f0f12; font-size: 10.5px; letter-spacing: .04em; }
.dato-hoy-cal .dia { fill: var(--dato-acento); font-size: 14px; }
.util-tri.dato-hoy.con-fecha:hover .dia,
.util-tri.dato-hoy.con-fecha:focus-visible .dia,
.util-tri.dato-hoy.con-fecha:active .dia,
.util-tri.dato-hoy.con-fecha.pulsado .dia { fill: #0f0f12; }
.util-tri.dato-hoy.con-fecha:hover .banda,
.util-tri.dato-hoy.con-fecha:focus-visible .banda,
.util-tri.dato-hoy.con-fecha:active .banda,
.util-tri.dato-hoy.con-fecha.pulsado .banda { fill: #161c26; }
.util-tri.dato-hoy.con-fecha:hover .mes,
.util-tri.dato-hoy.con-fecha:focus-visible .mes,
.util-tri.dato-hoy.con-fecha:active .mes,
.util-tri.dato-hoy.con-fecha.pulsado .mes { fill: var(--dato-acento); }

@keyframes util-unfold {
  from { opacity: 0; transform: perspective(400px) rotateX(-75deg); }
  to   { opacity: 1; transform: perspective(400px) rotateX(0deg);   }
}
.util-tri.enter {
  opacity: 0;
  transform-origin: bottom center;
  animation: util-unfold .4s cubic-bezier(.22,.68,.35,1) forwards;
  animation-delay: var(--delay, 0ms);
}
.util-hole {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  mix-blend-mode: destination-out;
  pointer-events: none;
}
@media (max-width: 380px) {
  .util-strip { right: calc(var(--gap) - 4px); bottom: calc(var(--gap) - 4px); }
  .util-strip-left { right: auto; left: calc(var(--gap) - 4px); }
}

/* ── Aviso de desarrollo (sólo en local) ──────────────────────────────── */
.aviso-dev {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 400;
  padding: .5rem 1rem;
  background: var(--pink);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 700;
  text-align: center;
}

/* ── Empty state ──────────────────────────────────────────────────────── */
.empty { flex:1; display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:var(--fs); }

/* ═══════════════════════════════════════════════════════════════════════ */
/* ── Servicios ────────────────────────────────────────────────────────── */

/* ── Triángulo que anuncia la sección ─────────────────────────────────── */
.ir-servicios {
  position: absolute;
  left: 50%;
  bottom: 16.5px;
  translate: -50% 0;
  z-index: 5;
  display: block;
  width: 26px;
  height: 22.5px;
  background: var(--cyan);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.5));
  animation: ir-bajar 1.8s ease-in-out infinite;
  transition: background .2s ease, opacity .6s ease, scale .2s ease;
}
.ir-servicios.sobre-franja { bottom: calc(56px + 8px); }
html:not(.no-js) .ir-servicios       { opacity: 0; }
html:not(.no-js) .ir-servicios.is-in { opacity: 1; }
.ir-servicios:hover, .ir-servicios:focus-visible { background: #fff; scale: 1.2; outline: none; }
@keyframes ir-bajar {
  0%, 100% { transform: translateY(-3px); }
  50%      { transform: translateY(3px); }
}
@media (max-width: 380px) {
  .ir-servicios { bottom: 12.5px; }
}

/* ── Sección ──────────────────────────────────────────────────────────── */
.servicios {
  flex: none;
  height: 100%;
  overflow: hidden;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(.6rem, 2.6vh, 1.6rem);
  padding: clamp(.8rem, 3vh, 2rem) 0 calc(56px + .8rem);
}
.servicios-escenario {
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.servicios-cabeza { position: relative; text-align: center; max-width: 42rem; }
.servicios-titulo {
  font-size: clamp(1.6rem, min(5vw, 6.5vh), 3.1rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.01em;
  color: #fff;
  background: linear-gradient(90deg, var(--cyan), var(--green), var(--orange), var(--pink), var(--yellow));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.srv-palabra { display: inline-block; text-align: center; }
.servicios-titulo.mutando .srv-palabra { visibility: hidden; }
.srv-mutacion { position: absolute; left: 0; top: 0; pointer-events: none; }

/* ── Franja de servicios ──────────────────────────────────────────────── */
.servicios-tira {
  width: min(100%, 1060px);
  display: grid;
  grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr));
  grid-template-rows: auto auto auto;
}
.srv {
  position: relative;
  grid-column: var(--pos) / span 2;
  grid-row: 1 / -1;
  display: grid;
  grid-template-rows: subgrid;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: center;
  cursor: pointer;
  pointer-events: none;
}
.srv:focus-visible { outline: none; }
.srv:hover, .srv:focus-visible { z-index: 3; }

.srv-tri {
  grid-row: 2;
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 1.7320508;
  pointer-events: none;
  transform-origin: 50% 100%;
}
.srv-fig {
  position: absolute;
  inset: 0;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.55));
}
.srv-placa {
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
  transition: opacity .25s ease;
}
.srv-recorte {
  --cx: 50%; --cy: 66.67%;
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: auto;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  background:
    radial-gradient(circle at var(--cx) var(--cy),
      color-mix(in srgb, var(--tono) 72%, #fff) 0%,
      var(--tono) 42%,
      color-mix(in srgb, var(--tono) 42%, #000) 100%);
}
.srv-recorte picture, .srv-recorte img {
  display: block;
  width: 100%;
  height: 100%;
}
.srv-recorte img { object-fit: cover; }
.srv-recorte::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: #fff;
  opacity: 0;
  pointer-events: none;
}
.srv-icono {
  position: absolute;
  left: var(--cx);
  top: var(--cy);
  width: 34%;
  transform: translate(-50%, -50%);
  fill: none;
  stroke: #06060f;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .82;
}

.srv[data-orient="down"]  .srv-tri { transform-origin: 50% 0; }
.srv[data-orient="right"] .srv-tri { transform-origin: 0 50%; }
.srv[data-orient="left"]  .srv-tri { transform-origin: 100% 50%; }
.srv[data-orient="down"]  .srv-recorte { --cx: 50%;    --cy: 33.33%; }
.srv[data-orient="right"] .srv-recorte { --cx: 33.33%; --cy: 50%; }
.srv[data-orient="left"]  .srv-recorte { --cx: 66.67%; --cy: 50%; }

.srv-etq {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .25rem;
  padding: .25rem .55rem;
  pointer-events: auto;
  transition: opacity .3s ease;
}
.srv[data-lado="a"] .srv-etq { grid-row: 3; align-self: start; }
.srv[data-lado="b"] .srv-etq { grid-row: 1; align-self: end; }
.srv-placa { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.srv[data-lado="b"] :is(.srv-placa, .srv-recorte) { clip-path: polygon(0 0, 100% 0, 50% 100%); }
.srv-titulo {
  color: var(--tono);
  font-size: clamp(.88rem, 1.45vw, 1.08rem);
  font-weight: 700;
  line-height: 1.2;
  transition: color .2s ease;
}

.srv:hover .srv-placa, .srv:focus-visible .srv-placa { opacity: 1; }
.srv:hover .srv-fig, .srv:focus-visible .srv-fig { filter: none; }
.srv:hover .srv-recorte::after, .srv:focus-visible .srv-recorte::after { animation: hover-flash .5s ease-out forwards; }
.srv:hover .srv-titulo, .srv:focus-visible .srv-titulo { color: #fff; }

/* ── Entrada de la sección ────────────────────────────────────────────── */
@keyframes srv-unfold {
  from { opacity: 0; transform: perspective(900px) rotateX(var(--plg-x, 0deg)) rotateY(var(--plg-y, 0deg)); }
  to   { opacity: 1; transform: perspective(900px) rotateX(0deg) rotateY(0deg); }
}
@keyframes srv-aparece {
  from { opacity: 0; transform: translateY(var(--desde, 10px)); }
  to   { opacity: 1; transform: none; }
}
.srv-tri { --plg-x: -88deg; }
.srv[data-orient="down"]  .srv-tri { --plg-x: 88deg; }
.srv[data-orient="right"] .srv-tri { --plg-x: 0deg; --plg-y: -88deg; }
.srv[data-orient="left"]  .srv-tri { --plg-x: 0deg; --plg-y: 88deg; }
.srv[data-lado="b"] .srv-etq { --desde: -10px; }
html:not(.no-js) .servicios:not(.is-in) :is(.servicios-cabeza > *, .srv-tri, .srv-etq) { opacity: 0; }
.servicios.is-in .servicios-cabeza > * { animation: srv-aparece .6s cubic-bezier(.22,.68,.35,1) both; }
.servicios.is-in .srv-tri {
  animation: srv-unfold .7s cubic-bezier(.22,.68,.35,1) both;
  animation-delay: calc(var(--pos) * 90ms + 150ms);
}
.servicios.is-in .srv-etq {
  animation: srv-aparece .55s cubic-bezier(.22,.68,.35,1) both;
  animation-delay: calc(var(--pos) * 90ms + 420ms);
}
.servicios.is-in .servicios-titulo { animation: srv-aparece .6s 80ms cubic-bezier(.22,.68,.35,1) both; }

/* ── Pantallas angostas: franja vertical ──────────────────────────────── */
@media (max-width: 560px) {
  .servicios-tira {
    --espina: min(31vw, 150px, calc(var(--alto, 100vh) * 1.7320508 / var(--n, 6)));
    width: 100%;
    grid-template-columns: minmax(0, 1fr) var(--espina) minmax(0, 1fr);
    grid-template-rows: repeat(var(--n, 6), calc(var(--espina) / 1.7320508));
  }
  .srv {
    grid-column: 1 / -1;
    grid-row: var(--pos) / span 2;
    grid-template-rows: none;
    grid-template-columns: subgrid;
  }
  .srv-tri {
    grid-row: 1;
    grid-column: 2;
    width: auto;
    aspect-ratio: auto;
    align-self: stretch;
  }
  .srv[data-lado="a"] :is(.srv-placa, .srv-recorte) { clip-path: polygon(0 0, 100% 50%, 0 100%); }
  .srv[data-lado="b"] :is(.srv-placa, .srv-recorte) { clip-path: polygon(100% 0, 100% 100%, 0 50%); }
  .srv-etq { padding: .2rem .4rem; }
  .srv[data-lado="a"] .srv-etq { grid-row: 1; grid-column: 1; align-self: center; align-items: flex-end; text-align: right; }
  .srv[data-lado="b"] .srv-etq { grid-row: 1; grid-column: 3; align-self: center; align-items: flex-start; text-align: left; }
  .srv-titulo { font-size: min(.85rem, 3.4vw); }
  .srv[data-lado="a"] .srv-etq { --desde: 0; }
  .srv[data-lado="b"] .srv-etq { --desde: 0; }
}

/* ── Modal de un servicio ─────────────────────────────────────────────── */
#modalServicio .modal-wrap { --cyan: var(--srv-tono, #009DD8); max-width: 540px; }
#modalServicio .modal-body { padding-bottom: 0; }

/* ── Cabezote ─────────────────────────────────────────────────────────── */
.srv-cabezote {
  --cx: 50%; --cy: 50%;
  position: relative;
  isolation: isolate;
  margin: -1.1rem -1.35rem 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 50%,
      color-mix(in srgb, var(--tono) 72%, #fff) 0%,
      var(--tono) 40%,
      color-mix(in srgb, var(--tono) 40%, #000) 100%);
}
.srv-diapo {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.4s ease;
}
.srv-diapo.activa { opacity: 1; z-index: 2; }
.srv-diapo.saliente { opacity: 1; z-index: 1; transition: none; }
.srv-diapo img,
video.srv-diapo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.srv-cabezote::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background: linear-gradient(to bottom, transparent 45%, rgba(8,8,15,.7) 100%);
  pointer-events: none;
}
.srv-cabezote .srv-icono { width: 18%; }

/* ── Cabeza del panel ─────────────────────────────────────────────────── */
.srv-panel-cabeza {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin: -2.6rem 0 1rem;
}
.srv-panel-titulos { flex: 1; padding-top: 3.6rem; min-width: 0; }
.srv-panel-tri {
  --plg-x: -88deg;
  position: relative;
  flex: 0 0 auto;
  width: 104px;
  height: 90px;
  transform-origin: 50% 100%;
  animation: srv-unfold .55s .08s cubic-bezier(.22,.68,.35,1) both;
}
.srv-panel-tri .srv-recorte { pointer-events: none; }
#modalServicio h2 {

  color: var(--cyan);
  transition: color .2s ease;
  font-size: clamp(1.1rem, 3.6vw, 1.42rem);
  line-height: 1.15;
}
.srv-panel.entra-sig { animation: srv-panel-entra .35s cubic-bezier(.22,.68,.35,1) both; --desde-x: 28px; }
.srv-panel.entra-ant { animation: srv-panel-entra .35s cubic-bezier(.22,.68,.35,1) both; --desde-x: -28px; }
@keyframes srv-panel-entra {
  from { opacity: 0; transform: translateX(var(--desde-x)); }
  to   { opacity: 1; transform: none; }
}
#modalServicio .topic:hover { background: var(--cyan); }
.modal-body .srv-panel-desc { margin-top: .9rem; }

/* ── Tarifas ──────────────────────────────────────────────────────────── */
.srv-tarifas {
  --bisel: 8px;
  display: flex;
  flex-direction: column;
  gap: .9rem;
  margin-top: .6rem;
}
.srv-paquetes {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}
.srv-paquete,
.srv-destacado {
  background: rgba(255,255,255,.045);
  clip-path: polygon(var(--bisel) 0, 100% 0, 100% calc(100% - var(--bisel)),
                     calc(100% - var(--bisel)) 100%, 0 100%, 0 var(--bisel));
}
.srv-paquete {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  align-content: start;
  column-gap: .4rem;
  padding: .65rem .6rem .7rem;
  transition: background .2s ease;
}
.srv-paquete:hover { background: color-mix(in srgb, var(--cyan) 14%, transparent); }
.srv-paquete-cant {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 34px;
  height: 29.44px;
  padding-bottom: 3px;
  background: var(--cyan);
  clip-path: path("M14.401,4.499 Q17,0 19.598,4.499 L31.401,24.940 Q34,29.44 28.803,29.44 L5.196,29.44 Q0,29.44 2.598,24.940 Z");
  color: #06060f;
  font-weight: 700;
  font-size: .85rem;
  line-height: 1.2;
}
.srv-paquete-unidad {
  position: relative;
  left: -3px;
  top: 5px;
  color: var(--cyan);
  font-size: .83rem;
  line-height: 1.2;
}
.srv-paquete > :not(.srv-paquete-cant, .srv-paquete-unidad) { grid-column: 1 / -1; }
.srv-paquete-precio {
  margin-top: .45rem;
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .01em;
}
.srv-paquete-cu {
  color: var(--cyan);
  font-size: .72rem;
  font-weight: 700;
}
.srv-paquete-nota {
  margin-top: .4rem;
  color: var(--text);
  font-size: .72rem;
  line-height: 1.3;
}
.modal-body .srv-tarifas-comun,
.modal-body .srv-tarifas-notas {
  margin: 0;
  color: var(--muted);
  font-size: .75rem;
  line-height: 1.45;
}
.modal-body .srv-tarifas-comun { margin-top: -.45rem; }
.srv-destacado {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: .25rem 1rem;
  padding: .7rem .8rem .75rem;
  background: color-mix(in srgb, var(--cyan) 12%, transparent);
}
.srv-destacado-titulo { color: #fff; font-weight: 700; }
.srv-destacado-precio { color: var(--cyan); font-weight: 700; white-space: nowrap; }
.srv-destacado-nota {
  grid-column: 1 / -1;
  color: var(--text);
  font-size: .75rem;
  line-height: 1.4;
}
.srv-tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: .8rem;
}
.srv-tabla caption {
  cursor: pointer;
  padding-bottom: .35rem;
  color: var(--muted);
  font-size: .72rem;
  letter-spacing: .16em;
  text-align: left;
  text-transform: uppercase;
}
.srv-tabla caption::before {
  content: "";
  display: inline-block;
  margin-right: .55em;
  vertical-align: 0;
  width: 8px;
  height: 8px;
  background: var(--cyan);
  clip-path: polygon(0 6%, 100% 6%, 50% 94%);
  transition: clip-path .25s ease, background .2s ease;
}
.srv-tabla caption:hover,
.srv-tabla caption:focus-visible { color: #fff; outline: none; }
.srv-tabla caption:hover::before,
.srv-tabla caption:focus-visible::before { background: #fff; }
.srv-tabla.plegada caption::before { clip-path: polygon(6% 0, 94% 50%, 6% 100%); }
.srv-tabla.plegada tbody { display: none; }
.srv-tabla th,
.srv-tabla td {
  padding: .38rem 0;
  border-top: 1px solid rgba(255,255,255,.07);
  vertical-align: baseline;
}
.srv-tabla th {
  padding-right: 1rem;
  color: var(--text);
  font-weight: 400;
  text-align: left;
}
.srv-tabla td {
  color: #fff;
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
}
.srv-tabla tr:hover th { color: #fff; }
.srv-tabla tr:hover td { color: var(--cyan); }
@media (max-width: 600px) {
  .srv-paquetes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .srv-destacado { grid-template-columns: 1fr; }
}

/* ── Proyectos relacionados ───────────────────────────────────────────── */
.srv-rel {
  list-style: none;
  position: relative;
  height: 90px;
  margin-top: .6rem;
}
.srv-rel-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 104px;
  height: 90px;
  pointer-events: none;
}
.srv-rel-item:hover { z-index: 2; }
.srv-rel-tri {
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.55));
}
.srv-rel-tri:focus-visible { outline: none; }
.srv-rel-placa {
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
  transition: opacity .25s ease;
}
.srv-rel-recorte {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: auto;
  background-color: color-mix(in srgb, var(--paper, var(--cyan)) 30%, var(--surface));
}
.srv-rel-recorte picture, .srv-rel-recorte img {
  display: block;
  width: 100%;
  height: 100%;
}
.srv-rel-recorte img { object-fit: cover; }
.srv-rel-recorte::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  box-shadow: inset 0 0 16px 3px color-mix(in srgb, var(--paper, transparent) 65%, transparent);
  pointer-events: none;
}
.srv-rel-recorte::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: #fff;
  opacity: 0;
  pointer-events: none;
}
.srv-rel-tri:hover .srv-rel-placa, .srv-rel-tri:focus-visible .srv-rel-placa { opacity: 1; }
.srv-rel-tri:hover .srv-rel-recorte::after, .srv-rel-tri:focus-visible .srv-rel-recorte::after { animation: hover-flash .5s ease-out forwards; }
.srv-rel-tri:hover, .srv-rel-tri:focus-visible { filter: none; }

/* ── Pie del modal ────────────────────────────────────────────────────── */
.srv-panel-pie {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 1rem;
  margin-top: 1.3rem;
}
.srv-panel-pie .btn-primary { margin: 0 1rem 0 0; }

/* ── Botones pegados al borde inferior de los modales ─────────────────── */
:is(.form-submit-row, .srv-panel-pie) { overflow: hidden; }
:is(.form-submit-row, .srv-panel-pie) .btn { font-weight: 700; }
.modal-overlay.is-open :is(.form-submit-row, .srv-panel-pie) .btn {
  animation: btn-asoma .35s .35s cubic-bezier(.22,.68,.35,1) backwards;
}
@keyframes btn-asoma {
  from { transform: translateY(105%); }
  to   { transform: none; }
}

/* ── Flechas ◀ ▶ a los lados del modal ────────────────────────────────── */
.srv-paso {
  position: absolute;
  top: 50%;
  z-index: 3;
  width: 26px;
  height: 48px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  translate: 0 -50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: opacity .25s ease;
  -webkit-tap-highlight-color: transparent;
}
.srv-paso[data-paso="-1"] { right: 100%; }
.srv-paso[data-paso="1"]  { left: 100%; }
.srv-paso-tri {
  width: 9px;
  height: 11px;
  background: var(--muted);
  transition: background .2s ease, transform .2s ease;
}
.srv-paso[data-paso="-1"] .srv-paso-tri { clip-path: polygon(100% 0, 100% 100%, 0 50%); }
.srv-paso[data-paso="1"]  .srv-paso-tri { clip-path: polygon(0 0, 100% 50%, 0 100%); }
.srv-paso:focus-visible { outline: none; }
.srv-paso:hover .srv-paso-tri, .srv-paso:focus-visible .srv-paso-tri, .srv-paso:active .srv-paso-tri { background: #fff; }
.srv-paso[data-paso="-1"]:hover .srv-paso-tri, .srv-paso[data-paso="-1"]:focus-visible .srv-paso-tri { transform: translateX(-2px) scale(1.15); }
.srv-paso[data-paso="1"]:hover .srv-paso-tri,  .srv-paso[data-paso="1"]:focus-visible .srv-paso-tri  { transform: translateX(2px) scale(1.15); }
.srv-paso:active .srv-paso-tri { transform: scale(.85) !important; }
.srv-paso:disabled { opacity: .18; cursor: default; pointer-events: none; }
.srv-paso.tope { animation: srv-tope .45s ease; }
@keyframes srv-tope {
  0%, 100% { opacity: .18; }
  30%      { opacity: 1; }
}
.srv-panel.tope-ant { animation: srv-tope-panel .4s cubic-bezier(.3,.7,.4,1); --tope-x: 14px; }
.srv-panel.tope-sig { animation: srv-tope-panel .4s cubic-bezier(.3,.7,.4,1); --tope-x: -14px; }
@keyframes srv-tope-panel {
  35% { transform: translateX(var(--tope-x)); }
}
.srv-panel.soltando { transition: transform .3s cubic-bezier(.22,.68,.35,1); }

/* ═══════════════════════════════════════════════════════════════════════ */
/* ── Modales ──────────────────────────────────────────────────────────── */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(8,8,15,.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  align-items: center;
  justify-content: center;
  padding: var(--gap);
  z-index: 200;
}
.modal-overlay.is-open {
  display: flex;
  animation: overlay-in .22s ease both;
}
@media (max-width: 600px) {
  .modal-overlay:not(.modal-overlay-bare) { padding-left: 26px; padding-right: 26px; }
}
#modalContact { z-index: 250; }
#modalDatoHoy { z-index: 300; }

/* ── Modal "dato de hoy" ──────────────────────────────────────────────── */
.modal-overlay-bare .dato-hoy-modal-link { display: block; line-height: 0; }
.modal-overlay-bare img {
  display: block;
  max-width: 92vw;
  max-height: 92dvh;
  width: auto;
  height: auto;
}

.dato-hoy-cargando { display: none; }
#modalDatoHoy.cargando .dato-hoy-cargando {
  display: block;
  position: absolute;
  top: 50%; left: 50%;
  width: 64px; height: 64px;
  margin: -32px 0 0 -32px;
  animation: overlay-in .25s .15s ease both;
}
#modalDatoHoy.cargando .dato-hoy-modal-link { visibility: hidden; }
.dato-hoy-cargando svg {
  display: block; width: 100%; height: 100%;
  overflow: visible;
  animation: dato-girar 1.6s cubic-bezier(.6, 0, .4, 1) infinite;
}
.dato-hoy-cargando path { fill: var(--dato-acento, #fff); }
@keyframes dato-girar { to { transform: rotate(120deg); } }
@media (prefers-reduced-motion: reduce) {
  .dato-hoy-cargando svg { animation: bg-pulse 2s ease-in-out infinite; }
}

@keyframes overlay-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.modal-wrap {
  position: relative;
  width: 100%;
  max-width: 480px;
}

.modal-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--cyan);
  clip-path: var(--clip-lg-ring);
  transition: background .2s ease;
  pointer-events: none;
  z-index: 1;
}
.modal {
  background: #0c232b42;
  clip-path: var(--clip-lg);
  width: 100%;
  max-height: 92dvh;
  overflow-y: auto;
  box-shadow: 0 24px 60px rgba(0,0,0,.6);
  transform-origin: center top;
  animation: modal-in .32s cubic-bezier(.22,.68,.35,1) backwards;
}
@keyframes modal-in {
  from { opacity: 0; transform: perspective(1200px) rotateX(-32deg); }
  to   { opacity: 1; transform: perspective(1200px) rotateX(0deg);   }
}

.modal-header {
  padding: 1.2rem 1.5rem 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1rem;
}
.modal-header .logo-trigger { width: 540px; max-width: 64%; }
#modalAbout .modal-body { margin-top: -1rem; }

.modal-close {
  position: absolute;
  top: -10px;
  right: -19px;
  border: none;
  padding: 0;
  background: var(--cyan);
  isolation: isolate;
  cursor: pointer;
  display: block;
  transition: transform .2s ease, background .2s ease;
  z-index: 1;
}
.modal-close:hover,
.modal-close:focus-visible {
  background: #fff;
  transform: translateY(-3px) scale(1.2);
  outline: none;
}
.modal-close:active {
  transform: translateY(3px) scale(0.8);
}

.modal-lang-toggle {
  position: absolute;
  bottom: -10px;
  left: -19px;
  border: none;
  padding: 0;
  background: var(--cyan);
  isolation: isolate;
  cursor: pointer;
  display: block;
  text-decoration: none;
  transition: transform .2s ease, background .2s ease;
  z-index: 1;
}
.modal-lang-toggle:hover,
.modal-lang-toggle:focus-visible {
  background: #fff;
  transform: translateY(-3px) scale(1.2);
  outline: none;
}
.modal-lang-toggle:active {
  transform: translateY(3px) scale(0.8);
}
.modal-wrap:has(.modal-close:hover, .modal-close:focus-visible,
                 .modal-lang-toggle:hover, .modal-lang-toggle:focus-visible,
                 .btn-primary:hover, .btn-primary:focus-visible)::before {
  background: #fff;
}

.modal-body {
  padding: 1.1rem 1.35rem 0 1.35rem;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--text);
}
#modalContact .modal-body { padding-bottom: 0; }
#modalCompra .modal-body { padding-bottom: 1.35rem; }
#modalCompra .modal-body h2 {
  margin: 0 0 .75rem;
  color: var(--cyan);
  font-size: 1.1rem;
  letter-spacing: .02em;
}
.modal-body p + p,
.modal-body .plegable-interior > p:first-child { margin-top: .6em; }
.modal-body p em,
.modal-body p a:not(.about-cv) {
  color: var(--cyan);
  font-style: normal;
  font-weight: 700;
}
.modal-body p a:not(.about-cv) {
  text-decoration: none;
  transition: color .2s ease;
}
.modal-body p a:not(.about-cv):hover,
.modal-body p a:not(.about-cv):focus-visible,
.modal-body p a:not(.about-cv):active {
  color: #fff;
  outline: none;
}
.modal-body p a:not(.about-cv) em { color: inherit; }
.modal { scrollbar-width: thin; scrollbar-color: var(--cyan) transparent; }
.modal::-webkit-scrollbar       { width: 10px; }
.modal::-webkit-scrollbar-thumb {
  background: var(--cyan);
  background-clip: content-box;
  border-style: solid;
  border-color: transparent;
  border-width: 3px 0 3px 8px;
  border-radius: 999px;
}
.modal::-webkit-scrollbar-track { background: transparent; }

/* ── Modal "Acerca de": nombre clicable con tooltip triangular ────────── */
.about-name-trigger {
  position: relative;
  color: var(--cyan);
  font-weight: 700;
  cursor: pointer;
}
.about-name-trigger:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}
.about-photo-tip {
  position: absolute;
  left: 50%;
  bottom: 100%;
  margin-bottom: 8px;
  pointer-events: none;
  opacity: 0;
  transform-origin: bottom center;
  transform: translateX(-50%) perspective(900px) rotateX(-84deg);
  transition: opacity .6s cubic-bezier(.22,.68,.35,1),
              transform .6s cubic-bezier(.22,.68,.35,1);
  z-index: 6;
}
.about-name-trigger:hover .about-photo-tip,
.about-name-trigger.is-active .about-photo-tip {
  opacity: 1;
  transform: translateX(-50%) perspective(900px) rotateX(0deg);
}
.about-photo-tip-border {
  position: absolute;
  z-index: 1;
  background: var(--cyan);
}
.about-photo-tip-img {
  position: relative;
  z-index: 2;
  display: block;
  object-fit: cover;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.5));
}

.about-cv-slot {
  position: relative;
  display: inline-block;
  height: 0;
  margin: 0 -0.5rem;
  vertical-align: baseline;
}
.about-cv {
  position: absolute;
  left: 0;
  top: -.5em;
  transform: translateY(-50%);
  background: var(--cyan);
  isolation: isolate;
  cursor: pointer;
  text-decoration: none;
  transition: transform .2s ease, background .2s ease;
}
.about-cv:hover,
.about-cv:focus-visible {
  background: #fff;
  transform: translateY(calc(-50% - 3px)) scale(1.2);
  outline: none;
}
.about-cv:active {
  transform: translateY(calc(-50% + 3px)) scale(0.8);
}

.about-firma-wrap {
  display: flex;
  justify-content: flex-end;
}
.about-firma {
  margin: 0 2rem 0 0;
  width: 128px;
  height: 128px;
}
/* ── Etiqueta de sección + chips de temas ─────────────────────────────── */
.modal-body .about-label {
  display: flex;
  align-items: center;
  gap: .6em;
  margin-top: 1.4rem;
  color: var(--muted);
  font-size: calc(var(--fs-sm) * .85);
  text-transform: uppercase;
  letter-spacing: .18em;
}
.about-label::before {
  content: "";
  flex: 0 0 auto;
  width: 11px;
  height: 9px;
  background: var(--cyan);
  clip-path: var(--tri-bullet, polygon(50% 100%, 100% 0, 0 0));
  transition: transform .25s ease, background .2s ease;
}

/* ── Secciones plegables ──────────────────────────────────────────────── */
.about-label[role="button"] { cursor: pointer; transition: color .2s ease; }
.about-label[role="button"]:hover,
.about-label[role="button"]:focus-visible { color: #fff; outline: none; }
.about-label[role="button"]:hover::before,
.about-label[role="button"]:focus-visible::before { background: #fff; }
.about-label[aria-expanded="false"]::before { transform: rotate(-90deg); }
.plegable {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows .3s cubic-bezier(.22,.68,.35,1);
}
.plegable.plegado { grid-template-rows: 0fr; }
.plegable-interior { min-height: 0; }
.plegable.plegado > .plegable-interior,
.plegable.animando > .plegable-interior { overflow: hidden; }

.topics {
  --sesgo: 7px;
  --topics-gap: 4px;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  row-gap: var(--topics-gap);
  column-gap: 0;
  margin: .5rem calc((var(--sesgo) - var(--topics-gap)) / 2) 0;
  padding: 0;
}
.topic {
  margin-inline: calc((var(--topics-gap) - var(--sesgo)) / 2);
  display: inline-flex;
  align-items: center;
  padding: .3rem calc(.62rem + var(--sesgo));
  font-size: calc(var(--fs-sm) * .88);
  color: var(--text);
  background: rgba(255,255,255,.05);
  transition: background .2s, color .2s;
}
.topic:nth-child(odd) {
  clip-path: polygon(var(--sesgo) 0, calc(100% - var(--sesgo)) 0, 100% 100%, 0 100%);
}
.topic:nth-child(even) {
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--sesgo)) 100%, var(--sesgo) 100%);
}
.topic:nth-child(6n+1) { --tone: var(--cyan);   }
.topic:nth-child(6n+2) { --tone: var(--green);  }
.topic:nth-child(6n+3) { --tone: var(--orange); }
.topic:nth-child(6n+4) { --tone: var(--pink);   }
.topic:nth-child(6n+5) { --tone: var(--blue);   }
.topic:nth-child(6n)   { --tone: var(--yellow); }
.topic:hover {
  background: var(--tone, var(--cyan));
  color: #06060f;
}

/* ── Botones genéricos ────────────────────────────────────────────────── */
.btn {
  --sesgo: 8px;
  font-family: var(--font);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: .05em;
  padding: .5rem 1.1rem;
  border: none;
  clip-path: polygon(var(--sesgo) 0, calc(100% - var(--sesgo)) 0, 100% 100%, 0 100%);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .35em;
  transition: background .2s, color .2s;
}
.btn-primary {
  background: var(--cyan);
  color: #06060f;
  margin-left: auto;
}
.btn-primary:hover,
.btn-primary:focus-visible,
.btn-primary:active {
  background: #fff;
  outline: none;
}
.btn-primary:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.form-submit-row {
  display: flex;
  justify-content: flex-end;
  margin: 0 1rem 0 0;
}

/* ── Formulario de contacto ───────────────────────────────────────────── */
.field {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  margin-bottom: .9rem;
}
.field label {
  font-size: var(--fs-sm);
  color: var(--muted);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.field input,
.field textarea {
  user-select: text;
  font-family: var(--font);
  font-size: var(--fs-sm);
  background: rgba(8,8,15,.6);
  border: none;
  color: var(--text);
  padding: .5rem .75rem;
  width: 100%;
  transition: background .2s, box-shadow .2s;
  resize: vertical;
}
.field input:focus,
.field textarea:focus {
  outline: none;
  background: color-mix(in srgb, var(--cyan) 8%, transparent);
  box-shadow: inset 0 0 0 2px var(--cyan);
}
.field input::placeholder,
.field textarea::placeholder { color: var(--muted); }
.field textarea { min-height: 90px; }

.captcha-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: .9rem;
}
.captcha-row label {
  font-size: var(--fs-sm);
  color: var(--muted);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.captcha-row input {
  font-family: var(--font);
  font-size: var(--fs-sm);
  background: rgba(8,8,15,.6);
  border: none;
  color: var(--text);
  padding: .5rem .75rem;
  width: 80px;
  transition: background .2s, box-shadow .2s;
  -moz-appearance: textfield;
}
.captcha-row input::-webkit-outer-spin-button,
.captcha-row input::-webkit-inner-spin-button { -webkit-appearance: none; }
.captcha-row input:focus {
  outline: none;
  background: color-mix(in srgb, var(--cyan) 8%, transparent);
  box-shadow: inset 0 0 0 2px var(--cyan);
}

.form-msg {
  font-size: var(--fs-sm);
  padding: .5rem .75rem;
  margin-bottom: .9rem;
  display: none;
}
.form-msg.ok    { display: block; background: rgba(109,217,0,.14); color: var(--green); }
.form-msg.error { display: block; background: rgba(246,0,106,.14); color: var(--pink);  }

.field.invalid input,
.field.invalid textarea { box-shadow: inset 0 0 0 2px var(--pink); background: rgba(246,0,106,.08); }
.field-error {
  font-size: .72rem;
  color: var(--pink);
  min-height: 1em;
  letter-spacing: .02em;
}

/* ── Modal Perigami+ ──────────────────────────────────────────────────── */
.compra-lista {
  list-style: none;
  margin: .9rem 0 1.1rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.compra-opcion {
  --anillo: transparent;
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .3rem .75rem;
  padding: .6rem .85rem;
  background: rgba(255,255,255,.04);
  clip-path: var(--clip-lg);
  cursor: pointer;
  transition: background .2s ease;
}
.compra-opcion::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--anillo);
  clip-path: var(--clip-lg-ring);
  pointer-events: none;
  transition: background .2s ease;
}
label.compra-opcion:hover { --anillo: rgba(255,255,255,.3); background: rgba(255,255,255,.07); }
.compra-fila:has(.compra-radio:checked) .compra-opcion {
  --anillo: var(--cyan);
  background: color-mix(in srgb, var(--cyan) 15%, transparent);
}
.compra-fila:has(.compra-radio:focus-visible) .compra-opcion { --anillo: #fff; }
.compra-radio {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
.compra-icono { display: block; width: 26px; height: 26px; }
.compra-texto { display: flex; flex-direction: column; gap: .12rem; min-width: 0; }
.compra-nombre { color: #fff; font-size: .92rem; font-weight: 700; }
.compra-desc { color: var(--muted); font-size: .74rem; line-height: 1.35; }
.compra-precio {
  color: #fff;
  font-size: .9rem;
  font-weight: 700;
  text-align: right;
}
.compra-precio-cop { white-space: nowrap; }
.compra-precio small {
  color: var(--muted);
  font-size: .68rem;
  font-weight: 400;
  white-space: nowrap;
}
.compra-estado { color: var(--green); font-size: .78rem; white-space: nowrap; }
.compra-fila.is-tenida .compra-opcion { cursor: default; opacity: .6; }

.compra-opcion--combo {
  --anillo: color-mix(in srgb, var(--cyan) 55%, transparent);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: .75rem;
  padding: 1.35rem 1rem .95rem;
  background: color-mix(in srgb, var(--cyan) 8%, transparent);
}
.compra-chip {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 1.4rem;
  padding: .2rem .8rem .24rem;
  background: var(--cyan);
  color: #06060f;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  clip-path: polygon(0 0, 100% 0, calc(100% - 6px) 100%, 6px 100%);
}
.compra-combo-cabeza {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .75rem;
}
.compra-icono--mas { width: 30px; height: 30px; }
.compra-opcion--combo .compra-nombre { font-size: 1.15rem; }
.compra-precio--grande { color: var(--cyan); font-size: 1.3rem; }
.compra-combo-pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .6rem 1rem;
}
.compra-tira { display: flex; }
.compra-tri {
  position: relative;
  flex: 0 0 auto;
  width: 40px;
  height: 34.64px;
  background: rgba(255,255,255,.14);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  transition: background .25s ease;
}
.compra-tri:nth-child(even) { clip-path: polygon(0 0, 100% 0, 50% 100%); }
.compra-tri + .compra-tri { margin-left: -19px; }
.compra-tri img {
  position: absolute;
  left: 50%;
  top: 64%;
  width: 16px;
  height: 16px;
  transform: translate(-50%, -50%);
  transition: filter .25s ease;
}
.compra-tri:nth-child(even) img { top: 36%; }
.compra-fila:has(.compra-radio:checked) .compra-tri { background: var(--cyan); }
.compra-fila:has(.compra-radio:checked) .compra-tri img { filter: brightness(0); }
.compra-ahorro { color: var(--green); font-size: .8rem; font-weight: 700; white-space: nowrap; }
.compra-ahorro s { margin-right: .4em; color: var(--muted); font-weight: 400; }
.compra-subtitulo {
  display: flex;
  align-items: center;
  gap: .6em;
  margin: .75rem 0 .2rem;
  color: var(--muted);
  font-size: calc(var(--fs-sm) * .85);
  letter-spacing: .18em;
  text-transform: uppercase;
}
.compra-subtitulo::before {
  content: "";
  flex: 0 0 auto;
  width: 11px;
  height: 9px;
  background: var(--cyan);
  clip-path: var(--tri-bullet, polygon(50% 100%, 100% 0, 0 0));
}

.compra-aviso {
  font-size: .8rem;
  color: var(--pink);
  border-left: 2px solid currentColor;
  padding-left: .5rem;
  margin: 0 0 .75rem;
}
.compra-aviso[hidden] { display: none; }

.compra-submit-row {
  display: flex;
  justify-content: flex-end;
}

.compra-enlace {
  display: block;
  width: 100%;
  background: none;
  border: none;
  padding: .5rem 0 0;
  margin: 0;
  font-family: var(--font);
  font-size: .78rem;
  color: var(--muted);
  text-decoration: underline;
  text-align: right;
  cursor: pointer;
}
.compra-enlace:hover, .compra-enlace:focus-visible { color: var(--cyan); }

.compra-resultado { text-align: center; }
.compra-resultado-icono { width: 44px; height: 44px; margin: 0 auto .75rem; display: block; }
#iconoOk.compra-resultado-icono { color: var(--cyan); }
#iconoError.compra-resultado-icono { color: var(--pink); }
#iconoEspera.compra-resultado-icono { color: var(--muted); animation: compra-girar 1.4s linear infinite; }
@keyframes compra-girar { to { transform: rotate(360deg); } }
.compra-resultado h3 { margin: 0 0 .5rem; color: var(--text); }
.compra-resultado p { color: var(--muted); }

/* ── Texto sólo para lectores de pantalla ─────────────────────────────── */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ── Tarjetas: carga y entrada ────────────────────────────────────────── */
.project-card.loading {
  background-color: color-mix(in srgb, var(--paper, var(--cyan)) 30%, var(--surface));
}

@keyframes card-unfold {
  from { opacity: 0; transform: rotateX(-84deg); }
  to   { opacity: 1; transform: rotateX(0deg);   }
}
.project-item.enter {
  opacity: 0;
  transform-origin: bottom center;
  animation: card-unfold .6s cubic-bezier(.22,.68,.35,1) forwards;
  animation-delay: var(--delay, 0ms);
  will-change: transform, opacity;
}

/* ── Ventanas bajas ───────────────────────────────────────────────────── */
@media (max-height: 700px) {
  .modal-header { padding-top: .7rem; }
  #modalAbout .modal-body { padding-top: .5rem; }
  .modal-body p + p { margin-top: .4em; }
  .modal-body .about-label { margin-top: .6rem; }
  .about-firma { width: 56px; height: 56px; margin-right: 1.5rem; }
}

/* ── Movimiento reducido ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  body::after { animation: none !important; }
  .logo-trigger:hover { animation: none !important; }
  .logo-svg .borde { transition: none !important; }
  .project-item, .project-card, .hover-ring, .util-tri, .plus-trigger .cls-1, .tiron-recarga, .tiron-recarga__tri { transition: none !important; }
  .project-card.flash::after { animation: none !important; }
  .new-badge { animation: none !important; opacity: .85; }
  .modal, .modal-overlay.is-open { animation: none !important; }
  .topic, .about-cv, .modal-lang-toggle, .about-photo-tip { transition: none !important; }
  .project-item.enter { opacity: 1 !important; animation: none !important; }
  .util-tri.enter { opacity: 1 !important; animation: none !important; }
  html:not(.no-js) #logoHeader { opacity: 1 !important; }
  html:not(.no-js) .util-strip { opacity: 1 !important; }
  html:not(.no-js) .ir-servicios { opacity: 1 !important; }
  .ir-servicios { animation: none !important; }
  .servicios :is(.servicios-cabeza > *, .srv-tri, .srv-etq),
  .srv-panel, .srv-panel-tri { animation: none !important; opacity: 1 !important; }
  .srv-placa, .srv-diapo,
  .srv-paso-tri, .srv-rel-placa, .plegable, .about-label::before, .srv-tabla caption::before { transition: none !important; }
  .srv-rel-recorte::after { animation: none !important; }
  .modal-overlay.is-open :is(.form-submit-row, .srv-panel-pie) .btn { animation: none !important; }
  .srv-recorte::after { animation: none !important; }
  * { scroll-behavior: auto !important; }
}