/* ════════════════════════════════════════════════════════
   ResiSalud — Hoja de estilos principal
   Archivo: styles.css
   Estructura del proyecto:
     index.html
     styles.css
     fotos/
       portada.jpg       — Hero portada (900×700px)
       nosotros.jpg      — Sección quiénes somos (700×520px)
       equipo.jpg        — Sección por qué elegirnos (700×520px)
       servicio-clinico.jpg      — Tarjeta servicio 1 (600×340px)
       servicio-paliativos.jpg   — Tarjeta servicio 2 (600×340px)
       servicio-social.jpg       — Tarjeta servicio 3 (600×340px)
       comedor.jpg       — Galería (600×450px)
       banos.jpg
       areas-comunes.jpg
       rehabilitacion.jpg
       recepcion.jpg
       habitaciones.jpg
       cocina.jpg
       procedimientos.jpg
     logoresi.png        — Logo navbar (alto máx 44px, fondo transparente)
════════════════════════════════════════════════════════ */

/* ════════════════════════════════
   RESET & VARIABLES
════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --teal:      #0d7a6e;
  --teal-lt:   #13a898;
  --teal-pale: #e8f5f3;
  --teal-mid:  #c2e8e3;
  --white:     #ffffff;
  --off:       #f8fafa;
  --gray:      #5a6a72;
  --gray-lt:   #e2eae8;
  --text:      #1c2e28;
  --navy:      #0e3028;
  --gold:      #b89a52;
}

html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  font-family: 'Nunito', sans-serif;
  background: var(--white);
  color: var(--text);
  line-height: 1.65;
  overflow-x: hidden;
}

/* Texto justificado global para párrafos de contenido */
.nosotros-texto-centrado p,
.solucion-intro p,
.convenio-intro-text p,
.sol-card2-body p,
.conv-card-body p,
.pac-item p,
.ctx-item p,
.pal-text p,
.pal-item p,
.inst-specs .inst-spec span,
.svc-body p,
.val-card p,
.pilar-text p,
.sdesc,
.nec-box p {
  text-align: justify;
  hyphens: auto;
}

/* ════════════════════════════════
   NAV
════════════════════════════════ */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 300;
  background: var(--white);
  border-bottom: 1px solid var(--gray-lt);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 4rem; height: 70px;
  box-shadow: 0 2px 12px rgba(13,122,110,.07);
}
.nav-logo {
  display: flex; align-items: center; gap: .7rem;
  text-decoration: none;
}

/* ─── Logo texto (fallback si no hay imagen) ─── */
.logo-text {
  font-family: 'Lora', serif;
  font-size: 1.6rem; font-weight: 700; letter-spacing: .01em;
  color: var(--navy);
}
.logo-text span { color: var(--teal); }

.nav-links { display: flex; align-items: center; gap: 1rem; list-style: none; }
.nav-links a {
  color: var(--gray); text-decoration: none;
  font-size: .85rem; font-weight: 400;
  letter-spacing: .04em; transition: color .2s;
}
.nav-links a:hover { color: var(--teal); }
.nav-cta {
  background: var(--teal); color: var(--white) !important;
  padding: .5rem 1.3rem; border-radius: 6px;
  font-weight: 500 !important; transition: background .2s !important;
}
.nav-cta:hover { background: var(--teal-lt) !important; color: var(--white) !important; }

