/* styles.css */

/* 1. Palette & Reset */
:root {
  --bg-primary:     #eae8e3;
  --bg-alt:         #f1ede9;
  --text-primary:   #3E2723;
  --text-secondary: #a09285;
  --accent:         #b29d8f;
  --accent-hover:   #cdbfb3;
  --card-bg:        #dfd6cc;
  --border:         #d2c2ad;
  --header-height: 4rem;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html, body {
  width: 100%;
  height: 100%;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: sans-serif;
  scroll-behavior: smooth;
}

/* 2. Header & Navigation */
header.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 4rem;
  background: rgba(234, 232, 227, 0.9);
  backdrop-filter: blur(10px);
  z-index: 1000;
}
.site-nav {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
  padding: 0 2rem;
  gap: 2rem;
  opacity: 0;
  transition: opacity 3s ease-in-out;
}
.site-nav.visible {
  opacity: 1;
}
.site-nav a {
  color: var(--text-primary);
  text-decoration: none;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1rem;
  transition: color .3s;
}
.site-nav a:hover {
  color: var(--accent);
}

/* 3. Scroll Button (generic) */
.scroll-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  background: none;
  border: 2px solid var(--bg-alt);
  color: var(--accent);
  padding: .75rem 1.5rem;
  font-size: 1rem;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: .5rem;
  transition: background .3s, color .3s;
}
.scroll-btn:hover {
  background: var(--accent);
  color: white;
}

/* 4. Index Hero */
.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
.hero-video,
.overlay-svg {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
}
.hero-video { object-fit: cover; z-index: 1; }
.overlay-svg {
  z-index: 2;
  opacity: 0;
  transition: opacity 5s ease-in-out;
}
.overlay-svg.visible {
  opacity: 1;
}

/* 5. About Hero */
.about-hero {
  position: relative;
  margin-top: 4rem;
  width: 100%;
  overflow: hidden;
}
.about-hero img {
  display: block;
  width: 100%;
  height: auto;
}

/* 6. Scroll-Reveal */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .8s ease-out, transform .8s ease-out;
}
.animate-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

/* 7. Team Grid */
.team-grid {
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
  margin-top: 2rem;
}
.team-member {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem;
  text-align: center;
  max-width: 270px;
}
.team-member img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  border-radius: 50%;
  margin-bottom: 1rem;
}
.slide-left.animate-on-scroll {
  transform: translateX(-50px);
  opacity: 0;
}
.slide-right.animate-on-scroll {
  transform: translateX(50px);
  opacity: 0;
}
.slide-left.animate-on-scroll.visible,
.slide-right.animate-on-scroll.visible {
  transform: translateX(0);
  opacity: 1;
}

/* 8. Sections */
.section {
  max-width: 960px;
  margin: 4rem auto;
  padding: 0 1rem;
}
.section h1,
.section h2 {
  margin-bottom: 1rem;
  line-height: 1.2;
}
.section p {
  color: var(--text-secondary);
  margin-bottom: 2rem;
  line-height: 1.6;
}

/* 9. Profile Pages */
.profile-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3rem;
  background: var(--bg-alt);
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0 2rem;
  z-index: 1000;
}
.profile-header .close-btn {
  font-size: 1.5rem;
  color: var(--text-secondary);
  text-decoration: none;
}
.profile-header .close-btn:hover {
  color: var(--accent);
}
.profile-container {
  display: flex; flex-wrap: wrap; gap: 2rem;
  max-width: 960px; margin: 5rem auto 4rem; padding: 0 1rem;
  align-items: center;
}
.profile-photo { flex: none; width: 300px; }
.profile-photo img {
  width: 100%; height: auto;
  object-fit: cover; border-radius: 8px;
}
.profile-info { flex: 1; }

/* 10. Footer */
.site-footer {
  background: var(--bg-alt);
  color: var(--text-secondary);
  padding: 2rem 1rem 1rem;
  font-size: 0.9rem;
}
.footer-container {
  display: flex; flex-wrap: wrap; gap: 2rem;
  max-width: 960px; margin: 0 auto; justify-content: space-between;
}
.footer-brand h3 { margin-bottom: .5rem; color: var(--text-primary); }
.footer-brand p { margin-bottom: 1rem; }
.footer-nav a,
.footer-contact p,
.footer-bottom a {
  display: block; margin-bottom: .5rem;
  color: var(--text-secondary); text-decoration: none;
}
.footer-nav a:hover,
.footer-bottom a:hover { color: var(--accent); }
.footer-social img { width: 24px; height: auto; }
.footer-bottom {
  text-align: center; border-top: 1px solid var(--border);
  margin-top: 1.5rem; padding-top: 1rem;
}
.footer-bottom p { display: inline; margin-right: 1rem; }

