/* Grupo CYFAC Médica - estilos. Lee DESIGN.md antes de modificar. */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-exterior);
  color: var(--color-texto);
  font-family: var(--font-texto);
  font-size: var(--fs-16);
  line-height: var(--lh-texto);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--peso-titulo);
  letter-spacing: -0.02em;
  line-height: 1.12;
}
svg { display: block; }

:focus-visible {
  outline: 2px solid var(--color-foco);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip {
  position: absolute;
  left: var(--sp-16);
  top: -60px;
  z-index: 100;
  background: var(--color-texto);
  color: var(--color-exterior);
  padding: var(--sp-8) var(--sp-16);
  border-radius: var(--radio-boton);
  text-decoration: none;
}
.skip:focus { top: var(--sp-16); }

/* ---------- Página a todo lo ancho (sin marco) ---------- */
.marco {
  position: relative;
  background:
    radial-gradient(60% 900px at 0% 0%, rgba(var(--rgb-blanco), .05), transparent 70%) no-repeat,
    linear-gradient(180deg, var(--color-panel-a) 0%, var(--color-panel-b) 22%, var(--color-panel-a) 48%, var(--color-panel-b) 72%, var(--color-panel-a) 100%);
}

.wrap {
  width: 100%;
  max-width: calc(var(--contenido) + 2 * var(--margen));
  margin: 0 auto;
  padding: 0 var(--margen);
}

/* ---------- Botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 26px;
  border-radius: var(--radio-boton);
  background: var(--cyfac-turquesa);
  border: 0;
  cursor: pointer;
  color: var(--color-cta-texto);
  font-family: var(--font-texto);
  font-weight: 600;
  font-size: var(--fs-14);
  text-decoration: none;
  transition: background-color .25s, transform .25s var(--curva);
}
.btn:hover { background: var(--cyfac-verde); transform: translateY(-1px); }
.btn:disabled { opacity: .6; cursor: wait; transform: none; }

.link-flecha {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-13);
  color: var(--color-texto);
  text-decoration: none;
}
.link-flecha svg { width: 18px; transition: transform .35s var(--curva); }
.link-flecha:hover svg { transform: translateX(4px); }

/* ---------- Menú ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  transition: background-color .4s, box-shadow .4s;
}
.nav.scrolled {
  background: rgba(var(--rgb-menu), .88);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--color-borde);
}
.nav-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-24);
  height: 72px;
  padding: 0 max(var(--margen), calc((100% - var(--contenido)) / 2));
}
.nav-logo img { width: 128px; height: auto; }
.nav-logo { transition: opacity .4s, transform .4s var(--curva), visibility 0s; }
.js .nav.en-portada:not(.scrolled) .nav-logo { opacity: 0; visibility: hidden; transform: translateY(-6px); pointer-events: none; transition: opacity .4s, transform .4s var(--curva), visibility 0s .4s; }
.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 48px);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a {
  font-size: var(--fs-13);
  color: var(--color-texto);
  text-decoration: none;
  background: linear-gradient(var(--cyfac-turquesa), var(--cyfac-turquesa)) left bottom / 0% 1px no-repeat;
  padding-bottom: 2px;
  transition: background-size .4s var(--curva);
}
.nav-links a:hover { background-size: 100% 1px; }

.lang { display: inline-flex; gap: 2px; font-size: var(--fs-12); font-weight: 600; }
.lang a, .lang span {
  padding: 4px 8px;
  border-radius: var(--radio-boton);
  text-decoration: none;
  color: var(--color-texto-2);
  line-height: 1.2;
}
.lang [aria-current] { color: var(--color-texto); background: var(--color-tarjeta); }
.lang a:hover { color: var(--color-texto); }

.nav-toggle {
  display: none;
  width: 42px;
  height: 42px;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-boton);
  background: var(--color-tarjeta-2);
  color: var(--color-texto);
  cursor: pointer;
  place-items: center;
}
.nav-toggle span {
  display: block;
  width: 16px;
  height: 1.5px;
  background: currentColor;
  box-shadow: 0 5px 0 currentColor;
  transform: translateY(-2.5px);
}

@media (max-width: 860px) {
  .js .nav-toggle { display: grid; }
  .js .nav-links {
    position: absolute;
    top: 72px;
    left: var(--margen);
    right: var(--margen);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--sp-8);
    background: rgba(var(--rgb-menu), .97);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-tarjeta);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .3s, transform .3s var(--curva), visibility .3s;
  }
  .js .nav.open .nav-links { opacity: 1; visibility: visible; transform: none; }
  .js .nav-links > li > a { display: block; padding: 14px 16px; font-size: var(--fs-16); }
  .js .nav-links li + li { border-top: 1px solid var(--color-borde); }
  .js .nav-links li.lang-li { padding: 12px 10px; }
  html:not(.js) .nav-in { height: auto; padding-top: 14px; padding-bottom: 14px; flex-wrap: wrap; }
  html:not(.js) .nav-links { flex-wrap: wrap; gap: 8px 20px; }
}

/* ---------- Portada: texto a la izquierda, foto de equipo a la derecha ---------- */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: min(88svh, 860px);
  margin-top: -72px;              /* el menú queda encima de la portada */
  padding: 140px max(var(--margen), calc((100% - var(--contenido)) / 2)) 96px;
  overflow: hidden;
  background: var(--color-panel-b);
}
.hero-img { position: absolute; top: 0; bottom: 0; left: 34%; right: 0; z-index: -2; }
.hero-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 55% center; }
.hero-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, var(--color-panel-b) 0%, rgba(var(--rgb-tinta), .55) 22%, rgba(var(--rgb-tinta), 0) 48%),
    linear-gradient(180deg, rgba(var(--rgb-tinta), .55) 0%, transparent 20%, transparent 80%, rgba(var(--rgb-tinta), .4) 100%);
}
.hero-txt { max-width: 560px; }
.hero-logo {
  width: clamp(220px, 24vw, 340px);
  height: auto;
  margin-bottom: var(--sp-40);
}
.hero h1 { font-size: var(--fs-h1); }
.hero h1 .ln { display: block; overflow: hidden; padding-bottom: .06em; }
.hero h1 .ln > span { display: block; }
.hero-sub {
  margin-top: var(--sp-16);
  max-width: 480px;
  font-size: var(--fs-18);
  font-weight: 400;
  color: var(--color-texto);
}
.hero .btn { margin-top: var(--sp-40); min-width: 190px; }


