/* Capa "cálida": hace la web más cercana y amable. Para volver atrás, borra el enlace a calidez.css en web_layout.php. */
:root { --carbon:#3B2622; --oscuro:#2C1B18; --tinta:#2F2320; --gris:#6A5A53; --crema:#FFF6EA; --linea:#F0E2D0; }
html { scroll-behavior: smooth; }
body { background: #FFFCF7; -webkit-font-smoothing: antialiased; }

/* Cinta superior y menú */
.franja { background: linear-gradient(90deg, #4A2924, #6B2A25); }
header.topbar { background: rgba(255,252,247,.94); backdrop-filter: blur(8px); border-bottom-color: var(--linea); }
nav.menu a:not(.boton) { border-radius: 999px; padding: 8px 12px; transition: background .2s, color .2s; }
nav.menu a:not(.boton):hover { background: #FFE9C2; }

/* Portada */
.hero { background: radial-gradient(1000px 520px at 85% -10%, rgba(255,194,14,.28), transparent 60%), radial-gradient(800px 500px at -10% 110%, rgba(215,25,32,.30), transparent 60%), linear-gradient(135deg, #4D2B25 0%, #6A2D27 55%, #7A3328 100%); }
.hero-txt h1 { text-shadow: 0 2px 0 rgba(0,0,0,.08); }
.hero-txt .tag { color: #FFE9C2; }
.hero-txt .sub { color: #F6E4D4; }
.hero-pill { background: rgba(255,233,194,.16); color: #FFF1DA; }
.hero-mini { color: #FBE9D7; }
.arco { background: #5A3A33; border-radius: 36px; box-shadow: 0 30px 60px -26px rgba(40,10,5,.75), 0 0 0 6px rgba(255,233,194,.18); }

/* Botones más amables */
.boton { border-radius: 999px; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.boton:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -12px rgba(120,30,20,.55); }
.boton--rojo { background: linear-gradient(180deg, #E0242B, #C9161D); }
.boton--claro { border-color: transparent; background: #fff; }

/* Buscador */
.buscador { border-radius: 30px; box-shadow: 0 26px 60px -20px rgba(80,25,15,.35); border: 1px solid #F7E7D2; }

/* Secciones y tarjetas */
.seccion--crema { background: linear-gradient(180deg, #FFF6EA, #FFF9F1); }
.seccion .eyebrow { background: #FFE3DE; color: #B3141A; }
.unico, .cat, .otro-srv, .prox-card, .nos-card, .nos-val div, .faq details, .esp-card, .tarjeta { border-radius: 28px; }
.unico, .nos-card { box-shadow: 0 18px 36px -26px rgba(120,60,20,.45); }
.unico { background: #FFF6EA; border: 1px solid #F5E2C8; }
.unico:hover, .nos-card:hover, .otro-srv:hover { transform: translateY(-4px); transition: transform .25s ease, box-shadow .25s ease; box-shadow: 0 24px 44px -24px rgba(120,60,20,.5); }
.prox-card { background: #FFFDF8; border-color: #F2D9B3; }
.faq details { background: #FFF6EA; border: 1px solid #F5E2C8; }
.faq details[open] { background: #fff; }
.chip { border-color: #F0DCC0; background: #FFFDF8; }
.chip:hover { background: #FFE9C2; border-color: #FFC20E; }

/* Quiénes somos: calidez */
#nosotros .porque-foto { border-radius: 40px 40px 40px 120px; box-shadow: 18px 18px 0 #FFD65C, 0 30px 50px -30px rgba(80,25,15,.5); }
#nosotros .nos-card:nth-child(1) { background: #FFEDE8; border-color: #FAD5CC; }
#nosotros .nos-card:nth-child(2) { background: #FFF4D2; border-color: #F6E2A0; }
#nosotros .nos-card .ib { background: #fff !important; box-shadow: 0 8px 18px -10px rgba(0,0,0,.3); }
#nosotros .nos-val div { background: #fff; border: 1px solid #F5E2C8; }
#nosotros .nos-val div:nth-child(odd) { background: #FFFBF3; }
.nos-saludo { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid #F5E2C8; border-radius: 999px; padding: 8px 16px; font-weight: 700; font-size: 15px; margin: 0 0 14px; color: #8A4A1E; }

/* Franjas oscuras → marrón cálido */
.seccion--oscura { background: linear-gradient(135deg, #4A2924, #3B2622); }
.prox-invita { background: linear-gradient(135deg, #5A2E27, #3B2622) !important; border-radius: 28px; }
footer.piefoot, footer.pf { background: linear-gradient(180deg, #3B2622, #2C1B18); }
footer.piefoot, footer.piefoot a, footer.pf, footer.pf a { color: #E7D3C2; }

/* Cori y llamadas a la acción */
.chat { border-radius: 28px; box-shadow: 0 24px 50px -28px rgba(80,25,15,.5); }
.wa-flota { box-shadow: 0 14px 30px -10px rgba(26,122,63,.6); }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .boton:hover, .unico:hover, .nos-card:hover { transform: none; } }

/* Que el botón de WhatsApp no tape «Volver arriba» */
.pf-base .pf-w { padding-right: 100px; }

/* Pie de página compacto */
.pf { font-size: 14px; }
.pf-cta .pf-w { padding-top: 20px; padding-bottom: 20px; }
.pf-cta h3 { font-size: clamp(1.1rem, 2vw, 1.4rem); }
.pf-cta p { margin-top: 2px; font-size: 14px; }
.pf-cta .acc a { padding: 10px 18px; font-size: 14px; }
.pf-main { padding: 28px 28px 12px; gap: 24px; }
.pf-marca b { font-size: 22px; }
.pf-marca .lema { font-size: 16px; margin: 0 0 10px; }
.pf-marca p { display: none; }
.pf-redes a { width: 34px; height: 34px; }
.pf h4 { margin: 0 0 8px; font-size: 12px; }
.pf ul { gap: 5px; }
.pf-cards { gap: 12px; padding-bottom: 18px; }
.pf-card { padding: 12px 16px; gap: 5px; border-radius: 14px; font-size: 13.5px; }
.pf-card h4 { margin: 0; }
.pf-card .ref { font-size: 12px; padding-left: 24px; }
.pf-wa { padding: 6px 12px; font-size: 13px; margin-top: 2px; }
.pf-base .pf-w { padding-top: 12px; padding-bottom: 14px; font-size: 12.5px; }
.pf-sube { padding: 6px 12px; font-size: 12px; }
@media (max-width: 760px) { .pf-main { padding-top: 24px; } .pf-base { padding-bottom: 64px; } }

/* Redes sociales destacadas */
.pf-sigue { display: block; margin: 14px 0 8px; color: #fff; font-weight: 700; font-size: 15px; }
.pf-redes { gap: 8px; }
.pf-redes a { width: auto; height: auto; padding: 8px 14px 8px 11px; border-radius: 999px; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13.5px; color: #fff; }
.pf-redes a::after { content: attr(aria-label); }
.pf-redes a[aria-label="Facebook"] { background: #1877F2; }
.pf-redes a[aria-label="Instagram"] { background: linear-gradient(45deg, #F9A03F, #E1306C 55%, #8A3AB9); }
.pf-redes a[aria-label="TikTok"] { background: #111; box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }
.pf-redes a[aria-label="WhatsApp"] { background: #1A7A3F; }
.pf-redes a:hover { color: #fff; filter: brightness(1.12); transform: translateY(-3px); }

/* Menos espacio entre secciones */
.seccion { padding: 40px 0; }
#cori.seccion { padding-top: 12px; }
#nosotros .nos-grid { margin-top: 22px; }
.unico { padding-bottom: 18px; }
@media (max-width: 760px) { .seccion { padding: 30px 0; } }

/* Fondos en franjas con los colores del Policlínico (rojo, naranja, amarillo, dorado, marrón) */
#nosotros { --c1:#D71920; --c2:#F07B1F; --c3:#FFC20E; --c4:#E0A526; --c5:#6B2A25; }
#nosotros .nos-card, #nosotros .nos-val div { position: relative; overflow: hidden; }
#nosotros .nos-card::before, #nosotros .nos-val div::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8px; background: var(--fr); }
#nosotros .nos-card { padding-top: 36px; }
#nosotros .nos-val div { padding-top: 26px; }
#nosotros .nos-card:nth-child(1) { --fr: var(--c1); background: #FFE7E4; border-color: #F8C9C4; }
#nosotros .nos-card:nth-child(2) { --fr: var(--c3); background: #FFF1C2; border-color: #F6DF92; }
#nosotros .nos-val div:nth-child(1) { --fr: var(--c1); background: #FFEDEA; }
#nosotros .nos-val div:nth-child(2) { --fr: var(--c2); background: #FFEBD8; }
#nosotros .nos-val div:nth-child(3) { --fr: var(--c3); background: #FFF4CF; }
#nosotros .nos-val div:nth-child(4) { --fr: var(--c4); background: #FBEFD9; }
#nosotros .nos-val div:nth-child(5) { --fr: var(--c5); background: #F3E4DF; }
#nosotros .nos-val .tic { background: var(--fr); color: #fff; }
#nosotros .nos-val div:nth-child(3) .tic { color: var(--tinta); }
#nosotros .nos-grid { position: relative; padding-top: 24px; margin-top: 12px; }
#nosotros .nos-grid::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 10px; border-radius: 999px; background: linear-gradient(90deg, var(--c1) 0 20%, var(--c2) 20% 40%, var(--c3) 40% 60%, var(--c4) 60% 80%, var(--c5) 80% 100%); }

/* Servicios: estructura más clara (pestañas arriba, contenido en un panel) */
.srv-sub { margin: 0; color: var(--gris); font-size: 16px; }
.cats { grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 18px; }
.cat { min-height: 84px; }
.cat .ct em { min-height: 2.6em; }
.srv-grid, .panel-esp { background: #fff; border: 1px solid #F0DFC8; border-radius: 28px; padding: 22px; box-shadow: 0 22px 40px -32px rgba(120,60,20,.5); }
.srv-grid { grid-template-columns: repeat(3, 1fr); align-items: stretch; gap: 14px; }
.srv-grid .srv-item { height: 100%; background: #FFFBF3; border-color: #F3E6D3; }
.srv-grid .srv-item:hover { background: #fff; }
.srv-item .tx small { min-height: 2.8em; }
.panel-esp { padding: 24px; }
@media (max-width: 900px) { .srv-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .srv-grid { grid-template-columns: 1fr; padding: 14px; } .panel-esp { padding: 16px; } }

/* Fondo cálido con formas suaves que se mueven despacio */
:root { --crema: #FFF1DE; }
body { background: #FFF4E4; }
.seccion { position: relative; overflow: hidden; isolation: isolate; }
.seccion::before, .seccion::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; z-index: -1; }
.seccion::before { width: 560px; height: 560px; right: -170px; top: -190px; background: radial-gradient(circle, rgba(255,194,14,.26), rgba(255,194,14,0) 66%); animation: pchFlota 16s ease-in-out infinite alternate; }
.seccion::after { width: 520px; height: 520px; left: -190px; bottom: -230px; background: radial-gradient(circle, rgba(215,25,32,.11), rgba(215,25,32,0) 68%); animation: pchFlota 20s ease-in-out infinite alternate-reverse; }
.seccion--crema { background: radial-gradient(rgba(190,95,30,.075) 1.4px, transparent 1.6px) 0 0 / 28px 28px, linear-gradient(180deg, #FFEBD3, #FFF3E2); }
.seccion[style*="amarillo"]::before { background: radial-gradient(circle, rgba(255,255,255,.45), rgba(255,255,255,0) 66%); }
.seccion[style*="amarillo"]::after { background: radial-gradient(circle, rgba(215,25,32,.16), rgba(215,25,32,0) 68%); }
.seccion--oscura::before { background: radial-gradient(circle, rgba(255,194,14,.20), rgba(255,194,14,0) 66%); }
@keyframes pchFlota { from { transform: translate(0, 0) scale(1); } to { transform: translate(-50px, 40px) scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .seccion::before, .seccion::after { animation: none; } }
@media (max-width: 700px) { .seccion::before { width: 360px; height: 360px; } .seccion::after { width: 320px; height: 320px; } }

/* Portada clara: la foto del carrusel resalta sobre un fondo luminoso */
.hero { background: radial-gradient(900px 480px at 90% 0%, rgba(255,194,14,.40), transparent 62%), radial-gradient(700px 420px at 0% 100%, rgba(215,25,32,.14), transparent 62%), linear-gradient(135deg, #FFF8EC 0%, #FFEACB 55%, #FFE2C4 100%); color: var(--tinta); }
.hero::before { background: radial-gradient(circle, rgba(255,194,14,.35), rgba(255,194,14,0) 68%); }
.hero::after { background: radial-gradient(circle, rgba(215,25,32,.16), rgba(215,25,32,0) 70%); }
.hero-txt h1 { color: var(--tinta); text-shadow: none; }
.hero-txt h1 .cursiva { color: var(--rojo) !important; }
.hero-txt .tag { color: #8A3A12; }
.hero-txt .sub { color: #5A4A44; }
.hero-pill { background: #fff; color: #5A4A44; box-shadow: 0 8px 18px -12px rgba(120,60,20,.5); }
.hero-mini { color: #5A4A44; }
.hero-mini svg { color: var(--rojo); }
.arco { background: #2E1F1B; border: 8px solid #fff; border-radius: 40px; box-shadow: 0 34px 60px -30px rgba(90,40,10,.55), 0 0 0 1px #F2DEC3; }
.boton--claro { border: 2px solid var(--tinta); background: transparent; color: var(--tinta); }
.boton--claro:hover { background: var(--tinta); color: #fff; }

/* Botón Cómo llegar en portada */
.hero-mini a.hero-mapa { display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; border-radius: 999px; background: #fff; color: var(--tinta); border: 2px solid var(--tinta); font-weight: 700; text-decoration: none; box-shadow: 0 8px 18px -12px rgba(0,0,0,.35); transition: background .2s ease, color .2s ease, transform .2s ease; }
.hero-mini a.hero-mapa svg { color: var(--rojo); transition: color .2s ease; }
.hero-mini a.hero-mapa b { color: var(--rojo); font-weight: 800; transition: color .2s ease; }
.hero-mini a.hero-mapa:hover { background: var(--rojo); border-color: var(--rojo); color: #fff; transform: translateY(-2px); }
.hero-mini a.hero-mapa:hover svg, .hero-mini a.hero-mapa:hover b { color: #fff; }


/* Titular de portada */
.hero-txt h1 { font-size: clamp(36px, 4.4vw, 66px); line-height: 1.08; text-wrap: balance; }


/* Etiquetas de servicios en portada */
.hero-chips { list-style: none; margin: 14px 0 26px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.hero-chips li { padding: 7px 14px; border-radius: 999px; background: #fff; border: 1px solid #F0DCC2; color: var(--tinta); font-size: 14px; font-weight: 700; box-shadow: 0 6px 14px -10px rgba(120,60,20,.5); }
.hero-chips li:last-child { background: transparent; border-style: dashed; color: var(--gris); box-shadow: none; }
.hero-txt .sub { margin-bottom: 0; }


/* Marca sobre el titular */
.hero-marca { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 0 0 16px; }
.hero-marca b { font-size: 14px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--rojo); padding-left: 14px; border-left: 4px solid var(--amarillo); line-height: 1.2; }
.hero-marca span { font-size: 22px; color: #8A3A12; line-height: 1.2; }
@media (max-width: 560px) { .hero-marca span { font-size: 19px; } }


/* Titular grande */
.hero-txt h1 { font-size: clamp(2.8rem, 6.6vw, 6rem); line-height: 1.02; text-wrap: initial; }
.hero-marca { margin-bottom: 18px; }
.hero-txt .sub { font-size: 20px; margin: 20px 0 28px; max-width: 520px; }
.hero-mini { margin-top: 22px; }


/* Jerarquía de portada */
.hero-marca { display: block; margin: 0 0 22px; }
.hero-marca b { display: flex; flex-direction: column-reverse; align-items: flex-start; padding: 0; border: 0; text-transform: uppercase; letter-spacing: .01em; font-size: clamp(3.2rem, 7.4vw, 6.6rem); font-weight: 900; line-height: .95; color: var(--rojo); }
.hero-marca b small { font-size: clamp(1rem, 1.9vw, 1.6rem); font-weight: 800; letter-spacing: .34em; color: var(--tinta); margin-top: 10px; padding-left: 4px; }
.hero-marca span { display: block; margin-top: 14px; font-size: clamp(1.4rem, 2.6vw, 2.1rem); color: #8A3A12; line-height: 1.2; }
.hero-txt h1 { font-size: clamp(1.9rem, 3.6vw, 3.2rem); line-height: 1.08; margin-top: 6px; }
.hero-txt .sub { margin: 16px 0 26px; }


/* Equilibrio de portada */
.hero-txt { padding-top: 24px; }
.hero-marca { margin: 0 0 18px; }
.hero-marca b { flex-direction: row-reverse; align-items: baseline; justify-content: flex-end; gap: 12px; font-size: clamp(1.15rem, 1.7vw, 1.5rem); font-weight: 800; letter-spacing: .14em; line-height: 1.2; padding-left: 14px; border-left: 4px solid var(--amarillo); }
.hero-marca b small { margin: 0; padding: 0; font-size: .62em; font-weight: 700; letter-spacing: .26em; }
.hero-marca span { margin: 8px 0 0 18px; font-size: clamp(1.1rem, 1.6vw, 1.4rem); }
.hero-txt h1 { font-size: clamp(2.4rem, 4.4vw, 3.9rem); line-height: 1.06; margin-top: 0; }
.hero-txt .sub { font-size: 19px; margin: 18px 0 26px; }
@media (max-width: 560px) { .hero-marca b { flex-wrap: wrap; letter-spacing: .1em; } }


/* Buscador en primera vista */
.hero .in { padding-top: 14px; gap: 28px; }
.hero-txt { padding-bottom: 64px; padding-top: 8px; }
.hero-marca { margin-bottom: 12px; }
.hero-txt .sub { margin: 12px 0 20px; }
.hero-mini { margin-top: 14px; }
.hero-mini a.hero-mapa { padding: 8px 16px; font-size: 14px; }
.urg { margin-bottom: 14px; }
.arco { height: clamp(230px, 24vw, 330px); margin-bottom: 28px; }
@media (max-width: 900px) { .hero-txt { padding-bottom: 8px; } .arco { height: 210px; } .hero-img { margin-bottom: 56px; } .hero-marca span { margin-left: 0; } }