/* 11. Privacy Page */
.privacy-page {
  font-size: 0.9rem; line-height: 1.4; color: #333;
}
.privacy-page main {
  max-width: 600px; margin: 0 auto; padding: 1rem;
}
.privacy-page h1 {
  font-size: 1.5rem; margin-bottom: .75rem; font-weight: 600;
}
.privacy-page h2 {
  font-size: 1.25rem; margin: 1.25rem 0 .5rem; font-weight: 500;
}
.privacy-page p { margin-bottom: .75rem; }
.privacy-page ul { margin: .5rem 0 .75rem 1.25rem; }
.privacy-page ul li { margin-bottom: .4rem; }
.privacy-page a { color: #0066cc; text-decoration: underline; }
.privacy-page .profile-header { padding: .5rem 1rem; }

/* 12. Contact Hero & Animations */
.contact-hero {
  display: flex; justify-content: center;
  margin: 4rem 0; padding: 0 1rem;
  background: rgba(234, 232, 227, 0.9);
}
.contact-hero-inner {
  display: flex; align-items: center; gap: 2rem;
  max-width: 1200px; width: 100%;
}
.hero-image {
  position: relative; flex: none;
}
.hero-image img {
  max-height: 80vh; object-fit: cover; border-radius: 12px;
}
.contact-hero .scroll-btn {
  top: 80%; background: var(--accent);
  color: white; border: 2px solid #fff;
}
.contact-hero .scroll-btn:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}
.hero-info { flex: 1; display: flex; justify-content: center; }
.hero-info-box {
  background: #fff; padding: 1.5rem;
  border-radius: 8px; border: 1px solid var(--border);
  max-width: 90%; box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

/* 13. Contact Form */
.contact-form {
  max-width: 600px; margin: 3rem auto;
  background: #fff; padding: 2rem;
  border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.contact-form h2 {
  text-align: center; margin-bottom: 1.5rem;
}
.contact-form label {
  display: block; margin-bottom: .25rem; font-weight: 500;
}
.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%; padding: .5rem; margin-bottom: 1rem;
  border: 1px solid #ccc; border-radius: 4px;
}
.contact-form button {
  display: block; margin: 0 auto;
  background: #333; color: #fff; border: none;
  padding: .75rem 1.5rem; border-radius: 4px;
  cursor: pointer; transition: background .3s;
}
.contact-form button:hover { background: #444; }

/* 14. Scroll Offset for Contact Form */
#contact-form-section { scroll-margin-top: 6rem; }

/* 15. Scroll-Reveal Animations */
.animate-photo { opacity: 0; transform: translateY(-50px); }
.animate-info  { opacity: 0; transform: translateX(50px); }
.animate-btn   { opacity: 0; transform: translateY(50px); }
@keyframes slideDown { to { opacity:1; transform:translateY(0);} }
@keyframes slideLeft { to { opacity:1; transform:translateX(0);} }
@keyframes slideUp   { to { opacity:1; transform:translateY(0);} }
.animate-photo { animation: slideDown 0.8s ease-out forwards 0.2s; }
.animate-info  { animation: slideLeft 0.8s ease-out forwards 0.5s; }
.animate-btn   { animation: slideUp   0.8s ease-out forwards 0.8s; }

/* 16. Divider */
.divider {
  border: none; height: 1px;
  width: 95%; margin: 2rem auto;
  background: var(--accent);
}

/* 17. Services Section (horizontal) */
#process {
  background: rgba(234,232,227,0.9);
  padding: 4rem 2rem;
}
#process .section-title {
  font-family: inherit;
  color: var(--text-primary);
  text-align: center;
  margin-bottom: 1rem;
}

/* 18. Process Wrapper & Steps */
.process-wrapper {
  position: relative; overflow: hidden;
}
.process-wrapper::before {
  content: "";
  position: absolute; inset: 0;
  background: url("IMG/services.webp") center/cover no-repeat;
  opacity: 0.1; z-index: 0;
}
.process-wrapper > .process-container {
  position: relative; z-index: 1;
}
.process-container.horizontal {
  display: flex; flex-direction: row;
  align-items: center; justify-content: center;
  gap: 2rem; flex-wrap: nowrap;
}

/* Step Boxes */
.step {
  position: relative; background: var(--card-bg);
  padding: 0 1rem 1rem; border-radius: 8px;
  width: 220px; min-height: 280px;
  border: 2px solid var(--accent); text-align: left;
}
.step-number {
  position: absolute; top: -16px; left: -2px;
  font-size: 6rem; transform: scaleY(1.2);
  transform-origin: top left; color: var(--bg-primary);
  z-index: 2;
}
.step-title {
  margin: calc(6rem*1.2 + .5rem) 1rem 1rem;
}
.step-desc {
  margin: 0 1rem; color: var(--text-secondary);
  line-height: 1.6;
}

