/* ============================================================
   COROPORACIÓN ROYT ARGENTINA SA — Hoja de estilos
   Mobile-first. Variables al inicio para cambiar la marca rápido.
   ============================================================ */

/* ---------- 1. Variables ---------- */
:root {
  /* Paleta — Opción C: Moderno editorial */
  --color-primary:      #2E516E;   /* Slate blue */
  --color-primary-soft: #426986;   /* Slate más claro para gradients */
  --color-accent:       #C99165;   /* Ámbar dusty / cobre */
  --color-accent-dark:  #B07A4F;   /* Ámbar oscuro para hover */
  --color-light:        #F5F5F5;
  --color-white:        #FFFFFF;
  --color-text:         #1A1A1A;
  --color-muted:        #6C757D;
  --color-border:       #E5E7EB;

  /* Tipografía */
  --font-body:    'Barlow', system-ui, -apple-system, sans-serif;
  --font-display: 'Barlow Condensed', 'Barlow', sans-serif;

  /* Espaciado y layout */
  --container-max: 1200px;
  --section-pad-y: 4rem;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;

  /* Sombras (RGB del primary #2E516E) */
  --shadow-sm: 0 2px 6px rgba(46, 81, 110, 0.06);
  --shadow-md: 0 8px 24px rgba(46, 81, 110, 0.10);
  --shadow-lg: 0 20px 50px rgba(46, 81, 110, 0.15);

  /* Transiciones */
  --t-fast: 150ms ease;
  --t-base: 250ms ease;

  /* Navbar — alto del contenido visible (debajo del safe area en notched iPhones) */
  --navbar-h-base: 72px;
  /* Alto total del navbar (incluye notch en iOS). En desktop env() = 0 → 72px. */
  --navbar-h: calc(var(--navbar-h-base) + env(safe-area-inset-top, 0px));
}

/* ---------- 2. Reset y base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--navbar-h);
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--t-fast);
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 0.6em;
  letter-spacing: 0.01em;
}

p {
  margin: 0 0 1em;
}

/* ---------- 3. Utilidades ---------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 1.25rem;
}

.text-accent {
  color: var(--color-accent);
}

.section {
  padding: var(--section-pad-y) 0;
}

.section__header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 3rem;
}

.section__header--light {
  color: var(--color-white);
}

.section__eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 0.85rem;
  color: var(--color-accent);
  margin-bottom: 0.75rem;
}

.section__title {
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  margin-bottom: 0.75rem;
  color: inherit;
}

.section__lead {
  font-size: 1.05rem;
  color: var(--color-muted);
  max-width: 580px;
  margin: 0 auto;
}

.section__header--light .section__lead {
  color: rgba(255, 255, 255, 0.8);
}

/* ---------- 4. Botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 1.6rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  transition: all var(--t-base);
  cursor: pointer;
  border: 2px solid transparent;
  white-space: nowrap;
}

.btn--accent {
  background: var(--color-accent);
  color: var(--color-primary);
  border-color: var(--color-accent);
}

.btn--accent:hover,
.btn--accent:focus-visible {
  background: var(--color-accent-dark);
  border-color: var(--color-accent-dark);
  color: var(--color-white);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn--outline {
  background: transparent;
  color: var(--color-white);
  border-color: rgba(255, 255, 255, 0.5);
}

.btn--outline:hover,
.btn--outline:focus-visible {
  background: var(--color-white);
  color: var(--color-primary);
  border-color: var(--color-white);
  transform: translateY(-2px);
}

/* ---------- 5. Navbar ---------- */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(46, 81, 110, 0.96);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  /* Soporte para notch / Dynamic Island en iOS: --navbar-h ya incluye el
     safe-area-inset-top, el padding-top empuja el contenido debajo del notch.
     El inner (.navbar__inner) tiene height: 100% del CONTENT area = 72px. */
  height: var(--navbar-h);
  padding-top: env(safe-area-inset-top, 0px);
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  transition: box-shadow var(--t-base), background var(--t-base);
}

.navbar.is-scrolled {
  box-shadow: var(--shadow-md);
}

.navbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.navbar__logo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  line-height: 1;
  color: var(--color-white);
}

.navbar__logo-img {
  height: 44px;
  width: auto;
  display: block;
  /* El PNG es navy oscuro; sobre fondo azul oscuro del navbar lo pasamos a blanco */
  filter: brightness(0) invert(1);
}

.navbar__logo-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.65rem;
  letter-spacing: 0.06em;
  color: var(--color-white);
  /* Subir levemente para compensar el peak visual del isotipo */
  margin-top: 2px;
}

