@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:ital,wght@0,400;0,600;0,700;1,400&family=Roboto:wght@300;400;500;700&display=swap');

:root {

  --color-primary: #9ce384;

  --color-primary-dark: #200F07;

  --color-audio: #FF6802;

  --color-ortho: #BB00FF;

  --color-optica: #0074F9;

  --color-bg: #FFFFFF;

  --color-bg-soft: #F0F5FA;

  --color-text: #222222;

  --color-text-muted: #64748B;

  --color-border: #CBD5E1;

  --color-card: #FFFFFF;

  --color-header-bg: #200F07;

  --color-footer-bg: #F0F5FA;

  --color-input-bg: transparent;

  --color-strong: #200F07;

  --color-primary-text: #200F07;

  --font-serif: 'IBM Plex Serif', Georgia, serif;

  --font-sans: 'Roboto', Verdana, sans-serif;

  --space-xs: 0.5rem;

  --space-sm: 1rem;

  --space-md: 2rem;

  --space-lg: 4rem;

  --space-xl: 6rem;

  --radius-sm: 8px;

  --radius-md: 16px;

  --radius-lg: 24px;

  --radius-pill: 999px;

  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.10);

  --shadow-btn: 0 2px 8px rgba(0, 0, 0, 0.18);

  --transition: 0.3s ease;

  --max-w: 1200px;

}

.dark-mode {

  --color-bg: #1A1F2E;

  --color-bg-soft: #232A3B;

  --color-text: #E8EDF5;

  --color-text-muted: #9BA8C0;

  --color-border: #3A4259;

  --color-card: #2A3148;

  --color-header-bg: #141926;

  --color-footer-bg: #1E2438;

  --color-strong: #61be5a;

  --color-input-bg: transparent;

  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.45);

}

body {

  transition: background-color 0.35s ease, color 0.35s ease;

}

*,

*::before,

*::after {

  box-sizing: border-box;

  margin: 0;

  padding: 0;

}

html {

  scroll-behavior: smooth;

  font-size: 16px;

}

body {

  font-family: var(--font-sans);

  color: var(--color-text);

  background: var(--color-bg);

  line-height: 1.6;

  overflow-x: hidden;

}

img,

video {

  max-width: 100%;

  height: auto;

  display: block;

}

a {

  text-decoration: none;

  color: inherit;

}

ul {

  list-style: none;

}

button {

  font-family: inherit;

  cursor: pointer;

  border: none;

  outline: none;

}

.container {

  width: 100%;

  max-width: var(--max-w);

  margin-inline: auto;

  padding-inline: var(--space-sm);

}

section {

  width: 100%;

}

.site-header {

  position: sticky;

  top: 0;

  z-index: 1000;

  background-color: var(--color-primary);

  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);

  transition: background-color 0.35s ease;

}

.header-inner {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 0.75rem 2rem;

  max-width: var(--max-w);

  margin-inline: auto;

}

.header-brand {

  display: flex;

  align-items: center;

  gap: 0.75rem;

}

.header-logo {

  height: 44px;

  width: auto;

  object-fit: contain;

}

.header-title {

  color: #fff;

  font-family: var(--font-sans);

  font-weight: 700;

  font-size: clamp(0.9rem, 3vw, 1.15rem);

  letter-spacing: 0.02em;

  line-height: 1.2;

}

.site-nav {

  display: none;

  gap: var(--space-sm);

  align-items: center;

}

.site-nav a {

  color: rgba(255, 255, 255, 0.9);

  font-size: 0.9rem;

  font-weight: 500;

  padding: 0.35rem 0.75rem;

  border-radius: var(--radius-pill);

  transition: background var(--transition), color var(--transition);

}

.site-nav a:hover,

.site-nav a.active {

  background: var(--color-primary-dark, );

  color: #fff;

}

.nav-badge {

  position: relative;

}

.hamburger {

  display: flex;

  flex-direction: column;

  gap: 5px;

  background: transparent;

  padding: 8px;

  border-radius: var(--radius-sm);

  transition: background var(--transition);

}

.hamburger:hover {

  background: rgba(255, 255, 255, 0.15);

}

.hamburger span {

  display: block;

  width: 24px;

  height: 2px;

  background: #fff;

  border-radius: 2px;

  transition: transform var(--transition), opacity var(--transition);

}

.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);

}

.mobile-nav {

  display: none;

  flex-direction: column;

  background: var(--color-header-bg);

  padding: var(--space-sm) 2rem;

  gap: 0.5rem;

  transition: background-color 0.35s ease;

}

.mobile-nav.open {

  display: flex;

}

.mobile-nav a {

  color: rgba(255, 255, 255, 0.9);

  font-size: 1rem;

  font-weight: 500;

  padding: 0.6rem 1rem;

  border-radius: var(--radius-sm);

  transition: background var(--transition);

}

.mobile-nav a:hover {

  background: rgba(255, 255, 255, 0.15);

  color: #fff;

}

@media (min-width: 768px) {

  .site-nav {

    display: flex;

  }

  .hamburger {

    display: none;

  }

  .mobile-nav {

    display: none !important;

  }

}

.header-actions {

  display: flex;

  align-items: center;

  gap: 0.5rem;

}

.hero {

  position: relative;

  min-height: 75vh;

  display: flex;

  align-items: center;

  justify-content: center;

  overflow: hidden;

  text-align: center;

}

.hero-video {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

  z-index: 0;

}

.hero-overlay {

  position: absolute;

  inset: 0;

  background: linear-gradient(to bottom,

      rgba(0, 0, 0, 0.55) 0%,

      rgba(0, 0, 0, 0.65) 60%,

      rgba(0, 0, 0, 0.80) 100%);

  z-index: 1;

}

