/* ============================================================
   Fluir Negocios: sistema de diseño compartido de las páginas internas.
   Mismos tokens y piezas que la home (index.html tiene su copia inline).
   ============================================================ */
:root {
  --tinta: #0D1524;
  --tinta-2: #2A3344;
  --grafito: #5A6475;
  --papel: #F3F5F8;
  --papel-2: #E6EAF0;
  --blanco: #FFFFFF;
  --azul: #1257C7;
  --azul-claro: #9CC3FF;
  --resaltador: #FFD64A;
  --linea: #D5DBE4;

  --f-display: "Archivo", "Arial Black", Arial, sans-serif;
  --f-texto: "Chivo", "Helvetica Neue", Arial, sans-serif;
  --f-dato: "Chivo Mono", ui-monospace, Consolas, monospace;

  --gutter: clamp(16px, 4vw, 48px);
  --ancho: 1240px;
  --r-capsula: 999px;
  --r-panel: 28px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--papel); color: var(--tinta);
  font-family: var(--f-texto); font-size: clamp(16px, .6vw + 13px, 18px); line-height: 1.55;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--azul); outline-offset: 3px; border-radius: 8px; }
.envoltura { width: 100%; max-width: calc(var(--ancho) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }

h1, h2, h3 { font-family: var(--f-display); font-stretch: 115%; line-height: 1; letter-spacing: -0.025em; margin: 0; text-wrap: balance; }
h2 { font-size: clamp(2rem, 4.2vw, 3.6rem); font-weight: 850; }
h3 { font-size: clamp(1.2rem, 1.6vw, 1.5rem); font-weight: 750; line-height: 1.15; }
p { margin: 0; }
.mono { font-family: var(--f-dato); font-size: .78rem; letter-spacing: .03em; }

/* ---------- Vidrio líquido: solo en la capa que flota ---------- */
.vidrio {
  position: relative; isolation: isolate; color: #fff;
  background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.07));
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  backdrop-filter: blur(16px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    inset 0 -1px 0 rgba(255,255,255,.14),
    inset 0 0 0 1px rgba(255,255,255,.16),
    0 14px 36px -14px rgba(5,10,22,.55);
}
.vidrio::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  background: radial-gradient(140px 70px at var(--bx, 28%) 0%, rgba(255,255,255,.5), transparent 70%);
  opacity: .5;
}
.vidrio.claro {
  color: var(--tinta);
  background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.6));
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(13,21,36,.08), 0 16px 36px -16px rgba(13,21,36,.4);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .vidrio { background: rgba(20,28,45,.88); }
  .vidrio.claro { background: rgba(255,255,255,.97); }
}
@media (prefers-reduced-transparency: reduce) {
  .vidrio { background: rgba(20,28,45,.95); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .vidrio.claro { background: #fff; }
}

/* ---------- Botones ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em; min-height: 52px; padding: 0 1.45em;
  border-radius: var(--r-capsula); border: 0; cursor: pointer; text-decoration: none;
  font: 600 1rem/1 var(--f-texto);
  transition: transform .3s cubic-bezier(.2,.9,.3,1.4), background-color .2s;
}
.boton:active { transform: scale(.95); }
.boton-azul { background: var(--azul); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 12px 26px -12px rgba(18,87,199,.9); }
.boton-azul:hover { background: #0F4CB0; }
.boton-tinta { background: var(--tinta); color: #fff; }
.boton small { font: 400 .75rem/1 var(--f-dato); opacity: .75; }
.acciones { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Barra flotante ---------- */
.barra {
  position: fixed; z-index: 50; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 14px); transform: translateX(-50%);
  width: min(calc(100% - 24px), 980px); display: flex; align-items: center; gap: 10px;
  padding: 7px 7px 7px 20px; border-radius: var(--r-capsula);
  transition: width .5s cubic-bezier(.2,.8,.2,1), color .3s, background .3s;
}
.barra .logo img { height: 30px; width: auto; }
.barra nav { display: flex; margin-left: auto; }
.barra nav a { text-decoration: none; font-size: .93rem; font-weight: 500; padding: 10px 15px; border-radius: var(--r-capsula); }
.barra nav a:hover { background: rgba(255,255,255,.16); }
.barra.claro nav a:hover { background: rgba(13,21,36,.06); }
.barra .boton { min-height: 44px; padding: 0 1.2em; font-size: .93rem; }
.barra.compacta { width: min(calc(100% - 24px), 700px); }

.dock { display: none; }
@media (max-width: 820px) {
  .barra nav, .barra .boton { display: none; }
  .barra, .barra.compacta { width: auto; left: 14px; transform: none; padding: 10px 18px; }
  .dock {
    display: flex; position: fixed; z-index: 50; left: 12px; right: 12px; bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
    padding: 6px; gap: 6px; border-radius: var(--r-capsula);
  }
  .dock .boton { flex: 1; min-height: 50px; padding: 0 .8em; }
  .dock .boton:not(.boton-azul) { background: transparent; color: inherit; }
}

/* ---------- Portada con foto ---------- */
.portada { position: relative; min-height: min(80vh, 760px); display: grid; align-content: end; color: #fff; background: #0b1220; overflow: hidden; }
.portada > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 35%; z-index: 0; }
.portada::before { content: ""; position: absolute; inset: 0; z-index: 1; background:
  linear-gradient(90deg, rgba(7,12,24,.94) 0%, rgba(7,12,24,.84) 34%, rgba(7,12,24,.4) 62%, rgba(7,12,24,.12) 85%),
  linear-gradient(0deg, rgba(7,12,24,.92) 0%, rgba(7,12,24,0) 50%); }
.portada .envoltura { position: relative; z-index: 2; padding-block: 150px 48px; display: grid; gap: 24px; }
.portada .envoltura > * { min-width: 0; }
.portada .sigla { font-family: var(--f-dato); font-size: .82rem; letter-spacing: .08em; color: var(--azul-claro); }
.portada h1 { font-size: clamp(2.5rem, 6.2vw, 5.6rem); font-weight: 900; font-stretch: 120%; letter-spacing: -0.04em; line-height: .95; max-width: 14ch; }
.portada h1 em { font-style: italic; color: var(--azul-claro); }
.portada .bajada { max-width: 50ch; font-size: clamp(1.05rem, 1.3vw, 1.22rem); color: rgba(255,255,255,.88); }
.ficha { display: flex; flex-wrap: wrap; gap: 8px 26px; padding: 16px 22px; border-radius: 22px; width: fit-content; max-width: 100%; }
.ficha div { display: grid; gap: 2px; }
.ficha .mono { opacity: .72; font-size: .68rem; }
.ficha strong { font-weight: 600; font-size: .98rem; }
@media (max-width: 820px) {
  .portada::before { background: linear-gradient(180deg, rgba(7,12,24,.62) 0%, rgba(7,12,24,.76) 45%, rgba(7,12,24,.92) 100%); }
  .portada h1, .portada .bajada { text-shadow: 0 2px 18px rgba(7,12,24,.55); }
  .portada .envoltura { padding-top: 120px; }
}

/* ---------- Secciones ---------- */
section { scroll-margin-top: 90px; }
.bloque { padding-block: clamp(72px, 10vw, 130px); }
.bloque.blanco { background: var(--blanco); }
.bloque.oscuro { background: var(--tinta); color: #fff; }
.cabeza { display: grid; gap: 14px; max-width: 760px; margin-bottom: clamp(32px, 4.5vw, 56px); }
.cabeza p { color: var(--tinta-2); font-size: 1.08rem; max-width: 52ch; }
.oscuro .cabeza p { color: rgba(255,255,255,.8); }

/* Lista de dos columnas con título y texto corto */
.lista { display: grid; gap: 0 40px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); border-top: 1px solid var(--linea); }
.lista > div { display: grid; gap: 6px; padding-block: 22px; border-bottom: 1px solid var(--linea); }
.lista h3 { font-stretch: 105%; font-size: clamp(1.1rem, 1.4vw, 1.3rem); }
.lista p { color: var(--tinta-2); font-size: .98rem; }
.oscuro .lista, .oscuro .lista > div { border-color: rgba(255,255,255,.14); }
.oscuro .lista p { color: rgba(255,255,255,.78); }

/* Tramo de semanas: el ancho de cada fase es su duración */
.tramo { display: grid; grid-template-columns: repeat(var(--semanas, 8), 1fr); gap: 6px; }
.tramo > div { background: var(--blanco); border: 1px solid var(--linea); border-radius: 20px; padding: 20px; display: grid; gap: 8px; align-content: start; grid-column: span var(--dura, 1); }
.tramo > div.final { background: var(--azul); border-color: var(--azul); color: #fff; }
.tramo .mono { color: var(--grafito); }
.tramo .final .mono { color: rgba(255,255,255,.75); }
.tramo p { font-size: .95rem; opacity: .88; }
@media (max-width: 900px) { .tramo { grid-template-columns: 1fr; } .tramo > div { grid-column: auto; } }

/* Datos en fila */
.datos { display: flex; flex-wrap: wrap; gap: 14px 36px; }
.datos div { display: grid; }
.datos .mono { color: var(--grafito); }
.oscuro .datos .mono { color: rgba(255,255,255,.65); }
.datos strong { font-family: var(--f-display); font-stretch: 112%; font-size: clamp(1.2rem, 1.8vw, 1.5rem); font-weight: 800; }

/* Tarjetas de oferta (planes, servicios) */
.ofertas { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); align-items: stretch; }
.oferta { border-radius: var(--r-panel); padding: clamp(24px, 3vw, 34px); display: flex; flex-direction: column; gap: 16px; background: var(--papel); }
.blanco .oferta { background: var(--papel); }
.oferta.destacada { background: var(--tinta); color: #fff; }
.oferta .mono { color: var(--azul); letter-spacing: .08em; }
.oferta.destacada .mono { color: var(--azul-claro); }
.oferta p { color: var(--tinta-2); font-size: .98rem; }
.oferta.destacada p { color: rgba(255,255,255,.8); }
.oferta ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; font-size: .96rem; }
.oferta li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: baseline; }
.oferta li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--azul); transform: translateY(-2px); }
.oferta.destacada li::before { background: var(--azul-claro); }
.oferta .precio { font-family: var(--f-display); font-stretch: 110%; font-weight: 800; font-size: 1.25rem; }
.oferta .precio small { font-family: var(--f-texto); font-weight: 400; font-size: .85rem; opacity: .75; }
.oferta .boton { margin-top: auto; align-self: flex-start; }