/* Entrada orquestada (solo si JS cargó) */
.js .hero:not(.play) .ln > span { transform: translateY(110%); }
.js .hero:not(.play) .hero-img { transform: scale(1.04); }
.js .hero:not(.play) .hero-fade { opacity: 0; transform: translateY(12px); }
.hero .ln > span { transition: transform .7s var(--curva); }
.hero .ln:nth-child(2) > span { transition-delay: .08s; }
.hero-img { transition: transform 1.6s var(--curva); }
.hero-fade { transition: opacity .5s .15s, transform .5s .15s var(--curva); }

/* ---------- Secciones ---------- */
.sec { padding: var(--seccion) 0; position: relative; }
.sec h2 { font-size: var(--fs-h2); }
.sec-intro {
  margin-top: var(--sp-24);
  max-width: 640px;
  font-size: var(--fs-14);
  color: var(--color-texto-2);
}

/* Lo que hacemos */
#que-hacemos { background: var(--color-panel-a); }
.tarjetas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-16);
  margin-top: var(--sp-64);
}
.tarjeta {
  padding: var(--sp-40) var(--sp-24) var(--sp-40) var(--sp-24);
  border-top: 2px solid var(--cyfac-turquesa);
  border-radius: 0 0 var(--radio-tarjeta) var(--radio-tarjeta);
  background: rgba(var(--rgb-tinta), .78);
}
.tarjeta-ico { width: 40px; height: 40px; color: var(--cyfac-turquesa); }
.tarjeta h3 { margin-top: var(--sp-24); font-size: 1.375rem; }
.tarjeta p { margin-top: var(--sp-8); font-size: var(--fs-16); color: var(--color-texto-2); }