.hero-content {

  position: relative;

  z-index: 2;

  padding: var(--space-lg) var(--space-sm);

  max-width: 780px;

}

.hero-badge {

  display: inline-block;

  background: var(--color-primary);

  color: var(--color-primary-text);

  font-size: 0.78rem;

  font-weight: 700;

  letter-spacing: 0.12em;

  text-transform: uppercase;

  padding: 0.35rem 1.1rem;

  border-radius: var(--radius-pill);

  margin-bottom: 1.25rem;

}

.hero-title {

  font-family: var(--font-serif);

  font-size: clamp(2.2rem, 6vw, 4rem);

  font-weight: 700;

  color: #fff;

  line-height: 1.1;

  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.45);

}

.hero-cta {

  display: inline-flex;

  align-items: center;

  gap: 0.5rem;

  margin-top: var(--space-md);

  background: var(--color-primary);

  color: var(--color-primary-text);

  font-weight: 700;

  padding: 0.85rem 2rem;

  border-radius: var(--radius-pill);

  font-size: 1rem;

  transition: background var(--transition), transform var(--transition);

  box-shadow: var(--shadow-btn);

}

.hero-cta:hover {

  background: var(--color-primary-dark);

  transform: translateY(-2px);

}

.hero-scroll {

  position: absolute;

  bottom: 1.5rem;

  left: 50%;

  transform: translateX(-50%);

  z-index: 2;

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 4px;

  color: rgba(255, 255, 255, 0.7);

  font-size: 0.75rem;

  letter-spacing: 0.08em;

  animation: bounce 2s infinite;

}

.hero-scroll svg {

  width: 20px;

  height: 20px;

}

@keyframes bounce {

  0%,

  100% {

    transform: translateX(-50%) translateY(0);

  }

  50% {

    transform: translateX(-50%) translateY(8px);

  }

}

.about-section {

  padding: var(--space-lg) 0;

  background: var(--color-bg);

}

.about-grid {

  display: grid;

  grid-template-columns: 1fr;

  gap: var(--space-md);

  align-items: center;

}

@media (min-width: 768px) {

  .about-grid {

    grid-template-columns: 1fr 1fr;

    gap: var(--space-lg);

  }

}

.about-text h2 {

  font-family: var(--font-sans);

  font-size: clamp(1.5rem, 3vw, 2rem);

  color: var(--color-primary);

  font-weight: 700;

  margin-bottom: var(--space-sm);

  line-height: 1.2;

}

.about-text p {

  color: var(--color-text-muted);

  font-size: 1rem;

  line-height: 1.75;

  margin-bottom: var(--space-sm);

}

.about-text strong {

  color: var(--color-strong);

}

.about-text .services-badges {

  display: flex;

  flex-wrap: wrap;

  gap: 0.5rem;

  margin-top: var(--space-sm);

}

.about-text .badge {

  padding: 0.35rem 1rem;

  border-radius: var(--radius-pill);

  font-size: 0.82rem;

  font-weight: 700;

  color: #fff;

}

.badge-green {

  background: var(--color-primary);

  color: var(--color-primary-text);

}

.badge-orange {

  background: var(--color-audio);

}

.badge-purple {

  background: var(--color-ortho);

}

.badge-blue {

  background: var(--color-optica);

}

.about-map {

  border-radius: var(--radius-lg);

  overflow: hidden;

  box-shadow: var(--shadow-card);

  height: 380px;

}

.about-map iframe {

  width: 100%;

  height: 100%;

  border: none;

  display: block;

}

.lab-section {

  position: relative;

  min-height: 30vh;

  display: flex;

  align-items: center;

  justify-content: center;

  text-align: center;

  background: url('../img/ADN-Medium-Section.webp') no-repeat center center;

  background-size: cover;

  background-attachment: fixed;

  overflow: hidden;

}

.lab-section::before {

  content: '';

  position: absolute;

  inset: 0;

  background: rgba(0, 20, 50, 0.68);

  z-index: 0;

}

.lab-content {

  position: relative;

  z-index: 1;

  width: 100%;

  padding: var(--space-lg) var(--space-sm);

  display: flex;

  align-items: center;

  justify-content: center;

}

.glass-card {

  background: rgba(255, 255, 255, 0.05);

  backdrop-filter: blur(12px);

  -webkit-backdrop-filter: blur(12px);

  border-radius: 20px;

  border: 1px solid rgba(255, 255, 255, 0.1);

  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5);

  padding: 2rem;

  max-width: 90%;

  width: 600px;

}

.glass-card h2 {

  font-family: var(--font-serif);

  font-size: clamp(1.5rem, 4vw, 2.6rem);

  color: #fff;

  font-weight: 700;

  margin-bottom: 1rem;

  line-height: 1.2;

  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);

}

.glass-card p {

  color: var(--color-primary);

  font-size: clamp(0.9rem, 2.5vw, 1.2rem);

  font-weight: 500;

  letter-spacing: 0.03em;

  line-height: 1.6;

  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);

}

@media (max-width: 767px) {

  .lab-section {

    min-height: 50vh;

    background-attachment: scroll !important;

  }

  .glass-card {

    padding: 1.5rem;

    width: 95%;

    backdrop-filter: blur(8px);

    -webkit-backdrop-filter: blur(8px);

  }

}

.services-section {

  padding: var(--space-lg) 0;

  background: var(--color-bg-soft);

}

.services-section .section-title {

  text-align: center;

  font-size: clamp(1.4rem, 3vw, 1.9rem);

  font-weight: 700;

  color: var(--color-text);

  margin-bottom: var(--space-md);

}

.services-grid {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 1rem;

}

@media (min-width: 900px) {

  .services-grid {

    grid-template-columns: repeat(4, 1fr);

    gap: 1.5rem;

  }

}