/* Sub-group (3 & 4) */
.sub-group {
  display: flex; flex-direction: column;
  align-items: center; gap: 2rem;
}

/* Arrows */
.arrow-col {
  display: flex; flex-direction: column;
  align-items: center; gap: 2rem;
}
.arrow-block {
  font-size: 2rem; color: var(--accent);
  opacity: 0; transform: translateY(20px);
  transition: opacity .8s ease-out, transform .8s ease-out;
}
.arrow-col.visible .arrow-block {
  opacity: 1; transform: translateY(0);
}
.arrow-2-3 {
  transform: translateY(20px) rotate(-45deg);
}
.arrow-2-4 {
  transform: translateY(20px) rotate(45deg);
}
.arrow-2-3.visible {
  transform: translateY(0) rotate(-45deg);
}
.arrow-2-4.visible {
  transform: translateY(0) rotate(45deg);
}

/* Final row-group */
.row-group {
  display: flex; align-items: center; gap: 2rem;
}
.arrow-1-2.visible,
.arrow-4-5.visible {
  transform: translateY(0) rotate(0deg);
}

/* 19. Responsive */
@media (max-width: 600px) {
  .process-container.horizontal {
    flex-direction: column;
    align-items: center;
    gap: 2rem;
  }
  .sub-group { flex-direction: column; }
  .arrow-col { display: none; }
  .services-hero-inner { flex-direction: column; }
}
/* 20. Services Hero */
.services-hero {
  /* separo del header fijo */
  margin-top: 4rem;
  padding: 0 1rem;
}

.services-hero-inner {
  /* ponemos imagen y texto lado a lado */
  display: flex;
  align-items: center;
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.services-hero .hero-image {
  /* ya tienes position: relative; pero refuerzo el ancho */
  flex: none;
}

.services-hero .hero-info {
  /* el texto ocupa lo que queda */
  flex: 1;
}

.services-hero .scroll-btn {
  /* movemos el botón al fondo de la imagen, centrado */
  top: auto;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
}

/* Mantener la disposición en móvil (ya la tenías, pero la repito aquí por claridad) */
@media (max-width: 600px) {
  .services-hero-inner {
    flex-direction: column;
  }
}
/* Centrar el botón dentro de la imagen en Services */
.services-hero .hero-image .scroll-btn {
  /* anular top preexistente */
  top: auto;
  /* 1rem por encima del borde inferior de la foto */
  bottom: 1rem;
  /* posición central horizontal */
  left: 50%;
  /* sólo desplaza en X para centrar */
  transform: translateX(-50%);
}
/* ——————————————————————————————
   20*. Fix centrado de botón en Services
   —————————————————————————————— */

/* 1) ancla el botón al fondo y centro del contenedor */
.services-hero .hero-image .scroll-btn {
  top: auto !important;
  bottom: 5rem !important;
  left: 50% !important;
}

/* 2) estado inicial de la animación: conserva X y aplica Y */
.services-hero .hero-image .scroll-btn.animate-btn {
  transform: translateX(-50%) translateY(50px) !important;
}

/* 3) al hacerse visible, sólo quita el Y, mantiene el centrado X */
.services-hero .hero-image .scroll-btn.animate-btn.visible {
  transform: translateX(-50%) translateY(0) !important;
}
/* — Fix centrado y posición del botón en Contact — */
.contact-hero .hero-image .scroll-btn {
  /* Anclamos abajo y centramos horizontalmente */
  top: auto !important;
  bottom: 5rem !important;
  left: 50% !important;
}

/* Estado inicial de la animación: mantiene X y desplaza solo en Y */
.contact-hero .hero-image .scroll-btn.animate-btn {
  transform: translateX(-50%) translateY(50px) !important;
}

/* Al completarse la animación: quita el Y y sigue centrado */
.contact-hero .hero-image .scroll-btn.animate-btn.visible {
  transform: translateX(-50%) translateY(0) !important;
}
/* — Hacer que el botón de Services luzca igual que el de Contact — */
.services-hero .scroll-btn {
  background: var(--accent);    /* mismo fondo lleno */
  color: white;                 /* mismo texto blanco */
  border: 2px solid #fff;       /* mismo borde blanco */
}

/* Hover idéntico */
.services-hero .scroll-btn:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}
.services-page .arrow-2-3 { transform: translateY(0) rotate(-45deg) !important; }
.services-page .arrow-2-4 { transform: translateY(0) rotate(45deg)  !important; }
/* ———————————————————————————————————————————
   21. Grupo 4→5: alineación y visibilidad
   ——————————————————————————————————————————— */