/* ─── Hamburger ─── */
.hamburger {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: none; cursor: pointer; padding: 4px;
}
.hamburger span {
  display: block; width: 24px; height: 2px;
  background: var(--navy); border-radius: 2px;
  transition: all .3s;
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ─── Menú móvil ─── */
.mobile-menu {
  display: none; position: fixed; top: 70px; left: 0; right: 0;
  background: var(--white); border-bottom: 1px solid var(--gray-lt);
  padding: 1.5rem 2rem; z-index: 299;
  flex-direction: column; gap: 1rem;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}
.mobile-menu.open { display: flex; }
.mobile-menu a {
  color: var(--gray); text-decoration: none; font-size: .95rem;
  padding: .5rem 0; border-bottom: 1px solid var(--gray-lt);
  transition: color .2s;
}
.mobile-menu a:last-child { border-bottom: none; }
.mobile-menu a:hover { color: var(--teal); }
.mobile-menu .mob-cta {
  background: var(--teal); color: var(--white) !important;
  padding: .7rem 1.3rem; border-radius: 6px;
  text-align: center; border-bottom: none !important;
}

/* ════════════════════════════════
   HERO
   Para usar foto real de fondo:
   Cambia .hero-bg { background: } por:
   background: url('fotos/portada.jpg') center/cover no-repeat;
   y borra (o baja la opacidad de) .hero-overlay
════════════════════════════════ */
.hero {
  margin-top: 70px;
  position: relative; min-height: 88vh;
  display: flex; align-items: center;
  overflow: hidden;
}
.hero-bg {
  position: absolute; inset: 0;
  background: url('portada.png') center/cover no-repeat;
}
.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(255,255,255,.15) 0%, rgba(255,255,255,.55) 50%);
}
.hero-content {
  position: relative; z-index: 1;
  max-width: 800px; margin: 0 auto; padding: 5rem 4rem;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
}
.hero-left { animation: fadeUp .8s ease both; width: 100%; }
.hero-eyebrow {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-size: .75rem; font-weight: 500; letter-spacing: .12em;
  text-transform: uppercase; color:gray (--teal);
  margin-bottom: 1.2rem; width: 100%;
}
.hero-eyebrow::before { content: ''; display: none; }
.hero h1 {
  font-family: 'Lora', serif;
  font-size: clamp(2.4rem, 4vw, 3.8rem);
  font-weight: 700; color: var(--navy); line-height: 1.1;
  text-align: center;
}
.hero h1 em { font-style: italic; color: var(--teal); }
.hero-sub {
  margin-top: 1.2rem; color: var(--text);
  font-size: 1rem; font-weight: 500; max-width: 560px; line-height: 1.7;
  text-align: center;
}
.hero-badges { margin-top: 1.6rem; display: flex; gap: .6rem; flex-wrap: wrap; justify-content: center; }
.badge {
  background: rgba(255,255,255,.85); border: 1px solid var(--teal-mid);
  color: var(--teal); font-size: .75rem; font-weight: 600;
  padding: .3rem .9rem; border-radius: 99px;
}

/* Info datos hero — sin aspecto de botón */
.hero-info {
  margin-top: 1.6rem;
  display: flex; gap: 2rem; flex-wrap: wrap; justify-content: center; align-items: center;
}
.hero-info-item {
  display: flex; align-items: center; gap: .4rem;
  font-size: .85rem; font-weight: 700; color: var(--navy);
  letter-spacing: .02em;
}
.hero-info-item svg {
  width: 16px; height: 16px;
  stroke: var(--teal); fill: none; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0;
}

.hero-cta { margin-top: 2rem; display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; flex-direction: row; align-items: center; }

/* Botones */
.btn-primary {
  background: var(--teal); color: var(--white);
  padding: .85rem 2rem; border-radius: 8px;
  text-decoration: none; font-weight: 500; font-size: .9rem;
  transition: background .2s, transform .15s;
  border: none; cursor: pointer; display: inline-block;
}
.btn-primary:hover { background: var(--teal-lt); transform: translateY(-2px); }
.btn-outline {
  border: 2px solid var(--teal); color: var(--teal);
  padding: .85rem 2rem; border-radius: 8px;
  text-decoration: none; font-weight: 500; font-size: .9rem;
  transition: all .2s; display: inline-block;
}
.btn-outline:hover { background: var(--teal); color: var(--white); }

/* Hero derecha — foto o placeholder */
.hero-right { animation: fadeUp .8s .2s ease both; }
.hero-img-wrap {
  border-radius: 20px; overflow: hidden;
  box-shadow: 0 20px 60px rgba(13,122,110,.18);
  aspect-ratio: 4/3;
}
.hero-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-placeholder {
  width: 100%; height: 100%; min-height: 340px;
  background: var(--teal-pale);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: .8rem; color: var(--teal); font-size: .82rem; text-align: center; padding: 2rem;
  border: 2px dashed var(--teal-mid);
}
.hero-placeholder svg { opacity: .5; }