/* En mobile (< 600px) achicamos un poco para más aire en el navbar */
@media (max-width: 599px) {
  .navbar__logo-img {
    height: 36px;
  }
  .navbar__logo-text {
    font-size: 1.4rem;
  }
}

.navbar__nav {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.navbar__menu {
  display: none; /* mobile: oculto, se muestra en desktop */
  gap: 1.75rem;
}

.navbar__link {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  position: relative;
  padding: 0.25rem 0;
}

.navbar__link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--color-accent);
  transition: width var(--t-base);
}

.navbar__link:hover,
.navbar__link:focus-visible {
  color: var(--color-white);
}

.navbar__link:hover::after,
.navbar__link:focus-visible::after {
  width: 100%;
}

.navbar__cta {
  display: none; /* mobile: oculto */
  padding: 0.6rem 1.2rem;
  font-size: 0.9rem;
}

/* Hamburguesa */
.navbar__toggle {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 28px;
  height: 22px;
  padding: 0;
}

.navbar__toggle span {
  display: block;
  width: 100%;
  height: 3px;
  background: var(--color-white);
  border-radius: 2px;
  transition: transform var(--t-base), opacity var(--t-base);
}

.navbar__toggle.is-open span:nth-child(1) {
  transform: translateY(9.5px) rotate(45deg);
}
.navbar__toggle.is-open span:nth-child(2) {
  opacity: 0;
}
.navbar__toggle.is-open span:nth-child(3) {
  transform: translateY(-9.5px) rotate(-45deg);
}

/* Menú mobile desplegable */
@media (max-width: 899px) {
  .navbar__nav {
    position: fixed;
    top: var(--navbar-h);
    left: 0;
    right: 0;
    background: var(--color-primary);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 1.5rem 1.25rem 2rem;
    box-shadow: var(--shadow-lg);
    transform: translateY(-110%);
    transition: transform var(--t-base);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }

  .navbar__nav.is-open {
    transform: translateY(0);
  }

  .navbar__menu {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }

  .navbar__link {
    display: block;
    padding: 1rem 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .navbar__cta {
    display: inline-flex;
    margin-top: 1.25rem;
    align-self: center;
    width: 100%;
  }
}

/* ---------- 6. Hero ---------- */
.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  padding: calc(var(--navbar-h) + 3rem) 0 4rem;
  background:
    linear-gradient(135deg, rgba(46, 81, 110, 0.85) 0%, rgba(66, 105, 134, 0.78) 100%),
    radial-gradient(ellipse at top right, rgba(201, 145, 101, 0.18), transparent 60%),
    url('../images/hero.jpg') center/cover no-repeat,
    var(--color-primary);
  color: var(--color-white);
  overflow: hidden;
}

/* Patrón decorativo sutil */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: 1;
}

.hero__content {
  max-width: 780px;
}

.hero__title {
  font-size: clamp(2.25rem, 6vw, 4.25rem);
  margin-bottom: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.hero__subtitle {
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  color: rgba(255, 255, 255, 0.85);
  max-width: 600px;
  margin-bottom: 2.5rem;
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 3.5rem;
}

.hero__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 2rem;
  padding-top: 2.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  max-width: 640px;
}

.hero__stat {
  display: flex;
  flex-direction: column;
}

.hero__stat-value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 4vw, 2.75rem);
  color: var(--color-accent);
  line-height: 1;
  margin-bottom: 0.35rem;
}

.hero__stat-label {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.75);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ---------- 7. Servicios ---------- */
.servicios {
  background: var(--color-light);
}

.servicios__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  /* Columna única en todos los tamaños: las cards se apilan y el cascadeo
     se lee vertical, una debajo de la otra. Limitamos el ancho y centramos
     para que en desktop no queden demasiado anchas. */
  max-width: 640px;
  margin-inline: auto;
}

.card-servicio {
  background: var(--color-white);
  padding: 2rem 1.75rem;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
  position: relative;
  overflow: hidden;
}

.card-servicio::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-base);
}

.card-servicio:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-accent);
}

.card-servicio:hover::before {
  transform: scaleX(1);
}

.card-servicio__icon {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: rgba(201, 145, 101, 0.12);
  color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
}

.card-servicio__icon svg {
  width: 28px;
  height: 28px;
}

.card-servicio__title {
  font-size: 1.35rem;
  color: var(--color-primary);
  margin-bottom: 0.5rem;
}