/* 1) Hacemos del grupo un flex horizontal, centrado y “abajado” */
.services-page .process-container.horizontal .row-group {
  display: flex;
  align-items: center;
  gap: 2rem;
  align-self: flex-end;       /* baja el grupo al mismo nivel que la caja 4 */
}

/* 2) Asegurar que la flecha 4→5 no esté en absolute ni se oculte */
.services-page .row-group .arrow-block {
  position: relative !important;
}

/* 3) Forzar la visibilidad tras el scroll (override a .arrow-block base) */
.services-page .row-group.animate-on-scroll.visible .arrow-4-5 {
  opacity: 1 !important;
  transform: translateY(0) rotate(0deg) !important;
}
/* —————————————————————————————————————————
   Ajuste final: alinear caja 5 / grupo 4→5 al fondo
   ————————————————————————————————————————— */

/* Si usas el wrapper .row-group (recomendado) */
.services-page .process-container.horizontal > .row-group {
  margin-top: auto !important;    /* empuja el grupo todo lo que pueda hacia abajo */
  align-self: flex-end !important;/* fuerza alineación al bottom del flex */
}

/* Por si NO tuvieras el .row-group y la caja 5 sigue sola */
.services-page .process-container.horizontal .step.substep {
  margin-top: auto !important;    /* empuja la caja 5 hacia abajo */
  align-self: flex-end !important;/* alinea la caja 5 al fondo */
}
/* 22. Espacio interno en el proceso (Services) */
.services-page .process-wrapper > .process-container {
  /* deja 2rem de espacio arriba y abajo */
  padding-top: 2rem !important;
  padding-bottom: 2rem !important;
}
/* 24. Hover con imagen semitransparente en cada .step */
.services-page .process-container .step {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  /* para que funcione la variable inline */
  --hover-image: none; 
}

.services-page .process-container .step::before {
  content: "";
  position: absolute;
  inset: 0; /* top:0; right:0; bottom:0; left:0; */
  background-image: var(--hover-image);
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  pointer-events: none;
  z-index: 0; /* detrás del contenido */
}

.services-page .process-container .step:hover::before {
  opacity: 0.3; /* ajusta entre 0.1 y 0.3 según quieras transparencia */
}

/* Asegurar que el contenido (número y texto) quede por encima */
.services-page .process-container .step > * {
  position: relative;
  z-index: 1;
}
/* 25. Recuperar estilo de .step cuando es enlace */
.services-page .process-container .step {
  display: block;               /* que ocupe todo el ancho y respete width/height */
  text-decoration: none;        /* quita el subrayado azul */
  color: inherit;               /* hereda el color definido en .step, no el de <a> */
}

/* Opcional: si quieres asegurarte de que el hover no ponga subrayado */
.services-page .process-container .step:hover {
  text-decoration: none;
}
/* 27. Control individual de posición de números */
.services-page .step-one .step-number {
  top: -1.5rem;    /* ejemplo: 0.5rem desde arriba */
  left: -0.5rem;   /* ejemplo: 0.5rem desde la izquierda */
}

.services-page .step-two .step-number {
  top: -1.5rem;   /* ajusta según quieras */
  left: -0.1rem;
}

.services-page .step-three .step-number {
  top: -1.5rem;
  left: -0.1rem;
}

.services-page .step-four .step-number {
  top: -1.5rem;
  left: -0.1rem;
}

.services-page .step-five .step-number {
  top: -1.6rem;
  left: -0.1rem;
}
/* 28. Línea divisoria horizontal y texto reposition en cada .step */
.services-page .process-container .step {
  position: relative;
  padding-top: 2.5rem;   /* deja espacio para el título */
  padding-bottom: 2.5rem;/* deja espacio para la descripción */
  /* Variables por defecto (ajústalas globalmente o por paso) */
  --line-x: 0rem;         /* distancia desde el borde izquierdo hasta donde arranca la línea */
  --line-y: 2.5rem;       /* distancia desde el borde superior para la línea */
  --title-bottom: 0.5rem; /* margen inferior del título */
  --desc-top: 0.5rem;     /* margen superior de la descripción */
}

/* 1) La línea: sale de la derecha del número hasta el final de la caja */
.services-page .process-container .step::after {
  content: "";
  position: absolute;
  top: var(--line-y);
  left: var(--line-x);
  width: calc(100% - var(--line-x) - 1rem); /* 1rem = padding derecho */
  height: 1px;
  background: var(--accent);
  z-index: 1;
}