/* ════════════════════════════════
   INFO BAR
════════════════════════════════ */
.info-bar {
  background: var(--teal);
  display: grid; grid-template-columns: repeat(4,1fr);
}
.ib-item {
  display: flex; align-items: center; gap: .8rem;
  padding: 1rem 1.4rem;
  border-right: 1px solid rgba(255,255,255,.2);
}
.ib-item:last-child { border-right: none; }
.ib-icon {
  width: 34px; height: 34px; flex-shrink: 0;
  background: rgba(255,255,255,.15); border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
}
.ib-icon svg { width: 16px; height: 16px; stroke: var(--white); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ib-label { font-size: .65rem; color: rgba(255,255,255,.65); letter-spacing: .08em; text-transform: uppercase; }
.ib-val   { font-size: .82rem; color: var(--white); font-weight: 500; margin-top: .1rem; white-space: nowrap; }

/* ════════════════════════════════
   SECTION HELPERS
════════════════════════════════ */
section { padding: 6rem 4rem; }
.si { max-width: 1200px; margin: 0 auto; }
.section-head { margin-bottom: 3rem; }
.stag {
  font-size: .72rem; font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; color: var(--teal); margin-bottom: .5rem;
  display: flex; align-items: center; gap: .5rem;
}
.stag::before { content: ''; display: block; width: 16px; height: 2px; background: var(--teal); }
.stitle {
  font-family: 'Lora', serif;
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  color: var(--navy); line-height: 1.15; font-weight: 700;
}
.stitle em { font-style: italic; color: var(--teal); }
.sdesc { color: var(--gray); font-size: .97rem; margin-top: .8rem; max-width: 600px; line-height: 1.7; }

/* Placeholders de imagen genérico */
.img-placeholder {
  width: 100%; height: 100%; min-height: 300px;
  background: var(--teal-pale);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: .7rem; color: var(--teal); font-size: .8rem; text-align: center; padding: 2rem;
  border: 2px dashed var(--teal-mid);
}
.img-placeholder svg { opacity: .45; }

/* ════════════════════════════════
   NOSOTROS
════════════════════════════════ */
#nosotros { background: var(--white); }
.nosotros-texto-centrado {
  max-width: 100%; margin: 0 auto 2.5rem;
  text-align: justify;
}
.nosotros-texto-centrado p {
  color: var(--gray); font-size: .97rem; line-height: 1.8; margin-bottom: 1rem;
  text-align: justify; hyphens: auto;
}
.nosotros-img-ancha {
  border-radius: 16px; overflow: hidden;
  width: 100%;
  box-shadow: 0 12px 40px rgba(13,122,110,.12);
  aspect-ratio: 16/6;
}
.nosotros-img-ancha img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nosotros-img-ancha .img-placeholder { min-height: 300px; }

/* ════════════════════════════════
   SERVICIOS
════════════════════════════════ */
#servicios { background: var(--off); }
.servicios-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; }
.svc-card {
  background: var(--white); border-radius: 14px;
  overflow: hidden; border: 1px solid var(--gray-lt);
  transition: transform .25s, box-shadow .25s;
  display: flex; flex-direction: column;
}
.svc-card:hover { transform: translateY(-5px); box-shadow: 0 16px 40px rgba(13,122,110,.13); }
.svc-img { aspect-ratio: 16/9; overflow: hidden; position: relative; }
.svc-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; }
.svc-card:hover .svc-img img { transform: scale(1.05); }
.svc-placeholder {
  width: 100%; height: 100%; min-height: 180px;
  background: var(--teal-pale);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: .5rem; color: var(--teal); font-size: .75rem; text-align: center;
  border-bottom: 2px dashed var(--teal-mid);
}
.svc-placeholder svg { opacity: .45; }
.svc-body { padding: 1.6rem; flex: 1; display: flex; flex-direction: column; }
.svc-icon-wrap {
  width: 44px; height: 44px; border-radius: 10px;
  background: var(--teal-pale);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1rem;
}
.svc-icon-wrap svg { width: 22px; height: 22px; stroke: var(--teal); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.svc-body h3 { font-family: 'Lora', serif; font-size: 1.25rem; color: var(--navy); margin-bottom: .5rem; }
.svc-body p  { font-size: .88rem; color: var(--gray); line-height: 1.65; flex: 1; }
.svc-link {
  display: inline-flex; align-items: center; gap: .4rem;
  color: var(--teal); font-size: .85rem; font-weight: 500;
  text-decoration: none; margin-top: 1.2rem;
  transition: gap .2s;
}
.svc-link:hover { gap: .7rem; }
.svc-link svg { width: 16px; height: 16px; stroke: var(--teal); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ════════════════════════════════
   CONTEXTO
════════════════════════════════ */
#contexto { background: var(--white); }
.ctx-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; }
.ctx-list { display: flex; flex-direction: column; gap: .9rem; margin-top: 1rem; }
.ctx-item {
  display: flex; gap: 1rem; align-items: flex-start;
  padding: 1rem 1.2rem; background: var(--off);
  border-radius: 10px; border: 1px solid var(--gray-lt);
}
.ctx-num {
  font-family: 'Lora', serif;
  font-size: 1.5rem; font-weight: 700; color: var(--teal);
  line-height: 1; flex-shrink: 0;
}
.ctx-item p { font-size: .88rem; color: var(--gray); line-height: 1.6; }
.ctx-item p strong { color: var(--text); }
.ctx-callout { background: var(--teal); border-radius: 16px; padding: 2.5rem; color: var(--white); }
.ctx-callout h3 { font-family: 'Lora', serif; font-size: 1.6rem; margin-bottom: .8rem; line-height: 1.2; }
.ctx-callout p { font-size: .92rem; color: rgba(255,255,255,.8); line-height: 1.75; }
.ctx-callout p + p { margin-top: .8rem; }
.flujo { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 0; }
.flujo-step {
  display: flex; align-items: center; gap: .8rem;
  padding: .6rem .9rem; background: rgba(255,255,255,.12);
  border-radius: 8px; color: var(--white); font-size: .85rem; font-weight: 500;
  margin-bottom: .4rem;
}
.flujo-step svg { width: 16px; height: 16px; stroke: rgba(255,255,255,.7); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

/* ════════════════════════════════
   POR QUÉ ELEGIRNOS
════════════════════════════════ */
#porque { background: var(--off); }
.porque-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; }
.porque-img {
  border-radius: 16px; overflow: hidden;
  aspect-ratio: 4/3;
  box-shadow: 0 12px 40px rgba(13,122,110,.12);
}
.porque-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pilares { display: flex; flex-direction: column; gap: 1.5rem; margin-top: 1.5rem; }
.pilar { display: flex; gap: 1.2rem; align-items: flex-start; }
.pilar-icon {
  width: 48px; height: 48px; border-radius: 12px; flex-shrink: 0;
  background: var(--teal-pale);
  display: flex; align-items: center; justify-content: center;
}
.pilar-icon svg { width: 22px; height: 22px; stroke: var(--teal); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pilar-text h4 { font-size: 1rem; font-weight: 600; color: var(--navy); margin-bottom: .3rem; }
.pilar-text p  { font-size: .88rem; color: var(--gray); line-height: 1.65; }

/* ════════════════════════════════
   PALIATIVOS
════════════════════════════════ */
#paliativos { background: var(--navy); padding: 5rem 4rem; }
#paliativos .stag  { color: var(--teal-lt); }
#paliativos .stag::before { background: var(--teal-lt); }
#paliativos .stitle { color: var(--white); }
.pal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; }
.pal-text p { color: rgba(255,255,255,.7); font-size: .97rem; line-height: 1.75; margin-bottom: 1rem; }
.pal-quote {
  background: rgba(255,255,255,.07); border-left: 3px solid var(--teal-lt);
  padding: 1.2rem 1.4rem; border-radius: 0 10px 10px 0;
  color: rgba(255,255,255,.8); font-size: .9rem; font-style: italic; line-height: 1.7;
}
.pal-list { display: flex; flex-direction: column; gap: .8rem; }
.pal-item {
  display: flex; gap: .9rem; align-items: flex-start;
  background: rgba(255,255,255,.06); border-radius: 10px;
  padding: 1rem 1.2rem; border: 1px solid rgba(255,255,255,.1);
}
.pal-item svg { width: 18px; height: 18px; stroke: var(--teal-lt); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; margin-top: 2px; }
.pal-item p { color: rgba(255,255,255,.75); font-size: .88rem; line-height: 1.6; }
.pal-item strong { color: rgba(255,255,255,.95); }

/* ════════════════════════════════
   INSTALACIONES
════════════════════════════════ */
#instalaciones { background: var(--white); }
.inst-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; margin-bottom: 3rem; }
.inst-specs { display: flex; flex-direction: column; gap: .7rem; }
.inst-spec { display: flex; align-items: center; gap: .8rem; font-size: .9rem; color: var(--gray); }
.inst-spec svg { width: 16px; height: 16px; stroke: var(--teal); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.inst-spec strong { color: var(--text); }

/* Galería 4×2 */
.galeria { display: grid; grid-template-columns: repeat(4,1fr); gap: .8rem; }
.gal-item {
  border-radius: 10px; overflow: hidden;
  position: relative; aspect-ratio: 4/3;
  background: var(--teal-pale); cursor: pointer;
}
.gal-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s; }
.gal-item:hover img { transform: scale(1.06); }
.gal-ph {
  width: 100%; height: 100%; min-height: 140px;
  background: var(--teal-pale);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: .3rem; color: var(--teal); font-size: .7rem; text-align: center; padding: .5rem;
}
.gal-ph svg { opacity: .4; width: 22px; height: 22px; }
.gal-label {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(transparent, rgba(14,48,40,.7));
  color: var(--white); font-size: .72rem; font-weight: 500;
  padding: .8rem .6rem .4rem; text-align: center;
}