.card-servicio__text {
  color: var(--color-muted);
  margin: 0;
  font-size: 0.95rem;
}

/* Animación de entrada en cascada (scroll reveal).
   La clase .reveal la agrega main.js sólo cuando va a animar; sin JS
   (o con prefers-reduced-motion) las cards quedan visibles por defecto.
   Usamos la propiedad `translate` (no `transform`) para no interferir con
   el translateY(-6px) del hover, que sigue usando `transform`. */
.card-servicio.reveal {
  opacity: 0;
  translate: 0 24px;
  transition:
    opacity 450ms ease-out,
    translate 450ms ease-out,
    transform var(--t-base),
    box-shadow var(--t-base),
    border-color var(--t-base);
}

.card-servicio.reveal.is-visible {
  opacity: 1;
  translate: 0 0;
}

/* Con prefers-reduced-motion mantenemos la aparición, pero la reducimos a un
   fade de opacidad sin desplazamiento (no hay movimiento espacial, que es lo
   que molesta en términos de accesibilidad). El !important es necesario para
   ganarle al reset global de transiciones que hay más abajo en este archivo. */
@media (prefers-reduced-motion: reduce) {
  .card-servicio.reveal {
    translate: none;
    transition: opacity 450ms ease-out !important;
  }
  .card-servicio.reveal.is-visible {
    translate: none;
  }
}

/* ---------- 8. Quiénes somos ---------- */
.nosotros {
  background: var(--color-white);
}

.nosotros__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
}

.nosotros__media {
  order: -1;
}

.nosotros__placeholder,
.nosotros__img {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  width: 100%;
  height: auto;
}

.nosotros__img {
  object-fit: cover;
  box-shadow: var(--shadow-md);
}

/* Placeholder visual cuando no hay foto real */
.nosotros__placeholder {
  background:
    linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-soft) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.7);
  font-family: var(--font-display);
  font-size: 1.1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  padding: 1rem;
}

.nosotros__placeholder small {
  display: block;
  font-size: 0.75rem;
  margin-top: 0.5rem;
  text-transform: none;
  letter-spacing: 0.04em;
  opacity: 0.7;
}

.nosotros__text {
  color: var(--color-muted);
  font-size: 1rem;
  line-height: 1.7;
}

.nosotros__diferenciales {
  display: grid;
  gap: 0.85rem;
  margin-top: 1.5rem;
}

.nosotros__diferenciales li {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  font-size: 0.97rem;
  color: var(--color-text);
}

.nosotros__check {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.9rem;
  margin-top: 1px;
}

/* ---------- 9. Galería ---------- */
.instalaciones {
  background: var(--color-light);
}

.galeria {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.galeria__item {
  display: block;
  width: 100%;
  padding: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  transition: transform var(--t-base), box-shadow var(--t-base);
  background: var(--color-primary);
}

.galeria__item:hover,
.galeria__item:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.galeria__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 3 / 2;
  transition: transform 500ms ease;
}

.galeria__item:hover img {
  transform: scale(1.05);
}

.galeria__placeholder {
  aspect-ratio: 3 / 2;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-soft) 100%);
  color: rgba(255, 255, 255, 0.7);
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 1rem;
  text-align: center;
}

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(46, 81, 110, 0.95);
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.lightbox.is-open {
  display: flex;
}

.lightbox__close,
.lightbox__nav {
  position: absolute;
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-white);
  border-radius: 50%;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-family: var(--font-body);
  transition: background var(--t-fast);
  z-index: 1;
}

.lightbox__close:hover,
.lightbox__nav:hover {
  background: var(--color-accent);
  color: var(--color-primary);
}

.lightbox__close {
  top: 1rem;
  right: 1rem;
  font-size: 2rem;
  line-height: 1;
}

.lightbox__nav--prev {
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
}

.lightbox__nav--next {
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
}

.lightbox__figure {
  margin: 0;
  max-width: 90vw;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.lightbox__content {
  max-width: 90vw;
  max-height: 75vh;
  background: var(--color-primary-soft);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  font-family: var(--font-display);
  font-size: 1.25rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 4rem 6rem;
  text-align: center;
}

.lightbox__content img {
  max-width: 100%;
  max-height: 75vh;
  border-radius: var(--radius-md);
}

.lightbox__caption {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.95rem;
  text-align: center;
}

/* ---------- 10. Contacto ---------- */
.contacto {
  background: var(--color-primary);
  color: var(--color-white);
}

.contacto__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}