/* 2) Título encima de la línea */
.services-page .process-container .step .step-title {
  display: block;
  margin-bottom: var(--title-bottom);
  position: relative;
  z-index: 2;
}

/* 3) Descripción debajo de la línea */
.services-page .process-container .step .step-desc {
  display: block;
  margin-top: var(--desc-top);
  position: relative;
  z-index: 2;
}
/* ———————————————————————————————————————————————
   29. Línea desde el centro del número hacia la derecha
   ——————————————————————————————————————————————— */

/* 1) Desactivar la línea antigua */
.services-page .process-container .step::after {
  display: none !important;
}

/* 2) Preparamos el número para posicionar sobre él */
.services-page .process-container .step .step-number {
  position: relative; /* ancla el ::after al número */
}

/* 3) Creamos la línea saliendo del centro del número */
.services-page .process-container .step .step-number::after {
  content: "";
  position: absolute;
  top: 50%;                  /* mitad vertical del número */
  left: 100%;                /* justo a la derecha del número */
  transform: translateY(-50%);
  width: var(--line-length, 2rem);  /* longitud personalizable via CSS variable */
  height: 1px;               /* grosor de la línea */
  background-color: currentColor;   /* mismo color que el número */
}
/* 30. Línea saliendo del centro del número, y step-number shrink-wrapped */

/* 1) Que el número solo ocupe lo que ocupa el texto */
.services-page .process-container .step .step-number {
  display: inline-block !important;
  width: auto !important;
  /* mantiene top/left absolutos */
  position: absolute !important;
}

/* 2) Quitar cualquier ::after antiguo en .step */
.services-page .process-container .step::after {
  display: none !important;
}

/* 3) Dibujar la línea desde el centro del número */
.services-page .process-container .step .step-number::after {
  content: "";
  position: absolute;
  top: 50%;                   /* mitad vertical del número */
  left: 100%;                 /* justo a la derecha de su propio ancho */
  transform: translateY(-50%);
  width: var(--line-length, 2rem);  /* puedes ajustar inline en cada .step */
  height: 1px;
  background-color: currentColor;   /* hereda el color del número */
  pointer-events: none;
}

/* 31. Posición individual de títulos y descripciones */

/* ➊ Prepara .step para posicionamiento absoluto de su texto */
.services-page .process-container .step {
  position: relative !important;
  /* valores por defecto (puedes cambiarlos inline o por paso) */
  --title-x: 3rem;
  --title-y: 1rem;
  --desc-x: 3rem;
  --desc-y: 3rem;
}

/* ➋ Título encima de la línea */
.services-page .process-container .step .step-title {
  position: absolute !important;
  top:    var(--title-y) !important;
  left:   var(--title-x) !important;
  margin: 0 !important;
  z-index: 2;
}

/* ➌ Descripción debajo de la línea */
.services-page .process-container .step .step-desc {
  position: absolute !important;
  top:    var(--desc-y) !important;
  left:   var(--desc-x) !important;
  margin: 0 !important;
  z-index: 2;
}



/* 32b. Alinear decimal con la base del número */
.services-page .step-number .step-decimal {
  font-size: 0.5em;          /* tu tamaño */
  position: relative;        /* para poder tirarlo hacia abajo */
  bottom: 0em;           /* ajusta este valor: más negativo = más abajo */
  margin-left: 0.1em;        /* un poquito de separación */
  color: inherit;
}
/* — Ajuste de ancla para services-detail — */
.services-page .detail-step {
  /* pon aquí la altura de tu header + un poco de margen */
  scroll-margin-top: 15rem;
}
/* —————————————————————————
   34. Desplazar detalle de Services
   ————————————————————————— */
.services-page .detail-process {
  /* 4rem para el header fijo + 1rem de margen extra */
  padding-top: 5rem !important;
}
/* —————————————————————————————————————————————
   35. Match detail-number to step-number style
   ————————————————————————————————————————————— */

/* Basado en .step-number en services.html */
.services-page .detail-step {
  position: relative;      /* para anclar el número */
  background: var(--card-bg);
  border: 2px solid var(--accent);
  border-radius: 8px;
  padding: 2rem;
  margin-bottom: 4rem;
}

.services-page .detail-step .detail-number {
  position: absolute;
  top: -16px;
  left: -2px;
  font-size: 6rem;
  transform: scaleY(1.2);
  transform-origin: top left;
  color: var(--bg-primary);
  background: var(--accent);
  padding: 0 0.5rem;
  border-radius: 4px;
  z-index: 2;
} /* :contentReference[oaicite:0]{index=0} */

/* —————————————————————————————————————————————
   36. Layout: foto a la izquierda, contenido con margen a la derecha
   ————————————————————————————————————————————— */