.service-card {

  background: var(--color-card);

  border-radius: var(--radius-lg);

  padding: var(--space-md) var(--space-sm);

  display: flex;

  flex-direction: column;

  align-items: center;

  text-align: center;

  gap: 0.75rem;

  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.12);

  border: 2px solid transparent;

  position: relative;

  transition: transform var(--transition), box-shadow var(--transition), background-color 0.35s ease;

}

.service-card:hover {

  transform: translateY(-6px);

  box-shadow: var(--shadow-card);

}

.service-card--green {

  border-color: var(--color-primary);

}

.service-card--orange {

  border-color: var(--color-audio);

}

.service-card--purple {

  border-color: var(--color-ortho);

}

.service-card--blue {

  border-color: var(--color-optica);

}

.card-badge {

  position: absolute;

  top: -14px;

  left: 50%;

  transform: translateX(-50%);

  white-space: nowrap;

  padding: 0.3rem 0.9rem;

  border-radius: var(--radius-pill);

  font-size: 0.68rem;

  font-weight: 700;

  letter-spacing: 0.1em;

  text-transform: uppercase;

  color: #fff;

}

.badge-bg-green {

  background: var(--color-primary);

  color: var(--color-primary-text);

}

.badge-bg-orange {

  background: var(--color-audio);

}

.badge-bg-purple {

  background: var(--color-ortho);

}

.badge-bg-blue {

  background: var(--color-optica);

}

.card-icon {

  width: 80px;

  height: 80px;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  margin-top: 0.5rem;

}

.card-icon svg {

  width: 40px;

  height: 40px;

}

.icon-green {

  border: 3px solid var(--color-primary);

  color: var(--color-primary);

}

.icon-orange {

  border: 3px solid var(--color-audio);

  color: var(--color-audio);

}

.icon-purple {

  border: 3px solid var(--color-ortho);

  color: var(--color-ortho);

}

.icon-blue {

  border: 3px solid var(--color-optica);

  color: var(--color-optica);

}

.card-name {

  font-size: 1.1rem;

  font-weight: 700;

}

.card-name--green {

  color: var(--color-primary);

}

.card-name--orange {

  color: var(--color-audio);

}

.card-name--purple {

  color: var(--color-ortho);

}

.card-name--blue {

  color: var(--color-optica);

}

.card-desc {

  color: var(--color-text-muted);

  font-size: 0.875rem;

  line-height: 1.55;

}

.card-btn {

  display: inline-flex;

  align-items: center;

  gap: 0.45rem;

  padding: 0.6rem 1.4rem;

  border-radius: var(--radius-pill);

  font-size: 0.85rem;

  font-weight: 700;

  color: #fff;

  margin-top: auto;

  transition: filter var(--transition), transform var(--transition);

}

.card-btn:hover {

  filter: brightness(1.12);

  transform: translateY(-2px);

}

.btn-green {

  background: var(--color-primary);

  color: var(--color-primary-text);

}

.btn-orange {

  background: var(--color-audio);

}

.btn-purple {

  background: var(--color-ortho);

}

.btn-blue {

  background: var(--color-optica);

}

.citas-section {

  padding: var(--space-lg) 0;

  background: var(--color-bg);

}

.citas-card {

  background: var(--color-bg-soft);

  border-radius: var(--radius-lg);

  padding: var(--space-lg) var(--space-md);

  max-width: 780px;

  margin-inline: auto;

  box-shadow: var(--shadow-card);

  transition: background-color 0.35s ease;

}

.citas-card h2 {

  text-align: center;

  font-size: clamp(1.4rem, 3vw, 1.9rem);

  font-weight: 700;

  color: var(--color-primary);

  margin-bottom: 0.75rem;

}

.citas-card p.citas-intro {

  text-align: center;

  color: var(--color-text-muted);

  font-size: 0.95rem;

  margin-bottom: var(--space-md);

}

.form-group {

  margin-bottom: 1.25rem;

}

.form-group label {

  display: block;

  font-size: 0.85rem;

  font-weight: 500;

  color: var(--color-text-muted);

  margin-bottom: 0.35rem;

}

.form-group label .req {

  color: #ef4444;

  margin-left: 2px;

}

.form-control {

  width: 100%;

  background: transparent;

  border: none;

  border-bottom: 1.5px solid var(--color-border);

  padding: 0.55rem 0;

  font-size: 0.95rem;

  font-family: var(--font-sans);

  color: var(--color-text);

  outline: none;

  transition: border-color var(--transition);

}

.form-control:focus {

  border-color: var(--color-primary);

}

.form-control::placeholder {

  color: #94A3B8;

}

select.form-control {

  appearance: none;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%2364748B' d='M8 11L2 5h12z'/%3E%3C/svg%3E");

  background-repeat: no-repeat;

  background-position: right 0.25rem center;

  background-size: 14px;

  cursor: pointer;

}

.form-row {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 1rem;

}

.form-date-group {

  position: relative;

}

.form-date-group .date-icon {

  position: absolute;

  left: 0;

  top: 50%;

  transform: translateY(-50%);

  color: var(--color-text-muted);

}

.form-date-group input {

  padding-left: 1.5rem;

}

.form-check {

  display: flex;

  align-items: flex-start;

  gap: 0.65rem;

  font-size: 0.88rem;

  color: var(--color-text-muted);

}

.form-check input[type="checkbox"] {

  width: 16px;

  height: 16px;

  flex-shrink: 0;

  margin-top: 2px;

  accent-color: var(--color-primary);

  cursor: pointer;

}

.form-check a {

  color: var(--color-primary);

  font-weight: 500;

}

.form-check a:hover {

  text-decoration: underline;

}

