/* =========================================================
   SDT — Soluciones en Desarrollo Tecnológico
   Hoja de estilos
   ========================================================= */

/* ---------- 1. Variables de diseño ---------- */
:root {
    --azul: #1B4DFF;          /* color principal de la marca */
    --azul-oscuro: #0F34C9;
    --azul-hielo: #7FE3FF;    /* acento luminoso */
    --tinta: #0A1433;         /* azul noche para títulos */
    --texto: #1E2A4A;
    --texto-suave: #5B6789;
    --fondo: #FFFFFF;
    --fondo-suave: #F2F5FF;
    --linea: #DCE3F7;
    --whatsapp: #25D366;
    --error: #D93636;
    --exito: #137A3E;

    --fuente-titulo: "Bricolage Grotesque", system-ui, sans-serif;
    --fuente-texto: "Instrument Sans", system-ui, sans-serif;
    --fuente-mono: "IBM Plex Mono", ui-monospace, monospace;

    --radio: 16px;
    --ancho: 1120px;
}

/* ---------- 2. Base ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 84px; }

body {
    margin: 0;
    font-family: var(--fuente-texto);
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--texto);
    background: var(--fondo);
    color-scheme: light;
    -webkit-font-smoothing: antialiased;
}

/* Cubre la zona de la muesca en celulares */
body::before {
    content: "";
    position: fixed;
    inset: 0 0 auto;
    height: env(safe-area-inset-top, 0px);
    z-index: 10;
    background: #fff;
}

img, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }
a { color: inherit; }
a:hover { color: inherit; } /* evita el azul de enlace que trae Bootstrap */

h1, h2, h3 {
    font-family: var(--fuente-titulo);
    color: var(--tinta);
    line-height: 1.08;
    letter-spacing: -.02em;
    margin: 0 0 .6em;
    text-wrap: balance;
}

h1 { font-size: clamp(2.3rem, 5.4vw, 3.9rem); font-weight: 800; }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.5rem); font-weight: 800; }
h3 { font-size: 1.35rem; font-weight: 600; }
p { margin: 0 0 1em; }

.contenedor {
    width: 100%;
    max-width: var(--ancho);
    margin-inline: auto;
    padding-left: max(20px, env(safe-area-inset-left, 0px));
    padding-right: max(20px, env(safe-area-inset-right, 0px));
}

.etiqueta {
    font-family: var(--fuente-mono);
    font-size: .8rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--azul);
    margin-bottom: 1rem;
}

/* ---------- 3. Botones ---------- */
.boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding: .95rem 1.4rem;
    border-radius: 12px;
    border: 2px solid transparent;
    font: 600 1rem/1 var(--fuente-texto);
    text-decoration: none;
    cursor: pointer;
    transition: transform .2s, background-color .2s, border-color .2s, color .2s;
}

.boton:hover { transform: translateY(-2px); }
.boton:focus-visible { outline: 3px solid var(--azul-hielo); outline-offset: 3px; }
.boton svg { width: 20px; height: 20px; }