.services-page .detail-step .detail-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1rem;
}

@media (min-width: 700px) {
  .services-page .detail-step .detail-content {
    flex-direction: row;
    align-items: flex-start;
  }

  .services-page .detail-step .detail-content img {
    flex: none;
    max-width: 300px;
    margin-right: 2rem;  /* espacio entre imagen y texto */
    border-radius: 8px;
  }

  .services-page .detail-step .detail-content p {
    flex: 1;
    color: var(--text-secondary);
    line-height: 1.6;
  }
}
/* 37. Márgenes laterales para detail-process y centrar detail-step */
.services-page .detail-process {
  /* Ya tenías padding-top; aquí definimos también laterales */
  padding: 5rem 2rem 4rem;  /* 2rem de espacio a izquierda y derecha */
}

.services-page .detail-step {
  /* Limita el ancho y centra cada caja dentro del contenedor */
  max-width: 60rem;         /* o el valor que mejor te encaje */
  margin: 0 auto 4rem;      /* 0 arriba, auto centrado, 4rem abajo */
  padding: 2rem;            /* conserva tu padding interno */
}
/* --- Layout header grid: número / header --- */
.services-page .detail-step {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto 1fr;
  gap: 0.5rem 1rem;
  align-items: start;
}

/* Número ocupa primeras dos filas, columna 1 */
.services-page .detail-step .detail-number {
  grid-row: 1 / span 2;
  grid-column: 1;
  position: static;      /* anulamos el absolute previo */
  transform: none;
  margin: 0;
}

/* Header (título + desc) ocupa col 2, filas 1–2 */
.services-page .detail-step .detail-header {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* Divider en toda la fila siguiente */
.services-page .detail-step .detail-divider {
  grid-column: 1 / -1;
  margin: 0.75rem 0;
}

/* El contenido (imagen, etc) debajo, ocupa ambas columnas */
.services-page .detail-step .detail-content {
  grid-column: 1 / -1;
  margin-top: 0;  /* ya no necesita extra */
}
/* Alternar orden de imagen y texto en detail-content */
.services-page .detail-step .detail-content.reverse {
  flex-direction: column-reverse; /* en móvil sigue columna */
}

@media (min-width: 700px) {
  .services-page .detail-step .detail-content.reverse {
    flex-direction: row-reverse;
  }
}

/* Margen lateral al texto para que no quede pegado */
.services-page .detail-step .detail-text {
  flex: 1;
  color: var(--text-secondary);
  line-height: 1.6;
}

@media (min-width: 700px) {
  .services-page .detail-step .detail-content img {
    flex: none;
    max-width: 300px;
    border-radius: 8px;
  }
  .services-page .detail-step .detail-content img + .detail-text {
    margin-left: 2rem;
  }
  .services-page .detail-step .detail-content.reverse img + .detail-text {
    margin-left: 0;
    margin-right: 2rem;
  }
}
/* Sangría estándar en todos los lists */
ul {
  padding-left: 2rem;    /* espacio desde el borde izquierdo */
  margin-left: 0;        /* opcional: quita margen por defecto */
}
/* 38. Aumentar contraste en el texto de detalle */
.services-page .detail-step .detail-content p {
  /* escogemos el mismo tono que los títulos/desc breves */
  color: var(--text-primary) !important;
}
/* 38.1 Contraste máximo para párrafos e ítems en services-detail */
.services-page .detail-step .detail-content p,
.services-page .detail-step .detail-content li {
  color: var(--text-primary) !important;
}

/* 38.2 Contraste máximo en los Deliverables de cada paquete */
.services-page .package h3,
.services-page .package p,
.services-page .package ul li {
  color: var(--text-primary) !important;
}
/* 39. Forzar color primario en todo el detalle */
.services-page .detail-step .detail-text {
  color: var(--text-primary) !important;
}
/* 40. Centrar verticalmente imagen en detail-content */
@media (min-width: 700px) {
  /* 41. Texto arriba, imagen centrada verticalmente */
  .services-page .detail-step .detail-content {
    align-items: flex-start; /* texto arriba */
  }

  .services-page .detail-step .detail-content img {
    align-self: center;      /* solo la foto se centra */
  }
}
/* El ancla “invisible” que corrige el scroll */
.services-page .scroll-anchor {
  display: block;
  height: 0;                                 /* no interfiere con el flujo */
  margin-top: calc(-1 * var(--header-height)); /* lo desplaza hacia arriba */
  padding-top: var(--header-height);           /* deja hueco para el header */
  visibility: hidden;                          /* no se ve */
  pointer-events: none;
}

/* Contenedor principal con estilo de tarjeta */
.portfolio-gallery.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
  background: var(--card-bg);
  border: 2px solid var(--accent);
  border-radius: 8px;
}