.form-submit {

  display: inline-flex;

  align-items: center;

  gap: 0.5rem;

  margin-top: var(--space-sm);

  background: var(--color-primary);

  color: var(--color-primary-text);

  font-weight: 700;

  padding: 0.85rem 2.2rem;

  border-radius: var(--radius-pill);

  font-size: 1rem;

  transition: background var(--transition), transform var(--transition);

  box-shadow: var(--shadow-btn);

}

.form-submit:hover {

  background: var(--color-primary-dark);

  transform: translateY(-2px);

}

.form-control.error {

  border-color: #ef4444;

}

.field-error {

  font-size: 0.78rem;

  color: #ef4444;

  margin-top: 0.25rem;

}

.form-message {

  padding: 1rem;

  border-radius: var(--radius-sm);

  margin-top: 1rem;

  font-weight: 500;

  text-align: center;

  display: none;

}

.form-message.success {

  background: #ecf9c4;

  color: #200F07;

  display: block;

}

.form-message.error-msg {

  background: #fee2e2;

  color: #991b1b;

  display: block;

}

.site-footer {

  background: var(--color-footer-bg);

  padding: var(--space-lg) 0 0;

  border-top: 2px solid var(--color-border);

  transition: background-color 0.35s ease;

}

.footer-grid {

  display: grid;

  grid-template-columns: 1fr;

  gap: var(--space-md);

  text-align: center;

}

@media (min-width: 768px) {

  .footer-grid {

    grid-template-columns: 1fr 1.5fr 1fr;

    text-align: left;

  }

}

.footer-col h4 {

  font-size: 0.85rem;

  font-weight: 700;

  letter-spacing: 0.1em;

  text-transform: uppercase;

  color: var(--color-primary);

  margin-bottom: 1rem;

}

.footer-col p,

.footer-col a {

  font-size: 0.9rem;

  color: var(--color-text-muted);

  line-height: 2;

  display: block;

}

.footer-col a:hover {

  color: var(--color-primary);

}

.footer-social {

  display: flex;

  flex-wrap: wrap;

  gap: 0.75rem;

  justify-content: center;

}

@media (min-width: 768px) {

  .footer-social {

    justify-content: flex-start;

  }

  .footer-grid .footer-col:nth-child(2) .footer-social {

    justify-content: center;

  }

}

.footer-social a {

  display: inline-flex;

  align-items: center;

  gap: 0.35rem;

  font-size: 0.88rem;

  color: var(--color-text-muted) !important;

  transition: color var(--transition);

}

.footer-social a:hover {

  color: var(--color-primary) !important;

}

.footer-social svg {

  width: 18px;

  height: 18px;

}

.footer-contact-item {

  display: flex;

  align-items: flex-start;

  gap: 0.5rem;

  justify-content: center;

}

@media (min-width: 768px) {

  .footer-contact-item {

    justify-content: flex-start;

  }

}

.footer-contact-item svg {

  width: 16px;

  height: 16px;

  flex-shrink: 0;

  margin-top: 3px;

  color: var(--color-primary);

}

.footer-bar {

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 0.5rem;

  text-align: center;

  border-top: 1px solid var(--color-border);

  margin-top: var(--space-md);

  padding: 1.25rem var(--space-sm);

}

@media (min-width: 600px) {

  .footer-bar {

    flex-direction: row;

    justify-content: space-between;

  }

}

.footer-bar a {

  font-size: 0.82rem;

  color: var(--color-primary);

  font-weight: 500;

  transition: text-decoration var(--transition);

}

.footer-bar a:hover {

  text-decoration: underline;

}

.footer-bar p {

  font-size: 0.82rem;

  color: var(--color-text-muted);

}

.footer-legal {

  display: flex;

  gap: 1.5rem;

}

#back-to-top {

  position: fixed;

  bottom: 2rem;

  right: 1.5rem;

  z-index: 999;

  width: 44px;

  height: 44px;

  border-radius: 50%;

  background: var(--color-optica);

  color: #fff;

  display: flex;

  align-items: center;

  justify-content: center;

  box-shadow: var(--shadow-card);

  opacity: 0;

  pointer-events: none;

  transition: opacity var(--transition), transform var(--transition);

}

#back-to-top.visible {

  opacity: 1;

  pointer-events: auto;

}

#back-to-top:hover {

  transform: translateY(-3px);

}

#back-to-top svg {

  width: 20px;

  height: 20px;

}

.section-hero {

  min-height: 55vh;

  display: flex;

  align-items: center;

  justify-content: center;

  position: relative;

  overflow: hidden;

  text-align: center;

}

.section-hero-bg {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

  z-index: 0;

}

.section-hero-overlay {

  position: absolute;

  inset: 0;

  z-index: 1;

}

.section-hero-content {

  position: relative;

  z-index: 2;

  padding: var(--space-lg) var(--space-sm);

  max-width: 680px;

}

.section-hero-badge {

  display: inline-block;

  color: #fff;

  font-size: 0.78rem;

  font-weight: 700;

  letter-spacing: 0.12em;

  text-transform: uppercase;

  padding: 0.35rem 1.1rem;

  border-radius: var(--radius-pill);

  margin-bottom: 1.25rem;

}

.section-hero-content h1 {

  font-family: var(--font-serif);

  font-size: clamp(2rem, 5vw, 3.5rem);

  font-weight: 700;

  color: #fff;

  line-height: 1.1;

}

.section-hero-content p {

  color: rgba(255, 255, 255, 0.88);

  font-size: clamp(1rem, 2.5vw, 1.2rem);

  margin-top: 1rem;

}