/* Formulario */
.form {
  background: var(--color-white);
  color: var(--color-text);
  padding: 2rem 1.5rem;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.form__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.1rem;
}

.form__field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.form__label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.form input,
.form select,
.form textarea {
  font-family: inherit;
  font-size: 1rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  color: var(--color-text);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

.form input:focus,
.form select:focus,
.form textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(201, 145, 101, 0.15);
}

.form textarea {
  resize: vertical;
  min-height: 120px;
}

.form__submit {
  align-self: flex-start;
  margin-top: 0.5rem;
}

.form__status {
  margin: 0;
  min-height: 1.2em;
  font-size: 0.95rem;
}

.form__status.is-success {
  color: #1a7a3a;
}

.form__status.is-error {
  color: #b00020;
}

/* Info de contacto */
.contacto__info-title {
  font-size: 1.5rem;
  margin-bottom: 1.25rem;
  color: var(--color-white);
}

.contacto__lista {
  display: grid;
  gap: 1.1rem;
  margin-bottom: 2rem;
}

.contacto__lista li {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.contacto__lista strong {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.85rem;
  color: var(--color-accent);
}

.contacto__lista a {
  color: rgba(255, 255, 255, 0.9);
}

.contacto__lista a:hover {
  color: var(--color-accent);
}

.contacto__mapa {
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: var(--color-primary-soft);
}

/* ---------- 11. Footer ---------- */
.footer {
  background: #1F3D54;
  color: rgba(255, 255, 255, 0.75);
  padding-top: 3rem;
  font-size: 0.93rem;
}

.footer__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  padding-bottom: 2.5rem;
}

.footer__logo-link {
  display: inline-block;
  margin-bottom: 1rem;
  transition: opacity var(--t-fast);
}

.footer__logo-link:hover,
.footer__logo-link:focus-visible {
  opacity: 0.8;
}

.footer__logo-img {
  height: 90px;
  width: auto;
  display: block;
  /* PNG navy → blanco para que se vea sobre el footer oscuro */
  filter: brightness(0) invert(1);
}

.footer__tagline {
  max-width: 300px;
  margin: 0 0 1.25rem;
  font-size: 0.92rem;
  line-height: 1.5;
}

.footer__social {
  display: flex;
  gap: 0.6rem;
}

.footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.8);
  transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast);
}

.footer__social a:hover,
.footer__social a:focus-visible {
  background: var(--color-accent);
  color: var(--color-primary);
  transform: translateY(-2px);
}

.footer__social svg {
  width: 18px;
  height: 18px;
}

.footer__heading {
  font-size: 1rem;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-white);
  margin-bottom: 1rem;
}

.footer__nav ul {
  display: grid;
  gap: 0.5rem;
}

.footer__nav a:hover {
  color: var(--color-accent);
}

.footer__legal p {
  margin: 0 0 0.35em;
  font-size: 0.9rem;
}

.footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 1.25rem 0;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
}

.footer__bottom p {
  margin: 0;
}

/* ============================================================
   12. RESPONSIVE — breakpoints mobile-first
   ============================================================ */

/* Tablet vertical: 600px+ */
@media (min-width: 600px) {
  :root {
    --section-pad-y: 5rem;
  }

  .galeria {
    grid-template-columns: repeat(2, 1fr);
  }

  .form__row {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Tablet horizontal: 768px+ */
@media (min-width: 768px) {
  .container {
    padding: 0 2rem;
  }

  .galeria {
    grid-template-columns: repeat(3, 1fr);
  }

  .form {
    padding: 2.5rem;
  }
}

/* Desktop: 900px+ */
@media (min-width: 900px) {
  :root {
    --section-pad-y: 6rem;
  }

  /* Navbar */
  .navbar__toggle {
    display: none;
  }

  .navbar__menu {
    display: flex;
  }

  .navbar__cta {
    display: inline-flex;
  }

  /* Servicios */
  .servicios__grid {
    gap: 1.75rem;
  }

  /* Quiénes somos */
  .nosotros__grid {
    grid-template-columns: 1fr 1.1fr;
    gap: 4rem;
  }

  .nosotros__media {
    order: 0;
  }

  /* Contacto */
  .contacto__grid {
    grid-template-columns: 1.3fr 1fr;
    gap: 3rem;
  }

  /* Footer */
  .footer__inner {
    grid-template-columns: 2fr 1fr 1.3fr;
  }
}

/* Desktop grande: 1100px+ */
@media (min-width: 1100px) {
  .galeria {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ============================================================
   13. Accesibilidad
   ============================================================ */
:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}