/* Card interna que agrupa la grid */
.gallery-card {
  margin-top: 1.5rem;
}
/* Gallery grid: 3 cols desktop, 2 tablet, 1 móvil */
.gallery-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(4, 1fr);
  justify-items: center;
}

.gallery-item {
  height: 150px;
  width: 210px;
  position: relative;
  cursor: pointer;
  overflow: hidden;
  border-radius: 1px;
}
.gallery-item img {
  width: 100%;
  height: 100%;
  display:flex;
  object-fit:cover;
  transition: transform 0.3s;
}
.gallery-item:hover img {
  transform: scale(1.1);
}
.gallery-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
  color: #eae8e3;
  font-size:xx-small;
  padding: 0.2rem;
  text-align: center;
  opacity: 0;
  transition: opacity 0.4s;
}
.gallery-item:hover .gallery-overlay {
  opacity: 1;
}

/* Modal */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.8);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.modal.visible {
  display: flex;
}
.modal-content {
  position: relative;
  max-width: 90%;
  max-height: 90%;
}
.modal-close {
  position: absolute;
  top: -1rem;
  right: -1rem;
  font-size: 2rem;
  color: white;
  cursor: pointer;
}
.modal-carousel {
  position: relative;
  text-align: center;
}
.carousel-images img {
  max-width: 100%;
  max-height: 80vh;
}
.carousel-prev,
.carousel-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 2rem;
  color: white;
  cursor: pointer;
}
.carousel-prev { left: -2rem; }
.carousel-next { right: -2rem; }
/* 46. Ajuste del contenedor de portfolio */
.portfolio-gallery.container {
  /* Empujamos todo por debajo del header y centramos */
  margin: calc(var(--header-height) + 4rem) auto 2rem;
  max-width: 1000px;       /* un pelín más estrecho que antes */
  padding: 1.5rem;
}
/* 50. Styling del carousel en el modal */
.modal-carousel .carousel-images img {
  display: block;
  max-width: 100%;
  max-height: 80vh;
  margin: 0 auto;                           /* centra horizontalmente */
  background: var(--card-bg);               /* mismo fondo de tarjetas */
  border: 4px solid var(--accent);          /* marco con color de acento */
  border-radius: 8px;                       /* esquinas redondeadas */
  box-shadow: 0 4px 12px var(--shadow);     /* sombra suave */
  object-fit: contain;                      /* evita recortes bruscos */
  padding: 0.5rem;                          /* pequeño padding interior */
}
/* 51. Marco fijo para el carousel, centrando imágenes pequeñas */
:root {
  --carousel-frame-width: 80vw;   /* ancho máximo del marco */
  --carousel-frame-height: 60vh;  /* alto máximo del marco */
}

.modal-carousel .carousel-images {
  /* definimos el marco fijo */
  width: var(--carousel-frame-width);
  height: var(--carousel-frame-height);
  margin: 0 auto;                  /* centrado horizontal */
  padding: 0.5rem;                 /* espacio interior */
  background: var(--card-bg);      /* mismo fondo de tus cards */
  border: 4px solid var(--accent); /* el mismo marco que antes */
  border-radius: 8px;
  box-shadow: 0 4px 12px var(--shadow);
  display: flex;
  align-items: center;             /* centra verticalmente el img */
  justify-content: center;         /* centra horizontalmente */
}

.modal-carousel .carousel-images img {
  /* la imagen se ajusta dentro del marco sin recortar */
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}
/* 53. Mostrar descripción junto al carousel en el modal */
.modal-frame {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
}

/* Móvil: descripción encima, carrusel debajo */
.modal-description {
  color: var(--text-primary);   /* mismo tono que tus títulos */
  font-size: 1rem;
  line-height: 1.5;
}

/* Escritorio: descripcion a la izquierda del carousel */
@media (min-width: 700px) {
  .modal-frame {
    flex-direction: row;
    align-items: flex-start;
  }
  .modal-description {
    flex: 1;
    margin-right: 1rem;
  }
  .modal-carousel {
    flex: 2;
  }
}
/*  —————————————————————————————————————
    Integrar descripción en el marco sin romper el resize
    ————————————————————————————————————— */

/* 1) Asegúrate de que .modal-content es flex column por defecto */
#portfolio-modal .modal-content {
  display: flex !important;
  flex-direction: column !important;
}

/* 2) La descripción ocupa su espacio arriba */
#portfolio-modal .modal-description {
  padding: 1rem;
  color: var(--text-primary);
  flex: 0 0 auto;
  background: var(--card-bg);
}