.section-hero-cta {

  display: inline-flex;

  align-items: center;

  gap: 0.5rem;

  margin-top: var(--space-md);

  color: #fff;

  font-weight: 700;

  padding: 0.85rem 2rem;

  border-radius: var(--radius-pill);

  font-size: 1rem;

  transition: filter var(--transition), transform var(--transition);

  box-shadow: var(--shadow-btn);

}

.section-hero-cta:hover {

  filter: brightness(1.15);

  transform: translateY(-2px);

}

.features-section {

  padding: var(--space-lg) 0;

  background: var(--color-bg);

}

.features-grid {

  display: grid;

  grid-template-columns: 1fr;

  gap: 1.5rem;

}

@media (min-width: 600px) {

  .features-grid {

    grid-template-columns: 1fr 1fr;

  }

}

@media (min-width: 900px) {

  .features-grid {

    grid-template-columns: 1fr 1fr 1fr;

  }

}

.feature-card {

  background: var(--color-bg-soft);

  border-radius: var(--radius-md);

  padding: 1.75rem 1.5rem;

  display: flex;

  flex-direction: column;

  gap: 0.75rem;

  transition: transform var(--transition), box-shadow var(--transition), background-color 0.35s ease;

}

.feature-card:hover {

  transform: translateY(-4px);

  box-shadow: var(--shadow-card);

}

.feature-card .feature-icon {

  width: 52px;

  height: 52px;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

}

.feature-card .feature-icon svg {

  width: 26px;

  height: 26px;

}

.feature-card h3 {

  font-size: 1.1rem;

  font-weight: 700;

}

.feature-card p {

  font-size: 0.9rem;

  color: var(--color-text-muted);

  line-height: 1.6;

}

.gallery-section {

  padding: var(--space-lg) 0;

  background: var(--color-bg-soft);

}

.gallery-grid {

  display: grid;

  grid-template-columns: 1fr;

  gap: 1rem;

}

@media (min-width: 600px) {

  .gallery-grid {

    grid-template-columns: 1fr 1fr;

  }

}

@media (min-width: 900px) {

  .gallery-grid {

    grid-template-columns: 1fr 1fr 1fr;

  }

}

.gallery-img {

  border-radius: var(--radius-md);

  overflow: hidden;

  aspect-ratio: 4/3;

}

.gallery-img img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform 0.5s ease;

}

.gallery-img:hover img {

  transform: scale(1.04);

}

.cta-banner {

  padding: var(--space-lg) 0;

  text-align: center;

}

.cta-banner h2 {

  font-size: clamp(1.5rem, 3.5vw, 2.2rem);

  font-weight: 700;

  margin-bottom: 1rem;

}

.cta-banner p {

  color: var(--color-text-muted);

  margin-bottom: var(--space-md);

  max-width: 560px;

  margin-inline: auto;

}

.section-label {

  font-size: 0.78rem;

  font-weight: 700;

  letter-spacing: 0.14em;

  text-transform: uppercase;

  margin-bottom: 0.5rem;

}

.section-heading {

  font-size: clamp(1.5rem, 3.5vw, 2.2rem);

  font-weight: 700;

  color: var(--color-text);

  line-height: 1.2;

  margin-bottom: 1rem;

}

.section-subheading {

  font-size: 1rem;

  color: var(--color-text-muted);

  max-width: 620px;

  line-height: 1.7;

}

.c-green {

  color: var(--color-primary);

}

.c-orange {

  color: var(--color-audio);

}

.c-purple {

  color: var(--color-ortho);

}

.c-blue {

  color: var(--color-optica);

}

.bg-green {

  background: var(--color-primary);

}

.bg-orange {

  background: var(--color-audio);

}

.bg-purple {

  background: var(--color-ortho);

}

.bg-blue {

  background: var(--color-optica);

}

.text-center {

  text-align: center;

}

.mb-sm {

  margin-bottom: var(--space-sm);

}

.mb-md {

  margin-bottom: var(--space-md);

}

#dark-mode-toggle {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  background: rgba(255, 255, 255, 0.15);

  border: 1.5px solid rgba(255, 255, 255, 0.25);

  color: #fff;

  width: 36px;

  height: 36px;

  border-radius: 50%;

  cursor: pointer;

  transition: background var(--transition), transform var(--transition), border-color var(--transition);

  flex-shrink: 0;

}

#dark-mode-toggle:hover {

  background: rgba(255, 255, 255, 0.28);

  transform: rotate(18deg) scale(1.08);

}

#dark-mode-toggle svg {

  width: 18px;

  height: 18px;

  pointer-events: none;

}

#icon-moon {

  display: block;

}

#icon-sun {

  display: none;

}

.dark-mode #icon-moon {

  display: none;

}

.dark-mode #icon-sun {

  display: block;

}

.dark-mode .form-control {

  color: var(--color-text);

  border-bottom-color: var(--color-border);

}

.dark-mode .form-control::placeholder {

  color: var(--color-text-muted);

}

.dark-mode select.form-control {

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%239BA8C0' d='M8 11L2 5h12z'/%3E%3C/svg%3E");

}

.dark-mode .form-message.success {

  background: #3a4a1a;

  color: #C5E384;

}

.dark-mode .form-message.error-msg {

  background: #7f1d1d;

  color: #fecaca;

}

.cookie-banner {

  position: fixed;

  bottom: 0;

  left: 0;

  width: 100%;

  z-index: 9000;

  background: var(--color-header-bg);

  border-top: 2px solid #C5E384;

  padding: 1rem 1.5rem;

  display: none;

  align-items: center;

  flex-wrap: wrap;

  gap: 1rem;

  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.35);

}

.cookie-banner-text {

  flex: 1 1 260px;

  font-size: 0.875rem;

  color: rgba(255, 255, 255, 0.88);

  line-height: 1.55;

}