/* Comparación antes / después */
.comparar { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.comparar > div { border-radius: var(--r-panel); padding: clamp(24px, 3vw, 34px); display: grid; gap: 14px; align-content: start; }
.comparar .antes { background: var(--papel-2); }
.comparar .despues { background: var(--tinta); color: #fff; }
.comparar ul { margin: 0; padding-left: 1.1em; display: grid; gap: 10px; }
.comparar .antes li { color: var(--tinta-2); }

/* Videos en carrusel */
.videos { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 20px) / 2); gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.videos::-webkit-scrollbar { display: none; }
@media (min-width: 980px) { .videos { grid-auto-columns: calc((100% - 40px) / 3); } }
@media (max-width: 640px) {
  .videos { grid-auto-columns: 78%; gap: 12px; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
}
.video { position: relative; margin: 0; border-radius: var(--r-panel); overflow: hidden; aspect-ratio: 9 / 14; background: var(--tinta); scroll-snap-align: start; }
.video video { width: 100%; height: 100%; object-fit: cover; }
.video .play { position: absolute; top: 14px; right: 14px; width: 54px; height: 54px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; }
.video .play svg { width: 18px; height: 18px; fill: #fff; margin-left: 3px; }
.video figcaption { position: absolute; left: 10px; right: 10px; bottom: 10px; border-radius: 22px; padding: 16px 18px; display: grid; gap: 8px; }
.video blockquote { margin: 0; font-family: var(--f-display); font-stretch: 105%; font-weight: 600; font-size: clamp(1.02rem, 1.3vw, 1.18rem); line-height: 1.25; }
.video cite { font-style: normal; font-family: var(--f-dato); font-size: .72rem; opacity: .85; }

/* Preguntas frecuentes */
.faq .envoltura { display: grid; gap: 36px; }
@media (min-width: 980px) { .faq .envoltura { grid-template-columns: 4fr 7fr; } }
.faq details { border-bottom: 1px solid var(--linea); }
.faq details:first-child { border-top: 1px solid var(--linea); }
.faq summary { list-style: none; cursor: pointer; position: relative; padding: 22px 44px 22px 0; font-family: var(--f-display); font-stretch: 105%; font-weight: 650; font-size: clamp(1.08rem, 1.4vw, 1.25rem); line-height: 1.3; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 6px; top: 14px; font: 300 2rem/1 var(--f-texto); color: var(--azul); transition: transform .3s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding-bottom: 22px; color: var(--tinta-2); max-width: 60ch; }

/* Cierre y pie */
.cierre { background: var(--tinta); color: #fff; }
.cierre .envoltura { padding-block: clamp(80px, 11vw, 140px) clamp(36px, 4vw, 52px); display: grid; gap: 22px; }
.cierre h2 { max-width: 16ch; }
.cierre .bajada { max-width: 46ch; color: rgba(255,255,255,.84); font-size: 1.08rem; }
.contacto { display: flex; flex-wrap: wrap; gap: 10px; }
.contacto a { border-radius: 20px; padding: 14px 20px; display: grid; gap: 2px; text-decoration: none; }
.contacto .mono { font-size: .68rem; opacity: .75; }
.contacto strong { font-weight: 600; }
.pie { border-top: 1px solid rgba(255,255,255,.14); margin-top: 36px; padding-top: 22px; display: flex; flex-wrap: wrap; gap: 10px 28px; justify-content: space-between; font-size: .85rem; color: rgba(255,255,255,.6); }
.pie a { color: rgba(255,255,255,.85); text-underline-offset: 3px; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; } }

/* ---------- Portada sin foto de fondo (Sistemas, C·D·E) ---------- */
.portada.sin-foto { background: radial-gradient(1200px 500px at 85% 0%, #14305f 0%, #0b1220 60%); min-height: auto; }
.portada.sin-foto::before { display: none; }
.portada.sin-foto .envoltura { grid-template-columns: 1fr; align-items: center; }
@media (min-width: 1000px) { .portada.sin-foto .envoltura { grid-template-columns: 7fr 5fr; gap: 48px; } }
/* La foto como tarjeta, cerca de su tamaño real: no se estira ni se pixela */
.foto-tarjeta { width: 100%; max-width: 620px; height: auto; aspect-ratio: 894 / 682; object-fit: cover; border-radius: var(--r-panel); align-self: center; justify-self: center; box-shadow: 0 30px 60px -30px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.08); }
.portada.sin-foto h1 { font-size: clamp(2.5rem, 5vw, 4.4rem); max-width: 13ch; }

/* La tarjeta del tablero (Sistemas) también va centrada respecto del texto */
.portada.sin-foto .tablero { align-self: center; }

/* ============================================================
   Movimiento estilo vidrio líquido (iOS 26)
   Regla: la opacidad y el blur se animan en el texto o en el propio
   elemento de vidrio, nunca en un contenedor de vidrio (si el padre
   se anima, el desenfoque del vidrio se apaga mientras dura).
   ============================================================ */
@keyframes fn-materializar { from { opacity: 0; transform: translateY(26px); filter: blur(12px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes fn-vidrio-entra { 0% { opacity: 0; transform: translateY(18px) scale(.92); } 70% { opacity: 1; transform: translateY(-2px) scale(1.012); } 100% { opacity: 1; transform: none; } }
@keyframes fn-acercar { from { transform: scale(1.09); } to { transform: scale(1); } }
@keyframes fn-crecer { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes fn-latido { 0% { transform: scale(.975); } 55% { transform: scale(1.012); } 100% { transform: none; } }
@keyframes fn-enfocar { from { opacity: .2; filter: blur(6px); } to { opacity: 1; filter: none; } }

.portada > img { animation: fn-acercar 2s cubic-bezier(.2,.8,.2,1) backwards; }
.portada .sigla, .portada h1, .portada .bajada, .clientes > .mono { animation: fn-materializar .95s cubic-bezier(.2,.8,.2,1) backwards; }
.portada .acciones > *, .portada .ficha, .portada .logos, .portada .tablero, .portada .foto-tarjeta { animation: fn-vidrio-entra .9s cubic-bezier(.2,.8,.2,1) backwards; }
.portada .sigla { animation-delay: .05s; }
.portada h1 { animation-delay: .12s; }
.portada .bajada { animation-delay: .24s; }
.portada .acciones > :nth-child(1) { animation-delay: .34s; }
.portada .acciones > :nth-child(2) { animation-delay: .42s; }
.portada .ficha, .clientes > .mono { animation-delay: .5s; }
.portada .logos { animation-delay: .58s; }
.portada .tablero, .portada .foto-tarjeta { animation-delay: .3s; }
.tablero .barras i { transform-origin: bottom; animation: fn-crecer 1.1s cubic-bezier(.2,.8,.2,1) backwards; }
.tablero .barras i:nth-child(1) { animation-delay: .7s; }
.tablero .barras i:nth-child(2) { animation-delay: .78s; }
.tablero .barras i:nth-child(3) { animation-delay: .86s; }
.tablero .barras i:nth-child(4) { animation-delay: .94s; }
.tablero .barras i:nth-child(5) { animation-delay: 1.02s; }
.tablero .barras i:nth-child(6) { animation-delay: 1.1s; }

/* Aparición al bajar: la clase la pone el script solo a lo que está abajo del pliegue */
.fn-revela { opacity: 0; transform: translateY(30px) scale(.985); transition: opacity .8s cubic-bezier(.2,.8,.2,1), transform .95s cubic-bezier(.2,.8,.2,1), filter .8s; }
h2.fn-revela { filter: blur(10px); }
.fn-revela.fn-visto { opacity: 1; transform: none; filter: none; }

/* Barra superior: se compacta con un leve rebote */
.barra { transition: width .6s cubic-bezier(.34,1.35,.64,1), color .3s, background .3s; }

/* Barra inferior del teléfono: se achica al bajar y vuelve al subir */
@media (max-width: 820px) {
  .dock { transition: left .55s cubic-bezier(.34,1.3,.64,1), right .55s cubic-bezier(.34,1.3,.64,1), padding .4s; }
  .dock .boton { transition: flex-basis .45s cubic-bezier(.34,1.2,.64,1), padding .45s, opacity .25s, min-height .4s, transform .3s cubic-bezier(.2,.9,.3,1.4); }
  .dock.mini { left: 26%; right: 26%; padding: 4px; gap: 0; }
  .dock.mini .boton { min-height: 44px; }
  .dock.mini .boton:not(.boton-azul) { flex: 0 0 0; padding: 0; opacity: 0; overflow: hidden; pointer-events: none; }
}

/* Resultado del test: pulso al cambiar de diagnóstico */
.techo.fn-cambio { animation: fn-latido .5s cubic-bezier(.34,1.56,.64,1); }
.techo.fn-cambio h3 { animation: fn-enfocar .45s ease-out; }

/* Botones de vidrio: se levantan apenas al pasar el mouse */
@media (hover: hover) {
  .boton { will-change: transform; }
  .boton:hover { transform: translateY(-2px); }
  .boton:active { transform: scale(.94); }
  .vidrio:hover::after { opacity: .85; }
}

@media (prefers-reduced-motion: reduce) {
  .portada > img, .portada .sigla, .portada h1, .portada .bajada, .clientes > .mono,
  .portada .acciones > *, .portada .ficha, .portada .logos, .portada .tablero, .portada .foto-tarjeta,
  .tablero .barras i, .techo.fn-cambio, .techo.fn-cambio h3 { animation: none !important; }
  .fn-revela { opacity: 1 !important; transform: none !important; filter: none !important; }
}

/* Lugar para la barra inferior del teléfono: adentro de la sección oscura del final,
   no como franja clara debajo. Va al final para ganarle al padding del cierre. */
@media (max-width: 820px) { .cierre .envoltura { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 104px); } }

/* ============================================================
   Vidrio líquido v2: más transparente y con física de iOS 26
   (va al final: reemplaza la receta anterior de vidrio y botones)
   ============================================================ */
:root {
  /* Resortes generados con la fórmula del oscilador amortiguado, como los springs de SwiftUI */
  --resorte: linear(0, 0.021, 0.0766, 0.1564, 0.2516, 0.3547, 0.4597, 0.5619, 0.6579, 0.7453, 0.8225, 0.8888, 0.9441, 0.9887, 1.0234, 1.049, 1.0666, 1.0775, 1.0827, 1.0833, 1.0804, 1.075, 1.0678, 1.0596, 1.0508, 1.0421, 1.0337, 1.0259, 1.0189, 1.0128, 1.0076, 1.0033, 0.9998, 0.9972, 0.9953, 0.9941, 0.9933, 0.993, 0.9931, 0.9934, 0.9939, 0.9946, 0.9953, 0.996, 0.9967, 0.9974, 0.998, 0.9986, 1);
  --resorte-suave: linear(0, 0.0148, 0.0535, 0.109, 0.1753, 0.2479, 0.323, 0.3979, 0.4706, 0.5396, 0.6038, 0.6628, 0.7161, 0.7637, 0.8058, 0.8426, 0.8743, 0.9015, 0.9245, 0.9437, 0.9596, 0.9725, 0.9829, 0.9911, 0.9975, 1.0023, 1.0058, 1.0082, 1.0098, 1.0107, 1.0111, 1.011, 1.0107, 1.0101, 1.0094, 1.0087, 1.0078, 1.007, 1.0062, 1.0054, 1.0047, 1.004, 1.0034, 1.0028, 1.0023, 1.0019, 1.0015, 1.0012, 1);
  --borde-luz:
    inset 0 1px 0 rgba(255,255,255,.8),
    inset 0 -1px 0 rgba(255,255,255,.28),
    inset 1px 0 0 rgba(255,255,255,.2),
    inset -1px 0 0 rgba(255,255,255,.2),
    inset 0 0 22px rgba(255,255,255,.07);
}

/* Vidrio claro (sobre fotos y fondos oscuros): casi transparente, el borde hace el trabajo */
.vidrio {
  background: linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.035));
  -webkit-backdrop-filter: blur(9px) saturate(190%) brightness(1.06);
  backdrop-filter: blur(9px) saturate(190%) brightness(1.06);
  box-shadow: var(--borde-luz), 0 12px 32px -14px rgba(5,10,22,.5);
}
/* Brillo especular: sigue al dedo, al mouse o a la inclinación del teléfono */
.vidrio::after {
  background:
    radial-gradient(160px 80px at var(--bx, var(--inclina, 28%)) 0%, rgba(255,255,255,.55), transparent 70%),
    radial-gradient(120px 60px at calc(100% - var(--bx, var(--inclina, 28%))) 100%, rgba(255,255,255,.18), transparent 70%);
  opacity: .55;
}
.vidrio.claro {
  background: linear-gradient(180deg, rgba(255,255,255,.58), rgba(255,255,255,.34));
  -webkit-backdrop-filter: blur(16px) saturate(200%) brightness(1.04);
  backdrop-filter: blur(16px) saturate(200%) brightness(1.04);
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(255,255,255,.5), inset 0 0 0 1px rgba(13,21,36,.06), 0 14px 34px -16px rgba(13,21,36,.38);
}

/* Botón principal: vidrio teñido de azul, lo bastante opaco para que el texto blanco se lea */
.boton-azul {
  background: linear-gradient(180deg, rgba(38,108,222,.9), rgba(18,87,199,.84));
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  backdrop-filter: blur(12px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(255,255,255,.2), inset 0 0 16px rgba(255,255,255,.08), 0 12px 28px -12px rgba(18,87,199,.85);
}
.boton-azul:hover { background: linear-gradient(180deg, rgba(38,108,222,.96), rgba(18,87,199,.92)); }

/* Toque estilo iOS 26: el botón crece, se ilumina desde el dedo y vuelve con resorte */
.boton, .flecha { position: relative; }
.boton, .flecha, .video .play {
  isolation: isolate; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: transform .7s var(--resorte), background .25s, box-shadow .3s, opacity .25s;
}
.boton::before, .flecha::before, .video .play::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  background: radial-gradient(circle at var(--px, 50%) var(--py, 50%), rgba(255,255,255,.55), rgba(255,255,255,.12) 45%, transparent 75%);
  opacity: 0; transition: opacity .45s ease-out;
}
.fn-presionado::before { opacity: 1; transition-duration: .12s; }
.fn-presionado { transition-duration: .35s; }
@media (hover: hover) {
  .boton:hover { transform: none; }
  .boton:active, .flecha:active { transform: none; }
  .vidrio:hover::after { opacity: .8; }
}
.boton:active { transform: none; }

/* Barra inferior: vidrio que se adapta al fondo, como la de la barra de arriba */
.dock:not(.claro) { color: #fff; }
.dock:not(.claro) .boton:not(.boton-azul) { color: #fff; }
@media (max-width: 820px) {
  .dock { transition: left .75s var(--resorte-suave), right .75s var(--resorte-suave), padding .5s var(--resorte-suave), color .3s, background .3s; }
  .dock .boton { transition: flex-basis .6s var(--resorte-suave), padding .6s var(--resorte-suave), opacity .25s, min-height .5s var(--resorte-suave), transform .7s var(--resorte); }
}
.barra { transition: width .8s var(--resorte-suave), color .3s, background .3s; }

/* Entradas con resorte: aparecen desde un poco más chicas y desenfocadas */
@keyframes fn-vidrio-entra { from { opacity: 0; transform: translateY(14px) scale(.86); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
.portada .acciones > *, .portada .ficha, .portada .logos, .portada .tablero, .portada .foto-tarjeta { animation-duration: 1s; animation-timing-function: var(--resorte); }
.fn-revela { transition: opacity .7s ease-out, transform 1s var(--resorte-suave), filter .7s ease-out; }
.techo.fn-cambio { animation: fn-latido .7s var(--resorte); }

@media (prefers-reduced-motion: reduce) {
  .boton, .flecha, .video .play, .dock, .dock .boton, .barra { transition: none !important; }
}

/* Tarjetas de contacto, equipo y datos: vidrio casi transparente, que se note el borde y no el relleno */
.contacto .vidrio, .equipo.vidrio, .ficha.vidrio {
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.012));
  -webkit-backdrop-filter: blur(6px) saturate(180%) brightness(1.08);
  backdrop-filter: blur(6px) saturate(180%) brightness(1.08);
}

/* ============================================================
   Vidrio líquido v3: como las notificaciones de iOS 26
   - Esmerilado: lo de atrás se ve solo como color (blur fuerte)
   - Relleno gris claro traslúcido
   - Borde que agarra luz en las esquinas (arriba a la izquierda y abajo a la derecha)
   ============================================================ */
.vidrio {
  background:
    radial-gradient(200px 100px at var(--bx, var(--inclina, 22%)) 0%, rgba(255,255,255,.14), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.09));
  -webkit-backdrop-filter: blur(22px) saturate(170%) brightness(1.1);
  backdrop-filter: blur(22px) saturate(170%) brightness(1.1);
  box-shadow: 0 12px 34px -14px rgba(0,0,0,.5);
}
/* El borde es un anillo con degradado: brilla en dos esquinas y casi desaparece en los lados */
.vidrio::after {
  inset: 0; padding: 1.2px; opacity: 1;
  background: linear-gradient(135deg,
    rgba(255,255,255,.95) 0%, rgba(255,255,255,.38) 14%, rgba(255,255,255,.08) 36%,
    rgba(255,255,255,.05) 62%, rgba(255,255,255,.32) 86%, rgba(255,255,255,.8) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.vidrio:hover::after { opacity: 1; }
.vidrio.claro {
  background:
    radial-gradient(200px 100px at var(--bx, var(--inclina, 22%)) 0%, rgba(255,255,255,.35), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.46));
  -webkit-backdrop-filter: blur(26px) saturate(190%) brightness(1.05);
  backdrop-filter: blur(26px) saturate(190%) brightness(1.05);
  box-shadow: inset 0 0 0 .5px rgba(13,21,36,.07), 0 14px 34px -16px rgba(13,21,36,.35);
}
.vidrio.claro::after {
  background: linear-gradient(135deg, #fff 0%, rgba(255,255,255,.6) 20%, rgba(255,255,255,.15) 45%, rgba(255,255,255,.15) 60%, rgba(255,255,255,.55) 85%, #fff 100%);
}
/* Tarjetas de contacto, equipo y datos: misma receta, un poco menos de relleno */
.contacto .vidrio, .equipo.vidrio, .ficha.vidrio {
  background:
    radial-gradient(200px 100px at var(--bx, var(--inclina, 22%)) 0%, rgba(255,255,255,.12), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.07));
  -webkit-backdrop-filter: blur(22px) saturate(170%) brightness(1.1);
  backdrop-filter: blur(22px) saturate(170%) brightness(1.1);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .vidrio, .contacto .vidrio, .equipo.vidrio, .ficha.vidrio { background: rgba(58,66,84,.92); }
  .vidrio.claro { background: rgba(255,255,255,.96); }
}
@media (prefers-reduced-transparency: reduce) {
  .vidrio, .contacto .vidrio, .equipo.vidrio, .ficha.vidrio { background: rgba(40,48,64,.97); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .vidrio.claro { background: #fff; }
}