/* 3) El carrusel ocupa el resto, con overflow oculto */
#portfolio-modal .modal-carousel {
  flex: 1 1 auto;
  position: relative;
  overflow: hidden;
}

/* 4) En desktop, pasamos a layout fila: descripción | carrusel */
@media (min-width: 700px) {
  #portfolio-modal .modal-content {
    flex-direction: row !important;
  }
  #portfolio-modal .modal-description {
    flex: 1;
    margin-right: 1rem;  /* espacio entre texto e imágenes */
    max-height: var(--modal-height); /* evitar overflow */
    overflow-y: auto;
  }
  #portfolio-modal .modal-carousel {
    flex: 2;
  }
}

/* 5) Mantenemos la regla clave para escalar las <img> dentro del carousel */
#portfolio-modal .carousel-images img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
/* ————————————————————————————————————————————
   Unificar descripción + carousel en un único marco
   ———————————————————————————————————————————— */

/* 1) Quitamos borde/fondo de .modal-content y permitimos overflow visible */
#portfolio-modal .modal-content {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  overflow: visible !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 2) El verdadero “marco” que envuelve descripción + carousel */
#portfolio-modal .modal-frame {
  --w: var(--modal-width);
  --h: var(--modal-height);
  width: var(--w);
  height: var(--h);
  background: var(--card-bg);
  border: 2px solid var(--accent);
  border-radius: 8px;
  box-sizing: border-box;
  padding: 1rem;
  position: relative;           /* para colocar flechas dentro */
  display: flex;
  flex-direction: column;       /* descripción arriba, carousel debajo */
  overflow: hidden;
}

/* 3) Descripción ocupa su espacio natural arriba */
#portfolio-modal .modal-description {
  flex: 0 0 auto;
  color: var(--text-primary);
  margin-bottom: 1rem;
  overflow-y: auto;             /* scroll si es demasiado larga */
}

/* 4) Carousel ocupa todo el espacio restante */
#portfolio-modal .modal-carousel {
  flex: 1 1 auto;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* 5) En desktop, pasamos a fila: descripción | carousel */
@media (min-width: 700px) {
  #portfolio-modal .modal-frame {
    flex-direction: row;
  }
  #portfolio-modal .modal-description {
    flex: 1;
    margin-right: 1rem;
    margin-bottom: 0;
    max-height: var(--h);      /* evita que empuje el marco */
  }
  #portfolio-modal .modal-carousel {
    flex: 2;
  }
}

/* 6) Imagen dentro del carousel: siempre cabe dentro del marco */
#portfolio-modal .carousel-images img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

/* 7) Flechas de navegación SIEMPRE dentro del marco, centradas */
#portfolio-modal .carousel-prev,
#portfolio-modal .carousel-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.5);
  color: white;
  border: none;
  font-size: 2rem;
  width: 2.5rem;
  height: 2.5rem;
  line-height: 2.5rem;
  text-align: center;
  border-radius: 50%;
  cursor: pointer;
  z-index: 10;
}

#portfolio-modal .carousel-prev { left: 1rem; }
#portfolio-modal .carousel-next { right: 1rem; }
/* Añade espacio entre los <p> de la descripción del modal */
#portfolio-modal .modal-description p {
  margin-bottom: 1.5rem;  /* ajusta a lo que necesites */
}
/*  ————————————————————————————————————————— 
    𝐑𝐞𝐦𝐨𝐯𝐞 imágenes border & 𝐓𝐡𝐢𝐧𝐧𝐞𝐝 𝐦𝐨𝐝𝐚𝐥-𝐟𝐫𝐚𝐦𝐞 
    —————————————————————————————————————————  */

/* 1) Quita el borde que pudiera estar en el <img> del carousel */
#portfolio-modal .carousel-images img {
  border: none !important;
}

/* 2) Si también hay un borde en el contenedor de imágenes, bórralo */
#portfolio-modal .modal-carousel .carousel-images {
  border: none !important;
}

/* 3) Adelgaza el borde del marco principal (.modal-frame) */
#portfolio-modal .modal-frame {
  border: 1px solid var(--accent) !important;
}
.mobile-footer {
  background: var(--bg-alt);
  color: var(--text-secondary);
  text-align: center;
  padding: 2rem 1rem 1rem;
  font-size: 0.9rem;
  text-decoration: none;
  border-top: 1px solid var(--border);
}

.mobile-footer nav {
  margin-bottom: 1rem;
}

.mobile-footer nav a {
  margin: 0 0.75rem;
  color: var(--text-primary);
  text-decoration: none;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.85rem;
}

.mobile-footer nav a:hover {
  color: var(--accent);
}

.footer-extras {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 1rem;
}

.mobile-footer img.footer-icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
  display: inline-block;
}