/* ════════════════════════════════
   VALORES
════════════════════════════════ */
#valores { background: var(--off); }
.val-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 1.2rem; }
.val-card {
  background: var(--white); border-radius: 14px;
  padding: 1.8rem 1.2rem; text-align: center;
  border: 1px solid var(--gray-lt);
  border-top: 3px solid var(--teal);
  transition: transform .2s, box-shadow .2s;
}
.val-card:hover { transform: translateY(-4px); box-shadow: 0 10px 28px rgba(13,122,110,.1); }
.val-icon {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--teal-pale);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1rem;
}
.val-icon svg { width: 22px; height: 22px; stroke: var(--teal); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.val-card h4 { font-size: .9rem; font-weight: 600; color: var(--navy); margin-bottom: .4rem; }
.val-card p  { font-size: .8rem; color: var(--gray); line-height: 1.6; }

/* ════════════════════════════════
   CONTACTO
════════════════════════════════ */
#contacto { background: var(--white); }
.cont-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: start; }
.cont-details { display: flex; flex-direction: column; gap: .9rem; margin-top: 1.5rem; }
.cont-item {
  display: flex; align-items: flex-start; gap: 1rem;
  padding: 1rem 1.2rem; background: var(--off);
  border-radius: 10px; border: 1px solid var(--gray-lt);
  text-decoration: none; transition: border-color .2s, box-shadow .2s;
}
a.cont-item:hover { border-color: var(--teal); box-shadow: 0 4px 16px rgba(13,122,110,.1); }
.ci-icon {
  width: 38px; height: 38px; border-radius: 9px; flex-shrink: 0;
  background: var(--teal-pale);
  display: flex; align-items: center; justify-content: center;
}
.ci-icon svg { width: 17px; height: 17px; stroke: var(--teal); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ci-label { font-size: .68rem; color: var(--gray); letter-spacing: .08em; text-transform: uppercase; }
.ci-val   { font-size: .92rem; color: var(--text); font-weight: 500; margin-top: .1rem; white-space: nowrap; }
.horarios { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin-top: .5rem; }
.hor-card { background: var(--teal-pale); border-radius: 10px; padding: 1rem 1.1rem; }
.hor-label { font-size: .68rem; color: var(--teal); letter-spacing: .08em; text-transform: uppercase; font-weight: 600; margin-bottom: .3rem; }
.hor-val   { font-size: .88rem; color: var(--navy); font-weight: 500; line-height: 1.5; }

/* Formulario */
.cont-form {
  background: var(--off); border: 1px solid var(--gray-lt);
  border-radius: 16px; padding: 2.2rem;
}
.cont-form h3 { font-family: 'Lora', serif; color: var(--navy); font-size: 1.4rem; margin-bottom: 1.6rem; }
.fg { margin-bottom: 1rem; }
.fg label {
  display: block; font-size: .72rem; color: var(--gray);
  letter-spacing: .08em; text-transform: uppercase; margin-bottom: .35rem; font-weight: 500;
}
.fg input, .fg textarea, .fg select {
  width: 100%; background: var(--white);
  border: 1px solid var(--gray-lt); border-radius: 8px;
  padding: .7rem 1rem; color: var(--text);
  font-family: 'Nunito', sans-serif; font-size: .9rem; outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.fg input:focus, .fg textarea:focus, .fg select:focus {
  border-color: var(--teal); box-shadow: 0 0 0 3px rgba(13,122,110,.1);
}
.fg textarea { resize: vertical; min-height: 90px; }
.fg-row { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.form-submit {
  width: 100%; background: var(--teal); color: var(--white);
  border: none; padding: .9rem; border-radius: 8px;
  font-family: 'Nunito', sans-serif; font-size: .95rem; font-weight: 500;
  cursor: pointer; transition: background .2s, transform .15s; margin-top: .4rem;
}
.form-submit:hover { background: var(--teal-lt); transform: translateY(-1px); }

/* ════════════════════════════════
   FOOTER
════════════════════════════════ */
footer { background: var(--navy); color: rgba(255,255,255,.5); padding: 3rem 4rem 2rem; }
.footer-grid {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 3rem;
  padding-bottom: 2rem; border-bottom: 1px solid rgba(255,255,255,.1);
}
.footer-brand { display: flex; flex-direction: column; gap: .8rem; }
.footer-logo {
  font-family: 'Lora', serif;
  font-size: 1.5rem; font-weight: 700; color: var(--white);
  text-decoration: none;
}
.footer-logo span { color: var(--teal-lt); }
.footer-brand p { font-size: .85rem; line-height: 1.7; max-width: 280px; }
.footer-col h4 { font-size: .78rem; font-weight: 600; color: var(--white); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 1rem; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: .5rem; }
.footer-col a { color: rgba(255,255,255,.5); text-decoration: none; font-size: .85rem; transition: color .2s; }
.footer-col a:hover { color: var(--teal-lt); }
.footer-bottom {
  max-width: 1200px; margin: 1.5rem auto 0;
  display: flex; align-items: center; justify-content: space-between;
  font-size: .75rem;
}
.footer-bottom a { color: rgba(255,255,255,.35); text-decoration: none; transition: color .2s; }
.footer-bottom a:hover { color: var(--teal-lt); }

/* ════════════════════════════════
   ANIMACIONES
════════════════════════════════ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ════════════════════════════════
   RESPONSIVE
════════════════════════════════ */
@media (max-width: 1024px) {
  .servicios-grid { grid-template-columns: 1fr 1fr; }
  .val-grid { grid-template-columns: repeat(3,1fr); }
  .galeria { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 768px) {
  nav { padding: 0 1.5rem; }
  .nav-links { display: none; }
  .hamburger { display: flex; }
  section { padding: 4rem 1.5rem; }
  #paliativos { padding: 4rem 1.5rem; }
  footer { padding: 2.5rem 1.5rem 1.5rem; }
  .hero-content { grid-template-columns: 1fr; padding: 4rem 1.5rem; gap: 2rem; }
  .hero-right { display: none; }
  .hero-info { gap: .8rem; }
  .hero-cta { flex-direction: column; align-items: center; }
  .hero-cta .btn-primary, .hero-cta .btn-outline { width: 100%; text-align: center; }
  .info-bar { grid-template-columns: 1fr 1fr; }
  .nosotros-grid, .ctx-grid, .porque-grid,
  .pal-grid, .inst-intro, .cont-grid { grid-template-columns: 1fr; gap: 2rem; }
  .servicios-grid { grid-template-columns: 1fr; }
  .val-grid { grid-template-columns: 1fr 1fr; }
  .galeria { grid-template-columns: 1fr 1fr; }
  .fg-row { grid-template-columns: 1fr; }
  .horarios { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .footer-bottom { flex-direction: column; gap: .5rem; text-align: center; }
  /* Contacto móvil */
  .cont-details { width: 100%; overflow: hidden; }
  .cont-item { padding: .8rem; min-width: 0; }
  .ci-icon { width: 32px; height: 32px; flex-shrink: 0; }
  .ci-val { font-size: .85rem; white-space: normal; word-break: break-word; min-width: 0; }
  .ib-val { white-space: normal; font-size: .78rem; }
}

@media (max-width: 480px) {
  .info-bar { grid-template-columns: 1fr; }
  .ib-item { border-right: none; border-bottom: 1px solid rgba(255,255,255,.2); }
  .val-grid { grid-template-columns: 1fr; }
}

/* ════════════════════════════════
   NECESIDAD — flujo 4 pasos
════════════════════════════════ */
#necesidad { background: var(--off); }
.necesidad-flujo {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0; margin: 2rem 0; align-items: center;
}
.nec-step {
  display: flex; flex-direction: column; align-items: center;
  position: relative;
}
.nec-step:not(:last-child)::after {
  content: '→';
  position: absolute; right: -18px; top: 28px;
  font-size: 1.6rem; color: var(--teal); font-weight: 700; z-index: 1;
}
.nec-num {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--teal); color: var(--white);
  font-family: 'Lora', serif; font-size: 1.4rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: .8rem; flex-shrink: 0;
}
.nec-box {
  background: var(--white); border: 1px solid var(--gray-lt);
  border-top: 3px solid var(--teal);
  border-radius: 10px; padding: 1.2rem 1rem;
  text-align: center; width: 100%;
}
.nec-box h4 { font-size: .88rem; font-weight: 700; color: var(--navy); margin-bottom: .4rem; line-height: 1.4; }
.nec-box p  { font-size: .8rem; color: var(--gray); line-height: 1.55; }
.nec-resultado {
  background: var(--teal-pale); border-left: 4px solid var(--teal);
  border-radius: 0 10px 10px 0; padding: 1.2rem 1.8rem;
  margin: 1.5rem 0; font-size: 1rem; color: var(--navy); font-weight: 500;
}
.nec-frase {
  text-align: center; margin-top: 2rem;
  font-family: 'Lora', serif;
  font-size: clamp(1.3rem, 2.5vw, 1.8rem);
  font-weight: 700; color: var(--teal);
  padding: 1.5rem; background: var(--navy); border-radius: 12px;
  color: var(--white);
}
.nec-frase em { color: var(--teal-lt); font-style: normal; }

/* ════════════════════════════════
   SOLUCIÓN — 4 tarjetas
════════════════════════════════ */
#solucion { background: var(--white); }
.solucion-intro {
  border-left: 4px solid var(--teal);
  padding: 1.2rem 1.8rem; background: var(--off);
  border-radius: 0 10px 10px 0;
  margin-bottom: 2.5rem;
}
.solucion-intro p { font-size: .97rem; color: var(--text); line-height: 1.8; }
.solucion-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.2rem; }
.sol-card2 {
  background: var(--white); border: 1px solid var(--gray-lt);
  border-radius: 12px; overflow: hidden;
  transition: transform .2s, box-shadow .2s;
  text-align: center;
}
.sol-card2:hover { transform: translateY(-4px); box-shadow: 0 10px 28px rgba(13,122,110,.12); }
.sol-card2-top {
  background: var(--teal); padding: 1.5rem;
  display: flex; align-items: center; justify-content: center;
}
.sol-card2-top svg { width: 36px; height: 36px; stroke: var(--white); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sol-card2-body { padding: 1.4rem 1rem; }
.sol-card2-body h4 { font-size: .9rem; font-weight: 700; color: var(--teal); margin-bottom: .6rem; }
.sol-card2-body p  { font-size: .82rem; color: var(--gray); line-height: 1.6; }

/* ════════════════════════════════
   CONVENIO
════════════════════════════════ */
#convenio { background: var(--off); }
.convenio-intro {
  border-left: 4px solid var(--teal);
  padding: 1.4rem 1.8rem; background: var(--white);
  border-radius: 0 10px 10px 0;
  margin-bottom: 2.5rem;
  display: flex; gap: 1.2rem; align-items: flex-start;
}
.convenio-intro-icon {
  width: 48px; height: 48px; border-radius: 10px;
  background: var(--teal-pale); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.convenio-intro-icon svg { width: 24px; height: 24px; stroke: var(--teal); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.convenio-intro-text h3 { font-family: 'Lora', serif; font-size: 1.1rem; color: var(--navy); margin-bottom: .5rem; }
.convenio-intro-text p  { font-size: .92rem; color: var(--gray); line-height: 1.75; }
.convenio-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.2rem; }
.conv-card {
  background: var(--white); border: 1px solid var(--gray-lt);
  border-radius: 12px; overflow: hidden; text-align: center;
  transition: transform .2s, box-shadow .2s;
}
.conv-card:hover { transform: translateY(-4px); box-shadow: 0 10px 28px rgba(13,122,110,.12); }
.conv-card-top {
  background: var(--teal); padding: 1.4rem;
  display: flex; align-items: center; justify-content: center;
}
.conv-card-top svg { width: 34px; height: 34px; stroke: var(--white); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.conv-card-body { padding: 1.2rem 1rem; }
.conv-card-body h4 { font-size: .9rem; font-weight: 700; color: var(--teal); margin-bottom: .5rem; }
.conv-card-body p  { font-size: .82rem; color: var(--gray); line-height: 1.6; }
.convenio-cta {
  margin-top: 2rem; background: var(--navy);
  border-radius: 10px; padding: 1.1rem 1.8rem;
  text-align: center; color: var(--white);
  font-size: .9rem; font-weight: 600;
}

/* ════════════════════════════════
   PACIENTES DERIVABLES
════════════════════════════════ */
.pacientes-sello {
  background: var(--navy); border-radius: 10px;
  padding: 1.1rem 1.8rem; margin-bottom: 2rem;
  display: flex; gap: 1rem; align-items: center;
}
.pacientes-sello svg { width: 28px; height: 28px; fill: var(--teal-lt); flex-shrink: 0; }
.pacientes-sello p { color: var(--white); font-size: .92rem; line-height: 1.6; }
.pacientes-base {
  font-size: .82rem; font-weight: 700; color: var(--teal);
  letter-spacing: .06em; text-transform: uppercase;
  margin-bottom: 1.2rem; padding: .5rem 0;
  border-bottom: 2px solid var(--teal-pale);
}
.pacientes-grid {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem;
  margin-bottom: 1.5rem;
}
.pac-item {
  border-left: 3px solid var(--teal);
  padding: .9rem 1.1rem; background: var(--off);
  border-radius: 0 8px 8px 0;
}
.pac-item h4 { font-size: .85rem; font-weight: 700; color: var(--teal); margin-bottom: .3rem; line-height: 1.4; }
.pac-item p  { font-size: .8rem; color: var(--gray); line-height: 1.55; }
.pacientes-nota {
  text-align: center; font-style: italic;
  font-size: .85rem; color: var(--gray);
  background: var(--teal-pale); border-radius: 8px;
  padding: .8rem 1.5rem;
}

/* Responsive nuevas secciones */
@media (max-width: 1024px) {
  .necesidad-flujo { grid-template-columns: repeat(2,1fr); gap: 1.5rem; }
  .nec-step:not(:last-child)::after { display: none; }
  .solucion-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 768px) {
  .necesidad-flujo { grid-template-columns: 1fr 1fr; gap: 1rem; }
  .solucion-grid { grid-template-columns: 1fr 1fr; }
  .convenio-grid { grid-template-columns: 1fr; }
  .pacientes-grid { grid-template-columns: 1fr; }
  .convenio-intro { flex-direction: column; }
}
@media (max-width: 480px) {
  .necesidad-flujo { grid-template-columns: 1fr; }
  .solucion-grid { grid-template-columns: 1fr; }
}

/* ════════════════════════════════
   BOTÓN FLOTANTE — VOLVER AL INICIO
════════════════════════════════ */
.btn-top {
  position: fixed; bottom: 2rem; right: 2rem; z-index: 500;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--teal); color: var(--white);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(13,122,110,.35);
  text-decoration: none;
  opacity: 0; pointer-events: none;
  transform: translateY(12px);
  transition: opacity .3s, transform .3s, background .2s;
}
.btn-top.visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.btn-top:hover { background: var(--teal-lt); transform: translateY(-3px); }
.btn-top svg { width: 22px; height: 22px; }