.cookie-banner-text a {

  color: #C5E384;

  text-decoration: underline;

}

.cookie-banner-text a:hover {

  color: #fff;

}

.cookie-banner-actions {

  display: flex;

  flex-wrap: wrap;

  gap: 0.6rem;

  align-items: center;

}

.cookie-btn {

  border: none;

  border-radius: var(--radius-pill);

  padding: 0.6rem 1.25rem;

  font-size: 0.85rem;

  font-weight: 700;

  cursor: pointer;

  white-space: nowrap;

  transition: filter var(--transition), transform var(--transition), opacity var(--transition);

  letter-spacing: 0.02em;

}

.cookie-btn:hover {

  filter: brightness(1.12);

  transform: translateY(-1px);

}

.cookie-btn--accept {

  background: #C5E384;

  color: #200F07;

}

.cookie-btn--necessary {

  background: transparent;

  border: 1.5px solid #C5E384;

  color: #C5E384;

}

.cookie-btn--manage {

  background: transparent;

  border: 1.5px solid rgba(255, 255, 255, 0.38);

  color: rgba(255, 255, 255, 0.85);

}

.cookie-modal {

  position: fixed;

  inset: 0;

  background: rgba(0, 0, 0, 0.65);

  z-index: 9001;

  display: none;

  align-items: center;

  justify-content: center;

  padding: 1rem;

}

.cookie-modal-box {

  background: var(--color-card);

  border-radius: var(--radius-lg);

  padding: 2rem;

  max-width: 520px;

  width: 100%;

  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.45);

  position: relative;

  max-height: 90vh;

  overflow-y: auto;

  transition: background-color 0.35s ease;

}

.cookie-modal-header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-bottom: 0.5rem;

}

.cookie-modal-header h2 {

  font-size: 1.1rem;

  font-weight: 700;

  color: var(--color-text);

  margin: 0;

}

.cookie-modal-close {

  background: transparent;

  border: none;

  cursor: pointer;

  color: var(--color-text-muted);

  font-size: 1.4rem;

  line-height: 1;

  padding: 0.2rem 0.4rem;

  border-radius: var(--radius-sm);

  transition: color var(--transition), background var(--transition);

}

.cookie-modal-close:hover {

  color: var(--color-text);

  background: var(--color-bg-soft);

}

.cookie-modal-intro {

  font-size: 0.85rem;

  color: var(--color-text-muted);

  margin-bottom: 1.5rem;

  line-height: 1.6;

}

.cookie-option {

  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  gap: 1rem;

  padding: 1rem 0;

  border-top: 1px solid var(--color-border);

}

.cookie-option:last-of-type {

  border-bottom: 1px solid var(--color-border);

  margin-bottom: 1.5rem;

}

.cookie-option-info {

  flex: 1;

}

.cookie-option-info strong {

  display: block;

  font-size: 0.9rem;

  font-weight: 700;

  color: var(--color-text);

  margin-bottom: 0.2rem;

}

.cookie-option-info span {

  font-size: 0.8rem;

  color: var(--color-text-muted);

  line-height: 1.5;

}

.cookie-toggle-wrapper {

  position: relative;

  flex-shrink: 0;

  width: 46px;

  height: 26px;

  margin-top: 2px;

}

.cookie-toggle-wrapper input[type="checkbox"] {

  opacity: 0;

  width: 0;

  height: 0;

  position: absolute;

}

.cookie-toggle-label {

  display: block;

  width: 46px;

  height: 26px;

  border-radius: var(--radius-pill);

  background: var(--color-border);

  cursor: pointer;

  position: relative;

  transition: background 0.3s ease;

}

.cookie-toggle-label::after {

  content: '';

  position: absolute;

  top: 3px;

  left: 3px;

  width: 20px;

  height: 20px;

  border-radius: 50%;

  background: #fff;

  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.22);

  transition: transform 0.3s ease;

}

.cookie-toggle-wrapper input:checked+.cookie-toggle-label {

  background: #C5E384;

}

.cookie-toggle-wrapper input:checked+.cookie-toggle-label::after {

  transform: translateX(20px);

}

.cookie-toggle-wrapper input:disabled+.cookie-toggle-label {

  opacity: 0.65;

  cursor: not-allowed;

}

.dark-mode .cookie-toggle-label {

  background: var(--color-border);

}

.cookie-save-btn {

  display: block;

  width: 100%;

  padding: 0.8rem 1.5rem;

  border-radius: var(--radius-pill);

  background: #C5E384;

  color: #200F07;

  font-size: 0.95rem;

  font-weight: 700;

  border: none;

  cursor: pointer;

  text-align: center;

  transition: filter var(--transition), transform var(--transition);

  letter-spacing: 0.02em;

}

.cookie-save-btn:hover {

  filter: brightness(1.1);

  transform: translateY(-1px);

}

.cookie-settings-link {

  cursor: pointer;

}

.cookie-settings-link:hover {

  text-decoration: underline;

}

@media (max-width: 600px) {

  .cookie-banner {

    padding: 1rem;

  }

  .cookie-banner-actions {

    width: 100%;

    flex-direction: column;

  }

  .cookie-btn {

    width: 100%;

    text-align: center;

  }

}

.blog-preview-section {

  padding: var(--space-lg) 0;

  background: var(--color-bg-soft);

  transition: background-color 0.35s ease;

}

.blog-preview-section .section-title {

  text-align: center;

  font-size: clamp(1.4rem, 3vw, 1.9rem);

  font-weight: 700;

  color: var(--color-text);

  margin-bottom: 0.5rem;

}

.blog-preview-section .section-subtitle {

  text-align: center;

  color: var(--color-text-muted);

  font-size: 1rem;

  margin-bottom: var(--space-md);

}