.boton--primario { background: var(--azul); color: #fff; box-shadow: 0 12px 26px -12px rgba(27, 77, 255, .8); }
.boton--primario:hover { background: var(--azul-oscuro); }

.boton--borde { border-color: var(--linea); color: var(--tinta); background: #fff; }
.boton--borde:hover { border-color: var(--azul); color: var(--azul); }

.boton--whatsapp { background: var(--whatsapp); color: #06301A; }
.boton--whatsapp:hover { background: #1FBE5A; }

.boton--chico { padding: .7rem 1.05rem; font-size: .93rem; }
.boton--ancho { width: 100%; }

/* ---------- 4. Encabezado ---------- */
.encabezado {
    position: sticky;
    top: env(safe-area-inset-top, 0px);
    z-index: 50;
    background: rgba(255, 255, 255, .9);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid transparent;
    transition: border-color .3s;
}

.encabezado.con-borde { border-bottom-color: var(--linea); }

.encabezado__fila {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 74px;
}

.marca { display: flex; align-items: center; gap: .7rem; text-decoration: none; min-width: 0; }
.marca__logo { width: 42px; height: 42px; flex-shrink: 0; }
.marca__texto { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.marca__texto strong { font-family: var(--fuente-titulo); font-size: 1.35rem; color: var(--tinta); letter-spacing: -.02em; }
.marca__texto small { font-size: .72rem; color: var(--texto-suave); }

.marca--clara .marca__texto strong { color: #fff; }
.marca--clara .marca__texto small { color: #A9B6DC; }

.menu { display: flex; align-items: center; gap: clamp(1rem, 1.7vw, 1.6rem); }
.menu a:not(.boton) { text-decoration: none; font-weight: 500; font-size: .95rem; white-space: nowrap; }
.menu a:not(.boton):hover { color: var(--azul); }
.menu .boton { white-space: nowrap; }
/* En pantallas más angostas se oculta un enlace para que el menú quepa en una línea */
@media (max-width: 1099.98px) { .menu .menu__extra { display: none; } }
@media (min-width: 900px) { .marca__texto small { white-space: nowrap; } }

/* ---------- 5. Portada ---------- */
.portada {
    padding-block: 72px 96px;
    background:
        radial-gradient(circle at 85% 20%, rgba(127, 227, 255, .35), transparent 40%),
        radial-gradient(circle at 70% 90%, rgba(27, 77, 255, .14), transparent 45%),
        var(--fondo-suave);
    overflow: hidden;
}

.portada__grilla {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 56px;
    align-items: center;
}

.portada__texto { min-width: 0; }
.portada__bajada { font-size: 1.15rem; color: var(--texto-suave); max-width: 34em; }
.portada__acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* ===== Ilustración comercial de la portada ===== */
.portada__ilustracion {
    position: relative;
    padding: 34px 70px 92px 0;
    max-width: 100%;
}

/* --- Navegador --- */
.navegador {
    position: relative;
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow:
        0 1px 0 rgba(10, 20, 51, .06),
        0 40px 80px -30px rgba(10, 20, 51, .45),
        0 0 0 1px rgba(10, 20, 51, .08);
}

.navegador__barra {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 11px 14px;
    background: #EEF1FA;
    border-bottom: 1px solid var(--linea);
}

.semaforo { display: flex; gap: 6px; }
.semaforo i { width: 10px; height: 10px; border-radius: 50%; background: #FF5F57; }
.semaforo i:nth-child(2) { background: #FEBC2E; }
.semaforo i:nth-child(3) { background: #28C840; }

.url {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    max-width: 230px;
    padding: 5px 12px;
    font: 500 .72rem var(--fuente-mono);
    color: var(--texto-suave);
    background: #fff;
    border-radius: 999px;
}
.url svg { width: 11px; height: 11px; color: var(--exito); }

.sitio { padding: 14px 18px 20px; }

.sitio__nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
    font-size: .68rem;
}

.sitio__logo { display: flex; align-items: center; gap: 6px; font-family: var(--fuente-titulo); font-weight: 800; font-size: .82rem; color: var(--tinta); }
.sitio__logo b { width: 16px; height: 16px; border-radius: 5px; background: linear-gradient(135deg, var(--azul), var(--azul-hielo)); }
.sitio__menu { display: flex; gap: 12px; color: var(--texto-suave); }
.sitio__menu i { font-style: normal; }
.sitio__menu i:first-child { color: var(--azul); font-weight: 600; }

.sitio__carro { position: relative; width: 22px; height: 22px; color: var(--tinta); }
.sitio__carro svg { width: 22px; height: 22px; }
.sitio__carro em {
    position: absolute;
    top: -6px;
    right: -7px;
    width: 15px;
    height: 15px;
    display: grid;
    place-items: center;
    font: 700 .55rem var(--fuente-texto);
    font-style: normal;
    color: #fff;
    background: #FF4D6D;
    border-radius: 50%;
    animation: latido 2.4s ease-in-out infinite;
}

.sitio__banner {
    position: relative;
    display: flex;
    justify-content: space-between;
    padding: 18px 18px 20px;
    margin-bottom: 14px;
    overflow: hidden;
    color: #fff;
    border-radius: 12px;
    background: linear-gradient(120deg, var(--azul) 0%, #3D6BFF 55%, #34C6F4 100%);
}

.sitio__banner small { display: block; font: 500 .6rem var(--fuente-mono); text-transform: uppercase; letter-spacing: .08em; opacity: .85; }
.sitio__banner strong { display: block; margin: 4px 0 10px; font-family: var(--fuente-titulo); font-size: 1.12rem; line-height: 1.1; }

.sitio__cta {
    display: inline-block;
    padding: 6px 12px;
    font-size: .64rem;
    font-weight: 600;
    color: var(--azul);
    background: #fff;
    border-radius: 999px;
}

.sitio__circulo {
    position: absolute;
    right: -26px;
    top: -26px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 18px solid rgba(255, 255, 255, .18);
}

.sitio__productos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }

.producto { min-width: 0; font-size: .62rem; }
.producto b { display: block; margin-top: 6px; font-weight: 600; color: var(--tinta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.producto em { font-style: normal; font-weight: 700; color: var(--azul); }

.producto__img {
    position: relative;
    display: block;
    aspect-ratio: 1;
    border-radius: 10px;
    background: linear-gradient(160deg, #E4EAFF, #CBD7FF);
    overflow: hidden;
}
.producto__img::after {
    content: "";
    position: absolute;
    inset: 26% 30%;
    border-radius: 10px 10px 14px 14px;
    background: var(--azul);
    opacity: .85;
}
.producto__img--2 { background: linear-gradient(160deg, #DFF8FF, #B4ECFF); }
.producto__img--2::after { inset: 18% 38%; border-radius: 8px; background: #0FA3C9; }
.producto__img--3 { background: linear-gradient(160deg, #E9E4FF, #D3CCFF); }
.producto__img--3::after { inset: 28% 24%; border-radius: 50% 50% 12px 12px; background: var(--tinta); }

/* --- Tarjeta de código --- */
.tarjeta-codigo {
    position: absolute;
    top: 0;
    right: 0;
    width: 220px;
    background: #0B1430;
    border-radius: 12px;
    box-shadow: 0 24px 50px -20px rgba(10, 20, 51, .7);
    overflow: hidden;
    animation: flotar 7s ease-in-out infinite;
}

.tarjeta-codigo__cabecera {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 12px;
    font: 500 .64rem var(--fuente-mono);
    color: #8EA0D6;
    background: #111C40;
}
.tarjeta-codigo__cabecera i { width: 8px; height: 8px; border-radius: 50%; background: var(--whatsapp); }

.tarjeta-codigo code {
    display: grid;
    gap: 3px;
    padding: 10px 12px 12px;
    font: 500 .66rem/1.4 var(--fuente-mono);
    color: #E6ECFF;
    white-space: nowrap;
}
.tarjeta-codigo b { font-weight: 500; }
.tarjeta-codigo .sangria { padding-left: 14px; }
.c-tag { color: #7FE3FF; }
.c-attr { color: #B9A6FF; }
.c-str { color: #9BF0B0; }

.cursor {
    display: inline-block;
    width: 6px;
    height: 11px;
    margin-left: 3px;
    vertical-align: -1px;
    background: var(--azul-hielo);
    animation: parpadeo 1s steps(2) infinite;
}

/* --- Teléfono --- */
.telefono {
    position: absolute;
    right: 8px;
    bottom: 0;
    width: 168px;
    padding: 8px;
    background: linear-gradient(145deg, #1A2550, #060D24);
    border-radius: 30px;
    box-shadow:
        0 0 0 1.5px #2B3870,
        0 34px 60px -22px rgba(10, 20, 51, .75);
    animation: flotar 5s ease-in-out infinite;
}

.telefono__isla {
    position: absolute;
    top: 14px;
    left: 50%;
    z-index: 2;
    width: 48px;
    height: 13px;
    background: #060D24;
    border-radius: 999px;
    transform: translateX(-50%);
}

.app {
    padding: 8px 10px 10px;
    background: #F5F7FF;
    border-radius: 23px;
    font-size: .6rem;
    color: var(--texto);
}

.app__estado { display: flex; justify-content: space-between; align-items: center; padding: 0 4px 12px; font-weight: 700; font-size: .58rem; color: var(--tinta); }
.app__senal { display: flex; align-items: flex-end; gap: 2px; height: 8px; }
.app__senal i { width: 3px; background: var(--tinta); border-radius: 1px; }
.app__senal i:nth-child(1) { height: 40%; }
.app__senal i:nth-child(2) { height: 70%; }
.app__senal i:nth-child(3) { height: 100%; }

.app__saludo { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.app__saludo small { display: block; color: var(--texto-suave); }
.app__saludo strong { display: block; font-family: var(--fuente-titulo); font-size: .82rem; color: var(--tinta); line-height: 1.1; }

.app__avatar {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    font-weight: 700;
    color: var(--tinta);
    background: linear-gradient(135deg, var(--azul-hielo), #C8F4FF);
    border-radius: 50%;
}

.app__reserva {
    position: relative;
    padding: 10px 11px;
    margin-bottom: 8px;
    color: #fff;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--azul), #4E7BFF);
    overflow: hidden;
}
.app__reserva::after {
    content: "";
    position: absolute;
    right: -18px;
    bottom: -22px;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
}
.app__reserva small { display: block; opacity: .8; }
.app__reserva strong { display: block; margin: 2px 0 6px; font-size: .78rem; }
.app__reserva span { display: inline-block; padding: 2px 7px; font-size: .52rem; font-weight: 700; color: #06301A; background: #A7F3C4; border-radius: 999px; }

.app__item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 8px;
    margin-bottom: 6px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 1px 0 rgba(10, 20, 51, .05);
}
.app__item b { display: block; font-weight: 600; color: var(--tinta); }
.app__item em { font-style: normal; color: var(--texto-suave); font-size: .54rem; }

.app__icono { width: 22px; height: 22px; flex-shrink: 0; border-radius: 7px; background: #E3EAFF; position: relative; }
.app__icono::after { content: ""; position: absolute; inset: 6px; border-radius: 3px; background: var(--azul); }
.app__icono--2 { background: #FFF0D6; }
.app__icono--2::after { border-radius: 50%; background: #F5A524; }

.app__tabs {
    display: flex;
    justify-content: space-around;
    padding: 8px 4px 2px;
    margin-top: 8px;
    border-top: 1px solid var(--linea);
}
.app__tabs i { width: 14px; height: 14px; border-radius: 5px; background: #D5DCF2; }
.app__tabs i.activa { background: var(--azul); }

/* --- Notificación --- */
.aviso {
    position: absolute;
    left: -18px;
    bottom: 22px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px 10px 10px;
    background: rgba(255, 255, 255, .96);
    border-radius: 14px;
    box-shadow: 0 22px 44px -18px rgba(10, 20, 51, .5), 0 0 0 1px rgba(10, 20, 51, .06);
    animation: entrar-aviso .8s .6s cubic-bezier(.2, .8, .2, 1) both, flotar 6s 1.4s ease-in-out infinite;
}
.aviso__check {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    color: #fff;
    background: var(--whatsapp);
    border-radius: 10px;
}
.aviso__check svg { width: 16px; height: 16px; }
.aviso strong { display: block; font-size: .8rem; color: var(--tinta); line-height: 1.2; }
.aviso small { font-size: .68rem; color: var(--texto-suave); }

/* --- Tarjeta de estadísticas --- */
.tarjeta-datos {
    position: absolute;
    left: 36%;
    bottom: -14px;
    width: 150px;
    padding: 12px 14px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 22px 44px -18px rgba(10, 20, 51, .5), 0 0 0 1px rgba(10, 20, 51, .06);
}
.tarjeta-datos small { display: block; font-size: .64rem; color: var(--texto-suave); }
.tarjeta-datos strong { display: block; font-family: var(--fuente-titulo); font-size: 1.2rem; color: var(--exito); line-height: 1.2; }

.barras { display: flex; align-items: flex-end; gap: 4px; height: 34px; margin-top: 6px; }
.barras i {
    flex: 1;
    border-radius: 3px 3px 1px 1px;
    background: #D5DFFF;
    transform-origin: bottom;
    animation: crecer .9s cubic-bezier(.2, .8, .2, 1) both;
}
.barras i:nth-child(1) { height: 35%; animation-delay: .1s; }
.barras i:nth-child(2) { height: 48%; animation-delay: .18s; }
.barras i:nth-child(3) { height: 42%; animation-delay: .26s; }
.barras i:nth-child(4) { height: 66%; animation-delay: .34s; }
.barras i:nth-child(5) { height: 80%; animation-delay: .42s; }
.barras i:nth-child(6) { height: 100%; animation-delay: .5s; background: var(--azul); }

@keyframes flotar { 50% { transform: translateY(-10px); } }
@keyframes parpadeo { 50% { opacity: 0; } }
@keyframes latido { 50% { transform: scale(1.15); } }
@keyframes crecer { from { transform: scaleY(.15); } }
@keyframes entrar-aviso { from { opacity: .001; transform: translateX(-16px); } }

/* Enlace de WhatsApp en contacto (sin mostrar el número) */
.enlace-whatsapp { color: #128C4B !important; }

/* Texto del botón del encabezado: largo en computador, corto en celular */
.texto-corto { display: none; }

/* ---------- 6. Secciones ---------- */
.seccion { padding-block: 96px; }
.seccion--suave { background: var(--fondo-suave); }
.seccion__encabezado { max-width: 720px; margin-bottom: 48px; }

/* Especialidades */

.especialidad__icono {
    width: 60px;
    height: 60px;
    display: grid;
    place-items: center;
    margin-bottom: 24px;
    color: var(--azul);
    background: var(--fondo-suave);
    border-radius: 14px;
}

.especialidad__icono svg { width: 34px; height: 34px; }

.lista-puntos { list-style: none; padding: 0; margin: 20px 0 0; }
.lista-puntos li { position: relative; padding: 10px 0 10px 26px; border-top: 1px dashed var(--linea); }
.lista-puntos li::before { content: "→"; position: absolute; left: 0; color: var(--azul); }

/* Necesidades */
.rubros {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.rubros li {
    min-width: 0;
    padding: 22px 20px;
    background: #fff;
    border: 1.5px solid var(--linea);
    border-radius: 14px;
}

.rubros strong { display: block; font-family: var(--fuente-titulo); font-weight: 600; font-size: 1.08rem; color: var(--tinta); margin-bottom: 4px; }
.rubros span { font-size: .93rem; color: var(--texto-suave); }

.rubros__nota { margin-top: 32px; font-size: 1.05rem; }
.rubros__nota a { color: var(--azul); font-weight: 600; }

/* ---------- 7. Contacto y formulario ---------- */
.contacto { display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: start; }
.contacto__texto { min-width: 0; }
.contacto__texto > p { color: var(--texto-suave); }

.contacto__datos { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 10px; }

.contacto__datos li {
    display: flex;
    flex-direction: column;
    padding: 14px 18px;
    border: 1.5px solid var(--linea);
    border-radius: 12px;
}

.contacto__datos span { font: 500 .72rem var(--fuente-mono); text-transform: uppercase; color: var(--azul); }
.contacto__datos a { font-weight: 600; color: var(--tinta); text-decoration: none; word-break: break-word; }
.contacto__datos a:hover { color: var(--azul); }

.formulario {
    min-width: 0;
    padding: 32px;
    background: #fff;
    border: 1.5px solid var(--tinta);
    border-radius: var(--radio);
    box-shadow: 12px 12px 0 var(--azul);
}

.campo { margin: 0 0 18px; padding: 0; border: 0; min-width: 0; }

.campo label,
.campo legend {
    display: block;
    margin-bottom: 6px;
    padding: 0;
    font-weight: 600;
    font-size: .93rem;
    color: var(--tinta);
}

.campo input[type="text"],
.campo select,
.campo textarea {
    width: 100%;
    padding: .85rem .95rem;
    font: inherit;
    color: var(--tinta);
    background: var(--fondo-suave);
    border: 1.5px solid var(--linea);
    border-radius: 10px;
    transition: border-color .2s, background-color .2s;
}

.campo textarea { resize: vertical; }

.campo input:focus,
.campo select:focus,
.campo textarea:focus { outline: none; border-color: var(--azul); background: #fff; }

.campo.invalido input,
.campo.invalido select,
.campo.invalido textarea { border-color: var(--error); }

.error { display: block; min-height: 1em; margin-top: 4px; font-size: .82rem; color: var(--error); }

.opciones-numero { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.opcion-numero {
    display: flex !important;
    align-items: center;
    gap: 10px;
    margin: 0 !important;
    padding: 12px 14px;
    font-weight: 500 !important;
    border: 1.5px solid var(--linea);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color .2s, background-color .2s;
}

.opcion-numero input { accent-color: var(--azul); width: 18px; height: 18px; margin: 0; }
.opcion-numero:has(input:checked) { border-color: var(--azul); background: var(--fondo-suave); }
.opcion-numero:has(input:focus-visible) { outline: 3px solid var(--azul-hielo); outline-offset: 2px; }

.form-nota { margin: 14px 0 0; font-size: .92rem; font-weight: 500; color: var(--exito); }
.form-nota:empty { display: none; }
.form-nota--error { color: var(--error); }

.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* ---------- 7b. Galería didáctica ---------- */
.galeria {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.foto { min-width: 0; }
.foto figure { margin: 0; }

.foto__marco {
    position: relative;
    aspect-ratio: 4 / 3;
    max-width: 100%;
    overflow: hidden;
    border-radius: 14px;
    /* Fondo de respaldo si la foto no carga */
    background:
        linear-gradient(rgba(27, 77, 255, .08) 1px, transparent 1px) 0 0 / 22px 22px,
        linear-gradient(90deg, rgba(27, 77, 255, .08) 1px, transparent 1px) 0 0 / 22px 22px,
        var(--fondo-suave);
}

.foto__marco img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.foto:hover .foto__marco img { transform: scale(1.04); }
.foto__marco.sin-foto img { display: none; }

.foto figcaption { padding-top: 16px; font-size: .95rem; color: var(--texto-suave); }

.foto figcaption strong {
    display: block;
    margin-bottom: 4px;
    font-family: var(--fuente-titulo);
    font-weight: 600;
    font-size: 1.12rem;
    color: var(--tinta);
}

.foto__paso {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    margin-bottom: 10px;
    font: 500 .85rem var(--fuente-mono);
    color: #fff;
    background: var(--azul);
    border-radius: 50%;
}

.creditos { margin-top: 28px; font-size: .8rem; color: var(--texto-suave); }
.creditos a { color: var(--texto-suave); }

.contador { display: block; text-align: right; font-size: .78rem; color: var(--texto-suave); margin-top: 4px; }

/* ---------- 8. Pie de página: ver css/pie.css (común a todas las páginas) ---------- */

/* ---------- 9. Botón flotante de WhatsApp ---------- */
.whatsapp-flotante {
    position: fixed;
    right: calc(20px + env(safe-area-inset-right, 0px));
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    z-index: 60;
    width: 60px;
    height: 60px;
    display: grid;
    place-items: center;
    color: #fff;
    background: var(--whatsapp);
    border-radius: 50%;
    box-shadow: 0 12px 28px -8px rgba(37, 211, 102, .7);
    transition: transform .2s;
}

.whatsapp-flotante svg { width: 32px; height: 32px; }
.whatsapp-flotante:hover { transform: scale(1.08); }

/* ---------- 10. Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .telefono, .tarjeta-codigo, .aviso, .barras i, .cursor, .sitio__carro em { animation: none; }
    .foto__marco img { transition: none; }
}

/* ---------- 11. Tablet y celular ---------- */
@media (max-width: 960px) {
    .rubros,
    .galeria { grid-template-columns: repeat(2, 1fr); }
    .portada__grilla,
    .contacto { grid-template-columns: 1fr; gap: 44px; }
    .portada__ilustracion { max-width: 520px; width: 100%; margin-inline: auto; }
}

@media (max-width: 720px) {
    .menu a:not(.boton) { display: none; }
    .marca__texto small { font-size: .62rem; }
    .portada__ilustracion { padding-right: 40px; }
    .tarjeta-codigo { width: 190px; }
    .especialidades { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
    body { font-size: 1rem; }
    .portada { padding-block: 40px 64px; }
    .seccion { padding-block: 64px; }
    .portada__acciones .boton { width: 100%; }
    .portada__ilustracion { padding-right: 30px; }
    .texto-largo { display: none; }
    .texto-corto { display: inline; }
    .portada__ilustracion { padding: 46px 28px 96px 0; }
    .sitio { padding: 12px 12px 16px; }
    .sitio__menu { display: none; }
    .telefono { width: 128px; right: 0; padding: 6px; border-radius: 24px; }
    .app { border-radius: 19px; padding: 6px 8px 8px; }
    .app__item:last-of-type { display: none; }
    .tarjeta-codigo { width: 168px; right: 4px; }
    .tarjeta-codigo code { font-size: .58rem; }
    .aviso { display: none; }
    .tarjeta-datos { left: 4px; bottom: -6px; width: 128px; }
    .rubros,
    .galeria,
    .opciones-numero { grid-template-columns: 1fr; }
    .especialidad { padding: 28px 22px; }
    .formulario { padding: 24px 18px; box-shadow: 6px 6px 0 var(--azul); }
    .pie__fila { flex-direction: column; align-items: flex-start; }
}


/* ---------- Añadidos: accesibilidad, preguntas frecuentes, páginas legales ---------- */
.saltar { position: absolute; left: 12px; top: -60px; z-index: 100; padding: .7rem 1rem; background: var(--tinta); color: #fff; border-radius: 10px; text-decoration: none; }
.saltar:focus { top: 12px; }
.opcional { font-weight: 400; color: var(--texto-suave); }
.form-privacidad { margin: 0 0 18px; font-size: .85rem; color: var(--texto-suave); }
.faq { display: grid; gap: 12px; max-width: 760px; }
.faq details { background: #fff; border: 1px solid var(--linea); border-radius: 14px; padding: 0 20px; }
.faq summary { cursor: pointer; padding: 16px 0; font-weight: 600; color: var(--tinta); list-style-position: outside; }
.faq summary:focus-visible { outline: 3px solid var(--azul-hielo); outline-offset: 2px; border-radius: 8px; }
.faq details p { margin: 0 0 16px; color: var(--texto-suave); }
.legal { max-width: 760px; padding-block: 64px 96px; }
.legal h2 { font-size: 1.3rem; margin-top: 2rem; }
.legal ul { padding-left: 1.2rem; }
.pagina-centro { min-height: 70vh; display: grid; place-content: center; text-align: center; padding: 48px 20px; }
@media (max-width: 720px) { .especialidades { grid-template-columns: 1fr; } }

/* ---------- Bootstrap 5.3: tarjetas de especialidades, planes y botón ---------- */
.card-sdt { --bs-card-bg: var(--tinta); --bs-card-color: #C9D3F2; --bs-card-title-color: #fff; --bs-card-border-color: var(--tinta); --bs-card-border-radius: var(--radio); --bs-card-inner-border-radius: calc(var(--radio) - 1px); transition: transform .25s, box-shadow .25s; }
.card-sdt:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -18px rgba(10, 20, 51, .6); }
.card-sdt .card-text { color: #A9B6DC; }
.card-sdt .especialidad__icono { background: var(--azul); color: #fff; }
.card-sdt .lista-puntos li { border-color: rgba(127, 227, 255, .18); }
.card-sdt .lista-puntos li::before { color: var(--azul-hielo); }

.card-plan { --bs-card-bg: #E6EEFF; --bs-card-color: var(--tinta); --bs-card-title-color: var(--tinta); --bs-card-border-color: #BFD0FF; --bs-card-border-radius: var(--radio); --bs-card-inner-border-radius: calc(var(--radio) - 1px); position: relative; overflow: hidden; }
.card-plan--destacado { --bs-card-border-color: var(--tinta); --bs-card-border-width: 2px; }
.plan__desc { color: #3D4F80; min-height: 4.8em; }
.plan__precio small, .plan__precio span { color: #3D4F80; }
.plan__precio strong { font-family: var(--fuente-titulo); line-height: 1; letter-spacing: -.02em; }
.card-plan .lista-puntos li { border-color: rgba(10, 20, 51, .14); }
.card-plan .lista-puntos li::before { color: var(--tinta); }
.plan__cinta { position: absolute; top: 22px; right: -46px; z-index: 1; width: 170px; padding: 6px 0; transform: rotate(45deg); text-align: center; font-size: .82rem; letter-spacing: .05em; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); }
.planes__nota { margin-top: 20px; font-size: .88rem; color: var(--texto-suave); }
.btn-sdt { --bs-btn-color: #fff; --bs-btn-bg: var(--azul); --bs-btn-border-color: var(--azul); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--azul-oscuro); --bs-btn-hover-border-color: var(--azul-oscuro); --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--azul-oscuro); --bs-btn-active-border-color: var(--azul-oscuro); --bs-btn-focus-shadow-rgb: 27, 77, 255; --bs-btn-padding-y: .8rem; --bs-btn-border-radius: 12px; font-weight: 600; font-family: inherit; }
@media (max-width: 1199.98px) { .plan__desc { min-height: 0; } }

/* Botones de envío del formulario: WhatsApp y correo */
.form-acciones { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-acciones .boton { width: 100%; white-space: nowrap; padding-inline: 1rem; }
@media (max-width: 520px) { .form-acciones { grid-template-columns: 1fr; } }

/* Lista con emojis junto al formulario de consultas */
.contacto__beneficios { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 14px; }
.contacto__beneficios li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 18px;
    background: var(--fondo-suave);
    border-radius: 14px;
}
.contacto__emoji {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    font-size: 1.5rem;
    line-height: 1;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 6px 16px -10px rgba(10, 20, 51, .35);
}
.contacto__beneficios strong { display: block; color: var(--tinta); font-weight: 600; }
.contacto__beneficios small { display: block; margin-top: 2px; font-size: .92rem; color: var(--texto-suave); line-height: 1.45; }

/* ---------- Proyectos desarrollados ---------- */
.proyecto { overflow: hidden; }
.proyecto__captura { aspect-ratio: 16 / 9; overflow: hidden; border-bottom: 1px solid rgba(127, 227, 255, .18); }
.proyecto__captura img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .5s; }
.proyecto:hover .proyecto__captura img { transform: scale(1.03); }
.proyecto__logo { height: 48px; width: auto; }
.proyecto__rubro { font-family: var(--fuente-mono); font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--azul-hielo); margin-bottom: .6rem; }
.proyecto__etiquetas { list-style: none; padding: 0; margin: 1.4rem 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.proyecto__etiquetas li { padding: 5px 12px; font-size: .85rem; color: #DCE6FF; border: 1px solid rgba(127, 227, 255, .25); border-radius: 999px; }

.proyecto-vacio {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    min-height: 260px;
    padding: 32px;
    text-align: center;
    text-decoration: none;
    color: var(--texto-suave);
    background: #fff;
    border: 2px dashed #BFD0FF;
    border-radius: var(--radio);
    transition: border-color .25s, transform .25s;
}
.proyecto-vacio:hover { border-color: var(--azul); color: var(--texto-suave); transform: translateY(-4px); }
.proyecto-vacio:focus-visible { outline: 3px solid var(--azul-hielo); outline-offset: 3px; }
.proyecto-vacio strong { font-family: var(--fuente-titulo); font-size: 1.3rem; color: var(--tinta); line-height: 1.25; }
.proyecto-vacio__signo { width: 56px; height: 56px; display: grid; place-items: center; font-size: 2rem; line-height: 1; color: #fff; background: var(--azul); border-radius: 14px; }
@media (prefers-reduced-motion: reduce) {
    .proyecto__captura img, .proyecto-vacio { transition: none; }
    .proyecto:hover .proyecto__captura img, .proyecto-vacio:hover { transform: none; }
}

/* ---------- Proyectos ya desarrollados: categorías ---------- */
.proyectos__categoria + .proyectos__categoria { margin-top: 56px; }
.proyectos__titulo { display: flex; align-items: center; gap: 12px; margin: 0 0 20px; font-family: var(--fuente-titulo); font-size: 1.5rem; color: var(--tinta); }
.proyectos__numero { font-family: var(--fuente-mono); font-size: .8rem; letter-spacing: .08em; padding: 4px 10px; color: #fff; background: var(--azul); border-radius: 8px; }
.proyecto__marca { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; }
.proyecto__sello { font-family: var(--fuente-mono); font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; padding: 5px 12px; color: var(--tinta); background: var(--azul-hielo); border-radius: 999px; }
.proyecto-vacio--ancho { min-height: 200px; }

/* ---------- Planes: precio normal tachado y cinta de oferta que gira ---------- */
.plan__antes { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 1.05rem; color: #3D4F80; }
.plan__antes s { text-decoration-color: var(--bs-danger, #dc3545); text-decoration-thickness: 2px; }
.plan__ahorro { font-size: .78rem; font-weight: 600; letter-spacing: .02em; padding: 3px 10px; color: var(--bs-danger, #dc3545); background: rgba(var(--bs-danger-rgb, 220, 53, 69), .1); border: 1px solid rgba(var(--bs-danger-rgb, 220, 53, 69), .3); border-radius: 999px; }

/* Con la cinta giratoria activa (js/planes.js) se oculta la cinta diagonal de respaldo */
.plan__cinta-giro { display: none; }
.card-plan.con-cinta { overflow: visible; transition: transform .3s, box-shadow .3s; }
.card-plan.con-cinta .plan__cinta { display: none; }
.card-plan.con-cinta:hover { transform: translateY(-6px); box-shadow: 0 26px 50px -22px rgba(10, 20, 51, .55); }

/* Cinta que envuelve la tarjeta en su parte media superior:
   cruza de lado a lado, sobresale 10 px por cada costado y se dobla hacia atrás */
.card-plan.con-cinta .plan__cinta-giro {
    --sobresale: 10px;
    position: relative;
    display: block;
    margin: 6px calc(-1.5rem - var(--sobresale)) 22px;
    height: 34px;
    background: var(--bs-danger, #dc3545);
    box-shadow: 0 6px 12px -6px rgba(10, 20, 51, .45);
}
/* Doblez de la cinta detrás de la tarjeta (mismo rojo, más oscuro por la sombra) */
.card-plan.con-cinta .plan__cinta-giro::before,
.card-plan.con-cinta .plan__cinta-giro::after {
    content: "";
    position: absolute;
    top: 100%;
    border-top: var(--sobresale) solid #9A1E2A;
}
.card-plan.con-cinta .plan__cinta-giro::before { left: 0; border-left: var(--sobresale) solid transparent; }
.card-plan.con-cinta .plan__cinta-giro::after { right: 0; border-right: var(--sobresale) solid transparent; }
.cinta__pista {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    width: max-content;
    animation: cinta-gira 14s linear infinite;
}
.cinta__ventana { position: absolute; inset: 0; overflow: hidden; }
/* Sombra en los extremos: da la sensación de que el texto da la vuelta a la tarjeta */
.cinta__ventana::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(10, 20, 51, .45), rgba(10, 20, 51, 0) 18%, rgba(255, 255, 255, .08) 50%, rgba(10, 20, 51, 0) 82%, rgba(10, 20, 51, .45));
    pointer-events: none;
}
.cinta__tramo { display: flex; }
.cinta__tramo span { padding: 0 14px; font-family: var(--fuente-mono); font-size: .8rem; font-weight: 500; letter-spacing: .12em; color: #fff; white-space: nowrap; }
.cinta__tramo span::after { content: "★"; margin-left: 28px; opacity: .85; }
@keyframes cinta-gira { to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
    .cinta__pista { animation: none; }
    .card-plan.con-cinta { transition: none; }
    .card-plan.con-cinta:hover { transform: none; }
}

/* =========================================================
   Proyectos ya desarrollados — versión compacta con pestañas
   ========================================================= */
#proyectos { padding-block: 72px; }
.proyectos__encabezado { margin-bottom: 24px; }
#proyectos .contenedor { max-width: 1040px; }

/* Pestañas (Bootstrap nav-pills con los colores de SDT) */
.proyectos__pestanas { gap: 8px; margin-bottom: 20px; }
.proyectos__pestanas .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    font-weight: 600;
    font-size: .95rem;
    color: var(--tinta);
    background: #fff;
    border: 1px solid var(--linea);
    border-radius: 999px;
    transition: background-color .2s, color .2s, border-color .2s;
}
.proyectos__pestanas .nav-link:hover { border-color: var(--azul); color: var(--azul); }
.proyectos__pestanas .nav-link.active { color: #fff; background: var(--azul); border-color: var(--azul); }
.proyectos__pestanas .nav-link:focus-visible { outline: 3px solid var(--azul-hielo); outline-offset: 2px; }
.proyectos__pestanas .badge { font-size: .72rem; color: var(--azul); background: #E6EEFF; }
.proyectos__pestanas .nav-link.active .badge { color: var(--azul); background: #fff; }

/* Sin JavaScript: se ven ambos paneles, cada uno con su título */
.proyectos__panel + .proyectos__panel { margin-top: 28px; }
.proyectos__titulo-panel { margin: 0 0 12px; font-family: var(--fuente-titulo); font-size: 1.15rem; color: var(--tinta); }
/* Con JavaScript: se ocultan los títulos, porque las pestañas ya los muestran */
.proyectos--con-pestanas .nav { display: flex; }
.proyectos--con-pestanas .proyectos__titulo-panel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.proyectos--con-pestanas .proyectos__panel + .proyectos__panel { margin-top: 0; }
.proyectos__pestanas { display: none; }

/* Ficha de proyecto: imagen a la izquierda y datos a la derecha */
.proyecto-ficha {
    overflow: hidden;
    color: var(--texto);
    background: #fff;
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    box-shadow: 0 14px 30px -24px rgba(10, 20, 51, .45);
    transition: transform .25s, box-shadow .25s;
}
.proyecto-ficha:hover { transform: translateY(-3px); box-shadow: 0 20px 36px -24px rgba(10, 20, 51, .55); }
.proyecto-ficha__captura { position: relative; min-height: 200px; overflow: hidden; background: var(--tinta); }
.proyecto-ficha__captura img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.proyecto-ficha__captura--app {
    display: grid;
    place-items: center;
    padding: 18px 0;
    background: radial-gradient(circle at 50% 30%, #2A2A2A, #0A0A0A 70%);
}
.proyecto-ficha__telefono {
    position: relative;
    width: 138px;
    aspect-ratio: 9 / 16;
    max-width: 100%;
    padding: 6px;
    background: #050505;
    border-radius: 22px;
    box-shadow: 0 0 0 1.5px #3A3A3A, 0 18px 30px -12px rgba(0, 0, 0, .8);
}
.proyecto-ficha__telefono img { position: static; width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 16px; }
.proyecto-ficha__cuerpo { padding: 20px 22px; }
.proyecto-ficha__marca { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.proyecto-ficha__logo--ancho { height: 32px; width: auto; padding: 4px 8px; background: var(--tinta); border-radius: 8px; box-sizing: content-box; }
.proyecto-ficha__logo--icono { width: 36px; height: 36px; border-radius: 9px; }
.proyecto-ficha__nombre { font-family: var(--fuente-titulo); font-size: 1.05rem; color: var(--tinta); }
.proyecto-ficha__sello {
    font-family: var(--fuente-mono);
    font-size: .68rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: 3px 10px;
    color: var(--tinta);
    background: var(--azul-hielo);
    border-radius: 999px;
}
.proyecto-ficha__rubro { margin: 0 0 4px; font-family: var(--fuente-mono); font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; color: var(--azul); }
.proyecto-ficha__titulo { margin: 0 0 6px; font-family: var(--fuente-titulo); font-size: 1.15rem; color: var(--tinta); }
.proyecto-ficha__texto { margin: 0; font-size: .92rem; line-height: 1.5; color: var(--texto-suave); }
.proyecto-ficha__etiquetas { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.proyecto-ficha__etiquetas li { padding: 3px 10px; font-size: .78rem; color: var(--tinta); background: #EEF2FF; border-radius: 999px; }
.proyecto-ficha__enlace { display: inline-block; margin-top: 12px; font-weight: 600; font-size: .9rem; color: var(--azul); text-decoration: none; }
.proyecto-ficha__enlace:hover { text-decoration: underline; }

/* Invitación compacta para el próximo proyecto */
.proyecto-invitacion {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    min-height: 170px;
    padding: 22px;
    text-align: center;
    text-decoration: none;
    color: var(--texto-suave);
    background: #fff;
    border: 2px dashed #BFD0FF;
    border-radius: var(--radio);
    transition: border-color .25s, transform .25s;
}
.proyecto-invitacion:hover { border-color: var(--azul); transform: translateY(-3px); }
.proyecto-invitacion:focus-visible { outline: 3px solid var(--azul-hielo); outline-offset: 3px; }
.proyecto-invitacion strong { font-family: var(--fuente-titulo); font-size: 1.05rem; color: var(--tinta); line-height: 1.25; }
.proyecto-invitacion span:last-child { font-size: .88rem; }
.proyecto-invitacion__signo { width: 40px; height: 40px; display: grid; place-items: center; font-size: 1.5rem; line-height: 1; color: #fff; background: var(--azul); border-radius: 11px; }

@media (max-width: 767.98px) {
    .proyecto-ficha__captura { min-height: 180px; }
    .proyecto-ficha__captura--app { min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .proyecto-ficha, .proyecto-invitacion, .proyectos__pestanas .nav-link { transition: none; }
    .proyecto-ficha:hover, .proyecto-invitacion:hover { transform: none; }
}

/* Fichas que se apilan (imagen arriba) cuando hay dos por fila en pantallas grandes */
@media (min-width: 992px) {
    .proyecto-ficha--apilada-lg .proyecto-ficha__captura { min-height: 0; height: 190px; }
    .proyecto-ficha--apilada-lg > .row { align-content: flex-start; }
}

/* Invitación en forma de franja angosta */
.proyecto-invitacion--franja {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 14px;
    min-height: 0;
    padding: 14px 20px;
}
.proyecto-invitacion--franja .proyecto-invitacion__signo { width: 32px; height: 32px; font-size: 1.2rem; border-radius: 9px; }