/* Equipo que manejamos: paneles a todo lo ancho */
.paneles {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 2px;
  margin: var(--sp-40) 0 0;
  padding: 0;
  list-style: none;
  background: var(--color-pie);
}
.panel {
  position: relative;
  height: clamp(380px, 34vw, 560px);
  overflow: hidden;
  isolation: isolate;
}
.panel img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--curva);
}
/* Punto de enfoque de cada foto: X para los paneles verticales, Y para las tiras de celular */
.panel:nth-child(1) img { object-position: 40% 65%; } /* dental: piezas de mano y charola */
.panel:nth-child(2) img { object-position: 55% 21%; } /* monitor: pantalla con signos vitales */
.panel:nth-child(3) img { object-position: 50% 21%; } /* lámparas quirúrgicas */
.panel:nth-child(4) img { object-position: 40% 73%; } /* ultrasonido: consola y teclado */
.panel:nth-child(5) img { object-position: 25% 67%; } /* mobiliario: cama y soporte */
.panel:nth-child(6) img { object-position: 50% 21%; } /* estético: pantalla y cabezal */
.panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(var(--rgb-tinta), .78) 0%, rgba(var(--rgb-tinta), .45) 40%, rgba(var(--rgb-tinta), .7) 100%);
  transition: opacity .6s;
}
.panel::after {
  content: "";
  position: absolute;
  left: var(--sp-24);
  bottom: var(--sp-24);
  width: 28px;
  height: 2px;
  background: var(--cyfac-turquesa);
  transition: width .5s var(--curva);
}
.panel h3 {
  position: absolute;
  top: var(--sp-24);
  left: var(--sp-24);
  right: var(--sp-24);
  font-size: clamp(1rem, 0.85rem + 0.4vw, 1.2rem);
  line-height: 1.25;
}
.panel:hover img { transform: scale(1.06); }
.panel:hover::before { opacity: .75; }
.panel:hover::after { width: 56px; }

.equipo-nota { margin-top: var(--sp-24); font-size: var(--fs-16); color: var(--color-texto-2); }
.equipo-nota a { color: var(--cyfac-azul); font-weight: 600; text-underline-offset: 3px; }