.blog-preview-grid {

  display: grid;

  grid-template-columns: 1fr;

  gap: 1.5rem;

}

@media (min-width: 768px) {

  .blog-preview-grid {

    grid-template-columns: 1fr 1fr;

  }

}

.blog-preview-card {

  display: flex;

  flex-direction: column;

  border-radius: var(--radius-lg);

  overflow: hidden;

  background: rgba(255, 255, 255, 0.1);

  backdrop-filter: blur(10px);

  -webkit-backdrop-filter: blur(10px);

  border: 1px solid rgba(156, 227, 132, 0.25);

  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.10);

  transition: transform 0.35s ease, box-shadow 0.35s ease;

  text-decoration: none;

  color: inherit;

}

.blog-preview-card:hover {

  transform: translateY(-10px);

  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.16);

}

.dark-mode .blog-preview-card {

  background: rgba(42, 49, 72, 0.65);

  border-color: rgba(156, 227, 132, 0.15);

}

.blog-preview-card__img {

  width: 100%;

  height: 200px;

  object-fit: cover;

  display: block;

  flex-shrink: 0;

}

.blog-preview-card__body {

  padding: 1.5rem;

  display: flex;

  flex-direction: column;

  gap: 0.5rem;

  flex: 1;

}

.blog-preview-card__meta {

  font-size: 0.78rem;

  color: var(--color-primary);

  font-weight: 700;

  letter-spacing: 0.08em;

  text-transform: uppercase;

}

.blog-preview-card__title {

  font-family: var(--font-serif);

  font-size: clamp(1rem, 2.5vw, 1.2rem);

  font-weight: 700;

  color: var(--color-text);

  line-height: 1.3;

}

.blog-preview-card__excerpt {

  font-size: 0.88rem;

  color: var(--color-text-muted);

  line-height: 1.6;

  flex: 1;

}

.blog-preview-card__link {

  display: inline-flex;

  align-items: center;

  gap: 0.4rem;

  font-size: 0.85rem;

  font-weight: 700;

  color: var(--color-primary);

  margin-top: 0.5rem;

  transition: gap 0.2s ease;

}

.blog-preview-card:hover .blog-preview-card__link {

  gap: 0.7rem;

}

.blog-preview-cta-wrap {

  text-align: center;

  margin-top: var(--space-md);

}

.blog-preview-cta {

  display: inline-flex;

  align-items: center;

  gap: 0.5rem;

  background: var(--color-primary);

  color: var(--color-primary-text);

  font-weight: 700;

  padding: 0.85rem 2.2rem;

  border-radius: var(--radius-pill);

  font-size: 1rem;

  transition: background var(--transition), transform var(--transition);

  box-shadow: var(--shadow-btn);

}

.blog-preview-cta:hover {

  background: var(--color-primary-dark);

  transform: translateY(-2px);

}

.dark-mode .blog-preview-cta:hover {

  color: #fff;

}

.blog-index-hero {

  position: relative;

  min-height: 40vh;

  display: flex;

  align-items: center;

  justify-content: center;

  text-align: center;

  background-image: url('../img/Seccion_Hero.webp');

  background-size: cover;

  background-position: center center;

  background-attachment: fixed;

  overflow: hidden;

}

@media (max-width: 767px) {

  .blog-index-hero {

    background-attachment: scroll;

    min-height: 40vh;

  }

}

.blog-index-hero__overlay {

  position: absolute;

  inset: 0;

  background: rgba(0, 0, 0, 0.40);

  z-index: 0;

}

.blog-index-hero__content {

  position: relative;

  z-index: 1;

  padding: 2.5rem 2rem;

  max-width: 720px;

  background: rgba(0, 0, 0, 0.18);

  backdrop-filter: blur(5px);

  -webkit-backdrop-filter: blur(5px);

  border-radius: var(--radius-lg);

  border: 1px solid rgba(255, 255, 255, 0.12);

}

.blog-index-hero__content h1 {

  font-family: var(--font-serif);

  font-size: clamp(1.8rem, 5vw, 3rem);

  color: #fff;

  font-weight: 700;

  margin-bottom: 0.75rem;

  line-height: 1.2;

  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);

}

.blog-index-hero__content p {

  color: rgba(255, 255, 255, 0.88);

  font-size: 1.05rem;

  max-width: 540px;

  margin-inline: auto;

  line-height: 1.65;

  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);

}

.blog-index-section {

  padding: var(--space-lg) 0;

  background: var(--color-bg);

  transition: background-color 0.35s ease;

}

.blog-index-grid {

  display: grid;

  grid-template-columns: 1fr;

  gap: 2rem;

}

@media (min-width: 640px) {

  .blog-index-grid {

    grid-template-columns: repeat(2, 1fr);

  }

}

@media (min-width: 1024px) {

  .blog-index-grid {

    grid-template-columns: repeat(3, 1fr);

  }

}

.blog-card {

  background: var(--color-card);

  border-radius: var(--radius-lg);

  overflow: hidden;

  box-shadow: var(--shadow-card);

  border: 1px solid var(--color-border);

  display: flex;

  flex-direction: column;

  transition: transform var(--transition), box-shadow var(--transition), background-color 0.35s ease;

}

.blog-card:hover {

  transform: translateY(-6px);

  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.16);

}

.blog-card__img {

  width: 100%;

  height: 200px;

  object-fit: cover;

  display: block;

}

.blog-card__body {

  padding: 1.4rem;

  display: flex;

  flex-direction: column;

  gap: 0.5rem;

  flex: 1;

}

.blog-card__meta {

  font-size: 0.76rem;

  color: var(--color-primary);

  font-weight: 700;

  letter-spacing: 0.1em;

  text-transform: uppercase;

}

