/* Centro REDES — sitio público.
   Paleta tomada del logo: turquesa (principal), naranja (acción), verde y ámbar (acentos). */

:root {
    --turquesa: #0e8ba3;
    --turquesa-oscuro: #0a5c6d;
    --turquesa-noche: #073b47;
    --turquesa-suave: #e6f4f6;
    --naranja: #e8582a;
    --naranja-oscuro: #c9441a;
    --verde: #8cbd3f;
    --ambar: #f3a11c;
    --tinta: #16323a;
    --tinta-suave: #52686e;
    --fondo: #fbfaf7;
    --blanco: #ffffff;
    --borde: #e3e8e6;
    --radio: 18px;
    --sombra: 0 1px 2px rgba(7, 59, 71, .06), 0 10px 30px -12px rgba(7, 59, 71, .18);
    --fuente-titulo: "Fraunces", Georgia, serif;
    --fuente-texto: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--fuente-texto);
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--tinta);
    background: var(--fondo);
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: var(--turquesa-oscuro); }

h1, h2, h3 {
    font-family: var(--fuente-titulo);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -.01em;
    margin: 0;
    text-wrap: balance;
}

h1 { font-size: clamp(2.1rem, 4.6vw, 3.5rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); }
h3 { font-size: 1.25rem; }

p { margin: 0 0 1em; }

:focus-visible { outline: 3px solid var(--ambar); outline-offset: 3px; border-radius: 6px; }

.contenedor { width: min(1160px, 100% - 2.5rem); margin-inline: auto; }
.contenedor-angosto { width: min(760px, 100% - 2.5rem); }

.saltar {
    position: absolute; left: 1rem; top: -4rem; z-index: 100;
    background: var(--tinta); color: #fff; padding: .6rem 1rem; border-radius: 8px;
}
.saltar:focus { top: 1rem; }