/* Contacto: texto a la izquierda, formulario a la derecha */
.contacto {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: var(--sp-64);
  align-items: start;
}
.contacto .sec-intro { font-size: var(--fs-16); }
.form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-24) var(--sp-24);
  padding: var(--sp-40);
  background: var(--claro-fondo-2);
  border: 1px solid var(--claro-borde);
  border-radius: var(--radio-tarjeta);
}
.campo { display: flex; flex-direction: column; gap: var(--sp-8); min-width: 0; }
.campo-ancho { grid-column: 1 / -1; }
.campo label { font-size: var(--fs-14); font-weight: 600; color: var(--color-texto); }
.campo label span { font-weight: 400; color: var(--color-texto-3); }
.campo input,
.campo select,
.campo textarea {
  width: 100%;
  min-height: 46px;
  padding: 10px 14px;
  font: inherit;
  font-size: var(--fs-16);
  color: var(--color-texto);
  background: var(--claro-fondo);
  border: 1px solid rgba(var(--rgb-tinta), .18);
  border-radius: var(--radio-boton);
  transition: border-color .2s, background-color .2s;
}
.campo textarea { resize: vertical; min-height: 130px; }
.campo input:focus,
.campo select:focus,
.campo textarea:focus { outline: none; border-color: var(--cyfac-azul); background: var(--claro-fondo-2); box-shadow: 0 0 0 3px rgba(10, 76, 134, .15); }
.campo-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.acepto { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-14); color: var(--color-texto-2); }
.acepto input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--cyfac-azul); flex: 0 0 auto; }
.acepto a { color: var(--cyfac-azul); }
.form-pie { display: flex; align-items: center; gap: var(--sp-24); flex-wrap: wrap; }
.form-estado { font-size: var(--fs-14); }
.form-estado.es-ok { color: #1d7a4c; }
.form-estado.es-error { color: #b42318; }

/* Pie */
.pie { background: var(--color-pie); padding: var(--sp-64) 0 var(--sp-40); }
.pie-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1.2fr;
  gap: var(--sp-40);
}
.pie ul { list-style: none; margin: 0; padding: 0; }
.pie li + li { margin-top: var(--sp-16); }
.pie a { font-size: var(--fs-13); color: var(--color-texto-2); text-decoration: none; }
.pie a:hover { color: var(--color-texto); }
.pie-der { text-align: right; font-size: var(--fs-13); color: var(--color-texto-2); }
.pie-der p + p { margin-top: var(--sp-8); }
.pie-logo { display: inline-block; margin-top: var(--sp-40); }
.pie-logo img { width: 240px; height: auto; }
.pie-bot {
  margin-top: var(--sp-40);
  padding-top: var(--sp-24);
  border-top: 1px solid var(--color-borde);
  display: flex;
  justify-content: space-between;
  gap: var(--sp-16);
  flex-wrap: wrap;
  font-size: var(--fs-12);
  color: var(--color-texto-3);
}

/* Revelado al hacer scroll (solo con JS) */
.js .reveal { opacity: 0; transform: translateY(12px); transition: opacity .5s, transform .5s var(--curva); }
.js .reveal.in { opacity: 1; transform: none; }

/* ---------- Aviso de privacidad ---------- */
.legal { padding: var(--sp-64) 0 var(--seccion); }
.legal h1 { font-size: var(--fs-h2); margin-bottom: var(--sp-16); }
.legal .fecha { color: var(--color-texto-3); font-size: var(--fs-14); margin-bottom: var(--sp-40); }
.legal h2 { font-size: var(--fs-18); margin: var(--sp-40) 0 var(--sp-16); }
.legal p, .legal li { color: var(--color-texto-2); font-size: var(--fs-14); }
.legal p + p { margin-top: var(--sp-16); }
.legal ul { padding-left: 20px; margin: var(--sp-16) 0; }
.legal li + li { margin-top: var(--sp-8); }
.legal a { color: var(--cyfac-turquesa); }
.legal .volver { display: inline-block; margin-bottom: var(--sp-40); font-size: var(--fs-13); color: var(--color-texto-2); text-decoration: none; }
.legal .volver:hover { color: var(--color-texto); }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .hero { flex-direction: column; align-items: stretch; min-height: 0; padding: 112px 0 0; }
  .hero-img { order: 2; }
  .hero-txt { padding: 0 var(--margen) var(--sp-40); }
  .hero-logo { width: 200px; margin-bottom: var(--sp-24); }
  .hero-img { position: relative; left: auto; right: auto; aspect-ratio: 4 / 3; }
  .hero-img img { object-position: 48% 62%; }
  .hero-img::after { background: linear-gradient(180deg, var(--color-panel-b) 0%, rgba(var(--rgb-tinta), 0) 30%); }
}
@media (max-width: 1100px) {
  .paneles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .panel { height: clamp(300px, 42vw, 420px); }
}
@media (max-width: 900px) {
  .contacto { grid-template-columns: 1fr; gap: var(--sp-24); }
  .tarjetas { grid-template-columns: 1fr; }
  .tarjeta { display: grid; grid-template-columns: 40px 1fr; column-gap: var(--sp-24); padding: var(--sp-24); }
  .tarjeta h3 { margin-top: 0; font-size: var(--fs-18); }
  .tarjeta p { grid-column: 2; }
  .tarjeta-ico { grid-row: span 2; }
  .pie-grid { grid-template-columns: 1fr 1fr; }
  .pie-der { grid-column: 1 / -1; text-align: left; }
}
@media (max-width: 560px) {
  .form { grid-template-columns: 1fr; padding: var(--sp-24); }
  .form .btn { width: 100%; }
  .paneles { grid-template-columns: 1fr; }
  .panel { height: 150px; }
  .panel::before { background: linear-gradient(90deg, rgba(var(--rgb-tinta), .85) 0%, rgba(var(--rgb-tinta), .5) 70%, rgba(var(--rgb-tinta), .35) 100%); }
  .panel h3 { top: 50%; transform: translateY(-50%); right: 30%; font-size: var(--fs-16); }
  .panel::after { left: 0; top: 0; bottom: 0; width: 3px; height: auto; }
  .panel:hover::after { width: 3px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero .ln > span, .hero-img, .hero-fade { transition-duration: .01s; transition-delay: 0s; }
  .panel img { transition: none; }
}

.pie-bot-solo { margin-top: 0; border-top: 0; padding-top: 0; }

/* ---------- Secciones claras (Equipo, A quién atendemos, Contacto, pie y avisos) ---------- */
:root { --color-acento: var(--cyfac-turquesa); }
.claro {
  --color-texto: var(--claro-texto);
  --color-texto-2: var(--claro-texto-2);
  --color-texto-3: var(--claro-texto-3);
  --color-borde: var(--claro-borde);
  --color-acento: var(--cyfac-azul);
  --color-foco: var(--cyfac-azul);
  background: var(--claro-fondo);
  color: var(--color-texto);
}
/* los paneles de equipo siguen siendo fotos oscuras con texto claro */
.claro .panel { --color-texto: var(--texto-sobre-foto); color: var(--color-texto); }
.claro .legal a, .legal.claro a { color: var(--cyfac-azul); }
.pie.claro { background: var(--claro-fondo-2); border-top: 1px solid var(--claro-borde); }
.pie.claro a:hover { color: var(--cyfac-azul); }