.blog-card__title {

  font-family: var(--font-serif);

  font-size: 1.1rem;

  font-weight: 700;

  color: var(--color-text);

  line-height: 1.35;

}

.blog-card__excerpt {

  font-size: 0.875rem;

  color: var(--color-text-muted);

  line-height: 1.6;

  flex: 1;

}

.blog-card__btn {

  display: inline-flex;

  align-items: center;

  gap: 0.4rem;

  margin-top: 1rem;

  background: var(--color-primary);

  color: var(--color-primary-text);

  font-weight: 700;

  padding: 0.6rem 1.4rem;

  border-radius: var(--radius-pill);

  font-size: 0.85rem;

  align-self: flex-start;

  transition: background var(--transition), transform var(--transition);

}

.blog-card__btn:hover {

  background: var(--color-primary-dark);

  transform: translateY(-2px);

}

.dark-mode .blog-card__btn:hover {

  color: #fff;

}

.post-hero {

  position: relative;

  height: 420px;

  overflow: hidden;

  display: flex;

  align-items: flex-end;

}

@media (min-width: 768px) {

  .post-hero {

    height: 520px;

  }

}

.post-hero__img {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

  z-index: 0;

}

.post-hero__overlay {

  position: absolute;

  inset: 0;

  background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.35) 60%, transparent 100%);

  z-index: 1;

}

.post-hero__content {

  position: relative;

  z-index: 2;

  padding: 2rem;

  width: 100%;

  max-width: 860px;

  margin-inline: auto;

}

.post-hero__meta {

  font-size: 0.8rem;

  color: var(--color-primary);

  font-weight: 700;

  letter-spacing: 0.1em;

  text-transform: uppercase;

  margin-bottom: 0.75rem;

}

.post-hero__title {

  font-family: var(--font-serif);

  font-size: clamp(1.6rem, 5vw, 2.8rem);

  color: #fff;

  font-weight: 700;

  line-height: 1.2;

  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.5);

}

.post-body-section {

  padding: var(--space-lg) 0;

  background: var(--color-bg);

  transition: background-color 0.35s ease;

}

.post-body {

  max-width: 800px;

  margin-inline: auto;

  padding-inline: var(--space-sm);

}

.post-back-btn {

  display: inline-flex;

  align-items: center;

  gap: 0.4rem;

  color: var(--color-primary);

  font-weight: 700;

  font-size: 0.9rem;

  margin-bottom: var(--space-md);

  transition: gap 0.2s ease, color var(--transition);

}

.post-back-btn:hover {

  gap: 0.7rem;

}

.post-author-bar {

  display: flex;

  align-items: center;

  gap: 1rem;

  margin-bottom: var(--space-md);

  padding-bottom: 1rem;

  border-bottom: 1px solid var(--color-border);

}

.post-author-avatar {

  width: 44px;

  height: 44px;

  border-radius: 50%;

  background: var(--color-primary);

  display: flex;

  align-items: center;

  justify-content: center;

  color: var(--color-primary-text);

  font-weight: 700;

  font-size: 1.1rem;

  flex-shrink: 0;

}

.post-author-info {

  display: flex;

  flex-direction: column;

}

.post-author-name {

  font-weight: 700;

  font-size: 0.9rem;

  color: var(--color-text);

}

.post-author-date {

  font-size: 0.8rem;

  color: var(--color-text-muted);

}

.post-content h2 {

  font-family: var(--font-serif);

  font-size: clamp(1.2rem, 3vw, 1.55rem);

  font-weight: 700;

  color: var(--color-text);

  margin-top: var(--space-md);

  margin-bottom: 0.75rem;

  line-height: 1.3;

}

.post-content h3 {

  font-family: var(--font-sans);

  font-size: 1.05rem;

  font-weight: 700;

  color: var(--color-primary);

  margin-top: 1.5rem;

  margin-bottom: 0.5rem;

}

.post-content p {

  font-size: 1.02rem;

  color: var(--color-text-muted);

  line-height: 1.8;

  margin-bottom: 1rem;

}

.post-content ul,

.post-content ol {

  padding-left: 1.5rem;

  margin-bottom: 1rem;

  list-style: disc;

}

.post-content ol {

  list-style: decimal;

}

.post-content li {

  font-size: 1rem;

  color: var(--color-text-muted);

  line-height: 1.75;

  margin-bottom: 0.35rem;

}

.post-content strong {

  color: var(--color-text);

  font-weight: 700;

}

.post-tip-box {

  background: rgba(156, 227, 132, 0.12);

  border-left: 4px solid var(--color-primary);

  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;

  padding: 1rem 1.25rem;

  margin: 1.5rem 0;

}

.post-tip-box p {

  margin-bottom: 0;

  color: var(--color-text);

  font-size: 0.95rem;

}

.dark-mode .post-tip-box {

  background: rgba(156, 227, 132, 0.08);

}

.post-cta-section {

  margin-top: var(--space-md);

  padding-top: var(--space-md);

  border-top: 1px solid var(--color-border);

  text-align: center;

}

.post-cta-section p {

  color: var(--color-text-muted);

  margin-bottom: 1rem;

}

.post-cta-btn {

  display: inline-flex;

  align-items: center;

  gap: 0.5rem;

  background: var(--color-primary);

  color: var(--color-primary-text);

  font-weight: 700;

  padding: 0.85rem 2rem;

  border-radius: var(--radius-pill);

  font-size: 1rem;

  transition: background var(--transition), transform var(--transition);

  box-shadow: var(--shadow-btn);

}

.post-cta-btn:hover {

  background: var(--color-primary-dark);

  transform: translateY(-2px);

}

.dark-mode .post-cta-btn:hover {

  color: #fff;

}