.oculto { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Botones ---------- */
.boton {
    display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
    padding: .7rem 1.25rem; border-radius: 999px; border: 2px solid transparent;
    font: inherit; font-weight: 600; font-size: .98rem; line-height: 1.2;
    text-decoration: none; cursor: pointer;
    transition: background-color .18s, color .18s, border-color .18s, transform .18s;
}
.boton:hover { transform: translateY(-1px); }
.boton-grande { padding: .9rem 1.6rem; font-size: 1.05rem; }
.boton-acento { background: var(--naranja); color: #fff; }
.boton-acento:hover { background: var(--naranja-oscuro); }
.boton-primario { background: var(--turquesa-oscuro); color: #fff; }
.boton-primario:hover { background: var(--turquesa-noche); }
.boton-linea { border-color: var(--turquesa-oscuro); color: var(--turquesa-oscuro); background: transparent; }
.boton-linea:hover { background: var(--turquesa-suave); }
.boton-claro { border-color: rgba(255, 255, 255, .55); color: #fff; }
.boton-claro:hover { background: rgba(255, 255, 255, .12); }

.acciones { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }
.acciones-centradas { justify-content: center; }

.enlace-flecha {
    display: inline-flex; align-items: center; gap: .4rem;
    font-weight: 600; text-decoration: none; color: var(--turquesa-oscuro);
}
.enlace-flecha i { transition: transform .18s; }
.enlace-flecha:hover i { transform: translateX(4px); }

/* ---------- Cabecera ---------- */
.cabecera {
    position: sticky; top: 0; z-index: 50;
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--borde);
}
.cabecera-fila { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 76px; }

.marca { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--tinta); }
/* Solo el cerebro del logo: el nombre va como texto. */
.marca-cerebro {
    flex: none; width: 62px; height: 48px;
    background: url("../img/logo-redes.webp") no-repeat 50% 11.5% / 128% auto;
}
.marca-texto { display: grid; line-height: 1.1; }
.marca-texto strong { font-family: var(--fuente-texto); font-weight: 700; font-size: 1.5rem; letter-spacing: .04em; color: var(--turquesa); }
.marca-texto small { font-size: .72rem; font-weight: 600; color: var(--naranja); letter-spacing: .01em; }

.menu { display: flex; align-items: center; gap: .3rem; }
.menu > a:not(.boton) {
    padding: .5rem .8rem; border-radius: 999px;
    color: var(--tinta); text-decoration: none; font-weight: 500; font-size: .97rem;
}
.menu > a:not(.boton):hover { background: var(--turquesa-suave); }
.menu > a.activo { color: var(--turquesa-oscuro); background: var(--turquesa-suave); font-weight: 600; }
.menu-turno { margin-left: .6rem; }

.menu-boton {
    display: none; background: none; border: 0; padding: .3rem .5rem;
    font-size: 1.9rem; line-height: 1; color: var(--tinta); cursor: pointer;
}

/* ---------- Portada ---------- */
.portada {
    position: relative; overflow: hidden;
    background:
        radial-gradient(60% 80% at 85% 20%, rgba(14, 139, 163, .13), transparent 70%),
        radial-gradient(40% 60% at 5% 90%, rgba(140, 189, 63, .12), transparent 70%),
        var(--fondo);
    padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(5rem, 9vw, 7.5rem);
}
.portada-grilla { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.portada-bajada { font-size: 1.2rem; color: var(--tinta-suave); max-width: 34rem; margin: 1.3rem 0 0; }

.pastilla {
    display: inline-flex; align-items: center; gap: .5rem;
    background: #fff; border: 1px solid var(--borde); color: var(--naranja-oscuro);
    font-weight: 700; font-size: .92rem; padding: .4rem .95rem; border-radius: 999px;
    margin-bottom: 1.3rem; box-shadow: var(--sombra);
}

.portada-datos {
    list-style: none; padding: 0; margin: 2rem 0 0;
    display: flex; flex-wrap: wrap; gap: .5rem 1.6rem;
    color: var(--tinta-suave); font-size: .95rem;
}
.portada-datos i { color: var(--turquesa); margin-right: .3rem; }

.portada-arte { display: grid; place-items: center; }
.portada-logo {
    width: min(100%, 430px); aspect-ratio: 1 / 1; border-radius: 50%;
    background: #fff; display: grid; place-items: center;
    box-shadow: var(--sombra), 0 0 0 14px rgba(255, 255, 255, .6);
}
/* Igual que en la cabecera: se muestra solo el cerebro del logo. */
.portada-logo::before {
    content: ""; width: 80%; aspect-ratio: 84 / 64;
    background: url("../img/logo-redes.webp") no-repeat 50% 20% / 128% auto;
}
.portada-foto {
    width: 100%; aspect-ratio: 4 / 4.2; object-fit: cover;
    border-radius: 42% 58% 55% 45% / 48% 44% 56% 52%;
    box-shadow: var(--sombra);
}

/* Las "redes" del logo, como cierre de la portada. */
.portada-redes { position: absolute; left: 0; bottom: 0; width: 100%; height: clamp(60px, 9vw, 120px); }
.portada-redes path { fill: none; stroke-width: 3; stroke-linecap: round; opacity: .75; }

/* ---------- Bloques ---------- */
.bloque { padding: clamp(3rem, 7vw, 5.5rem) 0; }
.bloque-tinte { background: var(--turquesa-suave); }
.bloque-oscuro { background: var(--turquesa-noche); color: #e9f3f5; }
.bloque-oscuro h2 { color: #fff; }
.bloque-oscuro .sobretitulo { color: var(--ambar); }

.bloque-cabecera { max-width: 44rem; margin-bottom: 2.4rem; }
.bloque-mas { margin: 2.2rem 0 0; }

.sobretitulo {
    font-size: .82rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: var(--naranja-oscuro); margin: 0 0 .7rem;
}
.sobretitulo a { color: inherit; text-decoration: none; }
.sobretitulo a:hover { text-decoration: underline; }

.dos-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }

.prosa { color: var(--tinta-suave); margin: 1.2rem 0 1.4rem; }
.prosa p:last-child { margin-bottom: 0; }
.prosa-grande { font-size: 1.12rem; color: var(--tinta); margin-top: 0; }
.prosa-grande .foto-redonda { margin-bottom: 1.8rem; }

.foto-redonda { width: 100%; border-radius: var(--radio); box-shadow: var(--sombra); }

.vacio { color: var(--tinta-suave); font-size: 1.1rem; }

/* Tonos de los iconos (los cuatro colores del logo) */
.tono-1 { --tono: var(--turquesa); }
.tono-2 { --tono: var(--verde); }
.tono-3 { --tono: var(--naranja); }
.tono-4 { --tono: var(--ambar); }

/* ---------- Servicios ---------- */
.grilla-servicios { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.2rem; }

.servicio {
    display: flex; flex-direction: column;
    background: #fff; border: 1px solid var(--borde); border-radius: var(--radio);
    padding: 1.6rem; text-decoration: none; color: var(--tinta);
    transition: transform .2s, box-shadow .2s, border-color .2s;
}
.servicio:hover { transform: translateY(-4px); box-shadow: var(--sombra); border-color: transparent; }
.servicio h3 { margin: 1.1rem 0 .5rem; }
.servicio p { color: var(--tinta-suave); font-size: .97rem; margin: 0 0 1.2rem; }
.servicio-mas { margin-top: auto; font-weight: 600; font-size: .93rem; color: var(--turquesa-oscuro); display: inline-flex; gap: .4rem; align-items: center; }
.servicio-mas i { transition: transform .18s; }
.servicio:hover .servicio-mas i { transform: translateX(4px); }

.servicio-icono, .pilar-icono {
    flex: none; display: grid; place-items: center;
    width: 54px; height: 54px; border-radius: 16px; font-size: 1.5rem;
    color: var(--tono); background: color-mix(in srgb, var(--tono) 14%, #fff);
}

/* ---------- Pilares ---------- */
.pilares { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.pilares li {
    display: flex; gap: 1.1rem; align-items: flex-start;
    background: #fff; border-radius: var(--radio); padding: 1.3rem 1.4rem;
}
.pilares h3 { font-size: 1.15rem; margin-bottom: .3rem; }
.pilares p { margin: 0; color: var(--tinta-suave); font-size: .97rem; }

/* ---------- Equipo ---------- */
.grilla-equipo { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 2rem 1.4rem; }
.grilla-equipo-detalle { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

.profesional { text-align: center; }
.profesional-foto {
    width: 132px; height: 132px; border-radius: 50%; object-fit: cover;
    margin: 0 auto 1rem; box-shadow: 0 0 0 5px #fff, var(--sombra);
}
.profesional-iniciales {
    display: grid; place-items: center;
    background: var(--turquesa-suave); color: var(--turquesa-oscuro);
    font-family: var(--fuente-titulo); font-size: 2.4rem; font-weight: 600;
}
.profesional h3 { font-size: 1.12rem; }
.profesional-especialidad { margin: .25rem 0 0; color: var(--naranja-oscuro); font-weight: 600; font-size: .93rem; }
.profesional-matricula { margin: .1rem 0 0; color: var(--tinta-suave); font-size: .85rem; }
.profesional-bio { margin-top: .9rem; color: var(--tinta-suave); font-size: .95rem; text-align: center; }

/* ---------- Testimonios ---------- */
.grilla-testimonios { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 1.2rem; }
.testimonio { margin: 0; background: #fff; border-radius: var(--radio); padding: 1.6rem; }
.testimonio > i { font-size: 2rem; color: var(--verde); line-height: 1; }
.testimonio blockquote { margin: .4rem 0 1rem; color: var(--tinta); }
.testimonio blockquote p:last-child { margin: 0; }
.testimonio figcaption { font-weight: 700; color: var(--turquesa-oscuro); }

/* ---------- Novedades ---------- */
.grilla-novedades { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 1.2rem; }
.novedad {
    display: flex; flex-direction: column; overflow: hidden;
    background: #fff; border: 1px solid var(--borde); border-radius: var(--radio);
    text-decoration: none; color: var(--tinta);
    transition: transform .2s, box-shadow .2s;
}
.novedad:hover { transform: translateY(-4px); box-shadow: var(--sombra); }
.novedad-imagen { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.novedad-cuerpo { padding: 1.5rem; border-top: 4px solid var(--turquesa-suave); }
.novedad time { font-size: .83rem; font-weight: 600; color: var(--naranja-oscuro); }
.novedad h3 { margin: .45rem 0 .5rem; }
.novedad p { margin: 0; color: var(--tinta-suave); font-size: .97rem; }

/* ---------- Ubicación ---------- */
.ubicacion { align-items: center; }
.ubicacion-datos { list-style: none; padding: 0; margin: 1.6rem 0 0; display: grid; gap: .9rem; }
.ubicacion-datos li { display: flex; gap: .8rem; align-items: flex-start; }
.ubicacion-datos i { color: var(--ambar); font-size: 1.2rem; margin-top: .1rem; }

.mapa { width: 100%; height: 360px; border: 0; border-radius: var(--radio); display: block; }
.mapa-ancho .mapa { border-radius: 0; height: 420px; }

/* ---------- Páginas internas ---------- */
.encabezado-pagina {
    background:
        radial-gradient(50% 120% at 90% 0%, rgba(14, 139, 163, .14), transparent 70%),
        var(--turquesa-suave);
    padding: clamp(2.5rem, 6vw, 4.5rem) 0;
}
.encabezado-pagina h1 { font-size: clamp(2rem, 4vw, 3rem); max-width: 22ch; }
.encabezado-bajada { font-size: 1.15rem; color: var(--tinta-suave); max-width: 40rem; margin: 1rem 0 0; }
.encabezado-centrado { text-align: center; min-height: 60vh; display: grid; align-items: center; }
.encabezado-centrado h1, .encabezado-centrado .encabezado-bajada { margin-inline: auto; }

.cita {
    background: #fff; border-left: 5px solid var(--verde); border-radius: 0 var(--radio) var(--radio) 0;
    padding: 1.6rem 1.8rem; box-shadow: var(--sombra);
}
.foto-redonda + .cita { margin-top: 1.5rem; }
.cita h2 { font-size: 1.3rem; margin-bottom: .7rem; }
.cita p:last-child { margin: 0; }

.grilla-galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; }
.grilla-galeria figure { margin: 0; }
.grilla-galeria img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radio); }
.grilla-galeria figcaption { font-size: .9rem; color: var(--tinta-suave); margin-top: .4rem; }

.detalle { display: grid; grid-template-columns: 1.7fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.detalle-lateral { display: grid; gap: 1.2rem; position: sticky; top: 100px; }

.tarjeta-turno { background: var(--turquesa-noche); color: #e9f3f5; border-radius: var(--radio); padding: 1.7rem; }
.tarjeta-turno h2 { font-size: 1.3rem; color: #fff; margin-bottom: .7rem; }
.tarjeta-turno p { color: var(--ambar); font-weight: 600; }
.tarjeta-turno-ancha { margin-top: 2.5rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.tarjeta-turno-ancha h2 { margin: 0; }

.otros { background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); padding: 1.5rem 1.7rem; }
.otros h2 { font-size: 1.1rem; margin-bottom: .7rem; }
.otros ul { list-style: none; margin: 0; padding: 0; }
.otros li + li { border-top: 1px solid var(--borde); }
.otros a { display: block; padding: .55rem 0; text-decoration: none; color: var(--tinta); font-size: .97rem; }
.otros a:hover { color: var(--turquesa-oscuro); }

/* ---------- Contacto ---------- */
.contacto-datos { list-style: none; margin: 0 0 2rem; padding: 0; display: grid; gap: 1.4rem; }
.contacto-datos li { display: flex; gap: 1rem; align-items: flex-start; }
.contacto-datos h2 { font-family: var(--fuente-texto); font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-suave); font-weight: 700; margin-bottom: .15rem; }
.contacto-datos a, .contacto-datos p { font-size: 1.15rem; font-weight: 600; color: var(--tinta); margin: 0; text-decoration: none; }
.contacto-datos a:hover { color: var(--turquesa-oscuro); text-decoration: underline; }

.formulario-caja { background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); padding: clamp(1.4rem, 3vw, 2.2rem); box-shadow: var(--sombra); scroll-margin-top: 100px; }
.formulario-caja > h2 { font-size: 1.5rem; margin-bottom: 1.3rem; }
.formulario { display: grid; gap: 1.1rem; }
.formulario-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.formulario label { display: grid; gap: .35rem; }
.formulario label > span:first-child { font-size: .9rem; font-weight: 600; }
.formulario input, .formulario textarea {
    font: inherit; color: inherit; width: 100%;
    padding: .75rem .9rem; border: 1.5px solid var(--borde); border-radius: 12px; background: var(--fondo);
}
.formulario input:focus, .formulario textarea:focus { outline: none; border-color: var(--turquesa); background: #fff; box-shadow: 0 0 0 4px rgba(14, 139, 163, .15); }
.formulario textarea { resize: vertical; }
.formulario button { justify-self: start; }
.campo-error { color: #b3261e; font-size: .87rem; }
.campo-error:empty { display: none; }

.aviso { display: flex; gap: .9rem; align-items: flex-start; border-radius: 14px; padding: 1.1rem 1.2rem; margin-bottom: 1.2rem; }
.aviso i { font-size: 1.5rem; line-height: 1.2; }
.aviso p { margin: .2rem 0 0; }
.aviso-ok { background: #eef6e2; color: #3d5a12; margin: 0; }
.aviso-error { background: #fdecea; color: #8c1d18; }

/* ---------- Pie ---------- */
.pie { background: #06313b; color: #b9cfd4; padding: 3.5rem 0 0; font-size: .96rem; }
.pie a { color: #e9f3f5; text-decoration: none; }
.pie a:hover { text-decoration: underline; }
.pie-grilla { display: grid; grid-template-columns: 1.4fr 1fr 1fr .8fr; gap: 2.5rem; }
.pie h2 { font-family: var(--fuente-texto); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ambar); margin-bottom: 1rem; }
.pie-marca { display: inline-flex; align-items: center; gap: .7rem; background: #fff; border-radius: 16px; padding: .6rem 1rem .6rem .7rem; }
.pie-texto { margin: 1.1rem 0 0; max-width: 22rem; }
.pie-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.pie-lista li { display: flex; gap: .7rem; align-items: flex-start; }
.pie-lista i { color: var(--turquesa); margin-top: .15rem; }
.pie-base { border-top: 1px solid rgba(255, 255, 255, .1); margin-top: 3rem; padding: 1.3rem 0; font-size: .87rem; }

/* ---------- WhatsApp flotante ---------- */
.wa-flotante {
    position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 60;
    width: 58px; height: 58px; border-radius: 50%;
    display: grid; place-items: center;
    background: #25d366; color: #fff; font-size: 1.8rem; text-decoration: none;
    box-shadow: 0 8px 24px -6px rgba(0, 0, 0, .35);
    transition: transform .18s;
}
.wa-flotante:hover { transform: scale(1.08); }

/* ---------- Celular y tablet ---------- */
@media (max-width: 920px) {
    .menu-boton { display: block; }
    .menu {
        display: none; position: absolute; left: 0; right: 0; top: 100%;
        flex-direction: column; align-items: stretch; gap: .2rem;
        background: #fff; border-bottom: 1px solid var(--borde);
        padding: .8rem 1.25rem 1.2rem; box-shadow: var(--sombra);
    }
    .menu.abierto { display: flex; }
    .menu > a:not(.boton) { padding: .8rem 1rem; font-size: 1.05rem; }
    .menu-turno { margin: .6rem 0 0; }

    .portada-grilla, .dos-columnas, .detalle { grid-template-columns: 1fr; }
    .portada-arte { order: -1; }
    .portada-logo { width: min(46vw, 210px); box-shadow: var(--sombra), 0 0 0 8px rgba(255, 255, 255, .6); }
    .detalle-lateral { position: static; }
    .pie-grilla { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
    body { font-size: 1rem; }
    .marca-texto small { display: none; }
    .cabecera-fila { min-height: 66px; }
    .acciones .boton-grande { width: 100%; }
    .formulario-fila { grid-template-columns: 1fr; }
    .pie-grilla { grid-template-columns: 1fr; gap: 2rem; }
    .pie { padding-bottom: 4.5rem; }
}

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