/* Estilos específicos para pagina.html */

/* Added CSS variable for highlight color */
:root {
  --resaltado: #00a7da;
  --resaltado2:#02779D; /*valida*/
}

/* Hero Section con Parallax */
.page-hero {
  position: relative;
  width: 100%;
  /*height: 100vh;*/
  min-height: 600px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (min-width: 768px) {
  .page-hero {
    height: calc(90vh - 90px);
  }
}
/* Imagen del hero con efecto parallax */
.hero-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 120%;
  z-index: 1;
  will-change: transform;
}

.hero-image picture {
  width: 100%;
  height: 100%;
  display: block;
}

.hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Overlay oscuro para mejorar legibilidad */
.page-hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  z-index: 2;
}

/* Contenido del hero */
.page-hero .hero-content {
  position: relative;
  z-index: 3;
  width: 100%;
  padding: var(--spacing-xl) 0;
  text-align: center;
  max-width: 1200px;
}

/* Added hero-text wrapper for flexible positioning without affecting container max-width */
.page-hero .hero-text {
  text-align: center;
  max-width: 800px;
  max-width: 68ch;
  margin: 0 auto;
}

/*aquí hay que meter clases para alinear a la izquierda el .hero-text con margin-left:auto*/

.page-hero .hero-content .container {
  max-width: 800px;
  max-width: 1200px;
}

/* Icono SVG */
.page-hero .witicon {
  font-size: 4rem;
  color: white;
  margin-bottom: var(--spacing-lg);
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
}

/* Título del hero */
.page-hero h1 {
  color: white;
  font-size: var(--font-size-3xl);
  font-weight: 700;
  margin-bottom: var(--spacing-lg);
  line-height: 1.2;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
  letter-spacing: 0.02em;
}

/* Párrafo del hero */
.page-hero .parrafada {
  color: white;
  font-size: var(--font-size-lg);
  line-height: 1.6;
  margin: 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
  max-width: 70ch;
  margin-inline: auto;
}
.page-hero .parrafada > * {
  margin-bottom: 0;
}

/* Responsive para tablets */
@media (max-width: 992px) {
  .page-hero {
    height: 80vh;
    min-height: 500px;
  }

  .page-hero .witicon {
    font-size: 3rem;
  }

  .page-hero h1 {
    font-size: var(--font-size-2xl);
  }

  .page-hero p {
    font-size: var(--font-size-md);
  }
}

/* Responsive para móviles */
@media (max-width: 768px) {
  .page-hero {
    height: 70vh;
    min-height: 450px;
  }

  .page-hero .hero-content {
    padding: var(--spacing-lg) var(--spacing-md);
  }

  .page-hero .witicon {
    font-size: 2.5rem;
    margin-bottom: var(--spacing-md);
  }

  .page-hero h1 {
    font-size: var(--font-size-xl);
    margin-bottom: var(--spacing-md);
  }

  .page-hero p {
    font-size: var(--font-size-sm);
    line-height: 1.5;
  }
}

/* Móviles pequeños */
@media (max-width: 480px) {
  .page-hero {
    height: 60vh;
    min-height: 400px;
  }

  .page-hero .witicon {
    font-size: 2rem;
  }

  .page-hero h1 {
    font-size: var(--font-size-lg);
  }

  .page-hero p {
    font-size: var(--font-size-sm);
  }
}

/* Desactivar parallax en dispositivos con prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .hero-image {
    height: 100% !important;
    transform: none !important;
  }
}

/* Feature Section Base Styles */
.feature-section {
  padding: var(--spacing-4xl) 0;
  background-color: var(--gris-6);
}

/* Odd sections have white background */
.feature-section:nth-of-type(even) {
  background-color: white;
}

.feature-section .feature-content {
  width: 100%;
}

.feature-section h2 {
  color: var(--primario);
  font-size: var(--font-size-2xl);
  margin-bottom: var(--spacing-2xl);
  text-align: center;
  line-height: 1.2;
}

.feature-section h2 span {
  color: var(--resaltado);
}

/* Section Tarjetas - Flip Cards */
.section-tarjetas ul.listado-tarjetas {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-xl);
  list-style: none;
  padding: 0;
  margin: 0;
}

@media (min-width: 768px) {
  .section-tarjetas ul.listado-tarjetas {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Card Tarjeta - 3D Flip Effect */
.card-tarjeta {
  position: relative;
  perspective: 1000px;
  cursor: pointer;
  outline: none;
  display: grid;
  grid-template-areas: "card";
  transform-style: preserve-3d;
}

.card-tarjeta .imagen,
.card-tarjeta .texto {
  grid-area: card;
  backface-visibility: hidden;
  transition: transform 0.6s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-2xl);
  border-radius: 8px;
  min-height: 250px;
}

/* Front face - .imagen */
.card-tarjeta .imagen {
  background-color: white;
  color: var(--primario);
  transform: rotateY(0deg);
  gap: var(--spacing-md);
  text-align: center;
}

.card-tarjeta .imagen .witicon {
  font-size: 4rem;
  color: var(--primario);
}

.card-tarjeta .imagen h3 {
  font-size: var(--font-size-xl);
  font-weight: 700;
  margin: 0;
  text-transform: uppercase;
  color: var(--primario);
}

/* Back face - .texto */
.card-tarjeta .texto {
  background-color: var(--primario);
  color: white;
  transform: rotateY(180deg);
}

.card-tarjeta .texto p {
  line-height: 1.6;
  text-align: left;
  /*margin: 0;*/
  margin-right: auto;
}
.card-tarjeta .texto :is(ul, ol) {
  list-style: initial;
}
.card-tarjeta .texto > * {
  margin-bottom: var(--spacing-md);
}

/* Flip animation on hover for desktop and click for mobile */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .card-tarjeta:hover .imagen,
  .card-tarjeta:focus .imagen {
    transform: rotateY(-180deg);
  }

  .card-tarjeta:hover .texto,
  .card-tarjeta:focus .texto {
    transform: rotateY(0deg);
  }
}

/* Flip animation on click/tap for touch devices */
@media (hover: none) and (prefers-reduced-motion: no-preference) {
  .card-tarjeta.flipped .imagen {
    transform: rotateY(-180deg);
  }

  .card-tarjeta.flipped .texto {
    transform: rotateY(0deg);
  }
}

/* For users who prefer reduced motion - show both sides stacked */
@media (prefers-reduced-motion: reduce) {
  .card-tarjeta {
    display: block;
  }

  .card-tarjeta .imagen,
  .card-tarjeta .texto {
    transform: none !important;
    backface-visibility: visible;
  }

  .card-tarjeta .texto {
    margin-top: var(--spacing-md);
  }
}

/* No-JS fallback - show both sides stacked */
.no-js .card-tarjeta {
  display: block;
}

.no-js .card-tarjeta .imagen,
.no-js .card-tarjeta .texto {
  transform: none !important;
  backface-visibility: visible;
}

.no-js .card-tarjeta .texto {
  margin-top: var(--spacing-md);
}

/* Responsive adjustments */
@media (max-width: 767px) {
  .feature-section {
    padding: var(--spacing-2xl) 0;
  }

  .feature-section h2 {
    font-size: var(--font-size-xl);
    margin-bottom: var(--spacing-xl);
  }

  .card-tarjeta .imagen .witicon {
    font-size: 3rem;
  }

  .card-tarjeta .imagen h3 {
    font-size: var(--font-size-lg);
  }

  .card-tarjeta .imagen,
  .card-tarjeta .texto {
    padding: var(--spacing-lg);
  }
}

/* Section Cuatro Columnas */
.cuatro-columnas .parrafada {
  max-width: 68ch;
  margin: 0 auto var(--spacing-2xl);
  text-align: center;
}

.cuatro-columnas .parrafada p {
  text-align: left;
  color: var(--texto);
  line-height: 1.6;
  margin-bottom: var(--spacing-md);
}

.cuatro-columnas .parrafada p:last-child {
  margin-bottom: 0;
}

/* Contenedor de columnas con flexbox */
.contenido-cuatro-columnas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xl);
  justify-content: center;
}

/* Columnas individuales */
.columna {
  flex: 1 1 100%;
  min-width: 250px;
  max-width: 100%;
  background-color: white;
  padding: var(--spacing-xl);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.columna > .witicon {
  font-size: 6rem;
  color: var(--primario);
  margin-bottom: var(--spacing-md);
}

.columna h3 {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--primario);
  margin-bottom: var(--spacing-sm);
  line-height: 1.2;
}

.columna .subtitulo {
  font-size: var(--font-size-md);
  color: var(--primario);
  margin-bottom: var(--spacing-lg);
  line-height: 1.3;
  font-weight: 500;
}

.contenido-cuatro-columnas .columna-texto-izquierda :is(h3, .subtitulo) {
  align-self: flex-start;
  text-align: left;
}

/* Parrafada dentro de columna */
.columna .parrafada {
  width: 100%;
  max-width: none;
  margin: 0;
  text-align: left;
  padding-top: var(--spacing-md);
  border-top: 1px solid #ddd;
}

.columna .parrafada p {
  color: var(--texto);
  line-height: 1.6;
  margin: 0;
}

    .columna .parrafada a {
        color: var(--primario-claro);
        text-decoration: underline;
        text-underline-offset: 0.28em;
    }

/* Acordeón */
.acordeon {
  width: 100%;
}

.acordeon-item {
  border-bottom: 1px solid var(--gris-5);
}

.acordeon-item:last-child {
  border-bottom: none;
}

.acordeon-header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-md) 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--primario);
  transition: color 0.3s ease;
}

.acordeon-header:hover,
.acordeon-header:focus {
  color: var(--resaltado);
  outline: none;
}
.acordeon-header:focus-visible {
  outline: 1px solid var(--primario-claro);
}

.acordeon-header span {
  flex: 1;
}

.acordeon-icon {
  flex-shrink: 0;
  margin-left: var(--spacing-sm);
  transition: transform 0.3s ease;
  color: var(--primario);
}

.acordeon-header[aria-expanded="true"] .acordeon-icon {
  transform: rotate(180deg);
}

.acordeon-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  text-align: left;
}

.acordeon-content p {
  color: var(--texto);
  line-height: 1.6;
}
.acordeon-content > * {
  margin-bottom: var(--spacing-md);
}
.acordeon-content > *:last-child {
  margin-bottom: 0;
}
.acordeon-content :is(ul, ol) {
  list-style: initial;
  padding-left: 1.25em;
}

/* Responsive: 2 columnas en tablets */
@media (min-width: 768px) {
  .columna {
    flex: 1 1 calc(50% - var(--spacing-xl));
    max-width: calc(50% - var(--spacing-xl));
  }
}

/* Responsive: 4 columnas en desktop */
@media (min-width: 992px) {
  .columna {
    flex: 1 1 calc(25% - var(--spacing-xl));
    max-width: calc(25% - var(--spacing-xl));
    min-width: 30ch;
  }
}

/* Ajustes para 3 columnas si es necesario */
@media (min-width: 992px) {
  .contenido-cuatro-columnas:has(.columna:nth-child(3):last-child) .columna {
    flex: 1 1 calc(33.333% - var(--spacing-xl));
    max-width: calc(33.333% - var(--spacing-xl));
  }
}

/* Responsive mobile */
@media (max-width: 767px) {
  .cuatro-columnas .parrafada {
    margin-bottom: var(--spacing-xl);
  }

  .columna {
    padding: var(--spacing-lg);
  }

  .columna .witicon {
    font-size: 2.5rem;
  }

  .columna h3 {
    font-size: var(--font-size-lg);
  }

  .columna .subtitulo {
    font-size: var(--font-size-sm);
  }
}

/* Section Carrusel */
.section-carrusel .parrafada {
  max-width: 68ch;
  margin: 0 auto var(--spacing-2xl);
  text-align: center;
}

.section-carrusel .parrafada p {
  text-align: left;
  color: var(--texto);
  line-height: 1.6;
  margin-bottom: var(--spacing-md);
}

.section-carrusel .parrafada p:last-child {
  margin-bottom: 0;
}

/* Carousel wrapper */
.carousel-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 0 var(--spacing-3xl);
}

/* Carousel container */
.contenido-carrusel {
  display: flex;
  gap: var(--spacing-xl);
  transition: transform 0.5s ease-in-out;
  will-change: transform;
}

/* Carousel items */
.carousel-item {
  flex: 0 0 100%;
  min-width: 100%;
  scroll-snap-align: start;
}

/* Image carousel items */
.carousel-item.imagen {
  /*aspect-ratio: 16 / 9;*/
  /*border-radius: 8px;*/
  overflow: hidden;
  /*box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);*/
}

.carousel-item.imagen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Text carousel items */
.carousel-item.texto {
  background-color: transparent;
  padding: var(--spacing-2xl);
  /*border-radius: 8px;*/
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  /*box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);*/
}

.carousel-item.texto .witicon {
  font-size: 4rem;
  color: var(--primario);
  margin-bottom: var(--spacing-md);
}

.carousel-item.texto h3 {
  font-size: var(--font-size-xl);
  font-weight: 500;
  color: var(--primario);
  margin-bottom: var(--spacing-sm);
  line-height: 1.2;
}

.carousel-item.texto .subtitulo {
  font-size: var(--font-size-lg);
  color: var(--primario);
  margin-bottom: var(--spacing-lg);
  margin-bottom: 0;
  line-height: 1.3;
}

.carousel-item.texto .parrafada {
  width: 100%;
  max-width: 60ch;
  margin: 0;
  text-align: left;
  margin-top: var(--spacing-lg);
}

.carousel-item.texto .parrafada p {
  color: var(--texto);
  line-height: 1.4;
  margin: 0;
  margin-bottom: var(--spacing-xs);
}

.carousel-item.texto .parrafada li {
  line-height: 1.4;
  margin-bottom: var(--spacing-xs);
}

/* Carousel arrows */
.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: white;
  border: 2px solid var(--primario);
  color: var(--primario);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 10;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.carousel-arrow:hover,
.carousel-arrow:focus {
  background-color: var(--primario);
  color: white;
  outline: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.carousel-arrow:focus-visible {
  outline: 2px solid var(--resaltado);
  outline-offset: 2px;
}

.carousel-arrow-left {
  left: 0;
}

.carousel-arrow-right {
  right: 0;
}

.carousel-arrow svg {
  width: 24px;
  height: 24px;
}

/* Responsive: 2 items visible on tablets */
@media (min-width: 768px) {
  .carousel-item {
    flex: 0 0 calc(50% - var(--spacing-xl) / 2);
    min-width: calc(50% - var(--spacing-xl) / 2);
  }
}

/* Responsive: 3 items visible on desktop */
@media (min-width: 1200px) {
  .carousel-item {
    flex: 0 0 calc(33.333% - var(--spacing-xl) * 2 / 3);
    min-width: calc(33.333% - var(--spacing-xl) * 2 / 3);
  }
}

/* Mobile adjustments */
@media (max-width: 767px) {
  .carousel-wrapper {
    padding: 0 var(--spacing-xl);
  }

  .carousel-arrow {
    width: 40px;
    height: 40px;
  }

  .carousel-arrow svg {
    width: 20px;
    height: 20px;
  }

  .carousel-item.texto {
    padding: var(--spacing-lg);
  }

  .carousel-item.texto .witicon {
    font-size: 3rem;
  }

  .carousel-item.texto h3 {
    font-size: var(--font-size-lg);
  }

  .carousel-item.texto .subtitulo {
    font-size: var(--font-size-sm);
  }
}

/* Disable transitions during touch/drag */
.contenido-carrusel.dragging {
  transition: none;
}

/* Prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
  .contenido-carrusel {
    transition: none;
  }
}

/* Section Dos Columnas */
.dos-columnas .contenido-dos-columnas {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xl);
}

.dos-columnas .contenido-dos-columnas > div {
  flex: 1;
}

/* Text content in dos-columnas */
.dos-columnas .texto {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.dos-columnas .texto p {
  color: var(--texto);
  line-height: 1.6;
  margin: 0;
}

/* Image content in dos-columnas */
.dos-columnas .imagen {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: white;
  padding: var(--spacing-lg);
  border-radius: 8px;
  padding: 0;
}

.dos-columnas .imagen img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

/* Responsive: 2 columns from 768px */
@media (min-width: 768px) {
  .dos-columnas .contenido-dos-columnas {
    flex-direction: row;
    align-items: flex-start;
  }

  .dos-columnas .contenido-dos-columnas-reversa {
    flex-direction: row-reverse;
  }

  .dos-columnas .contenido-dos-columnas > div {
    flex: 1 1 50%;
  }
}

/* Mobile adjustments */
@media (max-width: 767px) {
  .dos-columnas .contenido-dos-columnas {
    gap: var(--spacing-xl);
  }

  .dos-columnas .imagen {
    padding: var(--spacing-md);
    padding: 0;
  }
}

/* Lista de ventajas en dos-columnas */
.dos-columnas .texto ul.iconos {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}

.dos-columnas .texto ul.iconos li {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
  flex: 1 1 100%;
  min-width: 0;
}

.dos-columnas .texto ul.iconos li svg {
  font-size: var(--font-size-4xl);
  flex-shrink: 0;
}

.dos-columnas .texto ul.iconos li h3 {
  margin: 0;
  color: var(--texto);
  font-size: var(--font-size-md);
  line-height: 1.2;
  font-weight: 600;
}

@media (min-width: 768px) {
  .dos-columnas .texto ul.iconos {
    gap: 1.5rem;
  }

  .dos-columnas .texto ul.iconos li {
    flex: 0 1 calc(50% - 0.75rem);
  }
}

@media (min-width: 992px) {
  .dos-columnas .texto ul.iconos li {
    flex: 0 1 calc(33.333% - 1rem);
  }
}

/* Sección cuatro columnas con imágenes */
.cuatro-columnas-imagenes .columna {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.cuatro-columnas-imagenes .columna img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.3s ease;
}

.cuatro-columnas-imagenes .columna:hover img {
  transform: scale(1.05);
}

/* Icono de lupa */
.zoom-icon {
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 40px;
  height: 40px;
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.cuatro-columnas-imagenes .columna:hover .zoom-icon {
  opacity: 1;
}

.zoom-icon svg {
  width: 20px;
  height: 20px;
  fill: white;
}

/* Modal de imagen */
.image-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  z-index: 10000;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.image-modal.active {
  display: flex;
}

.image-modal-content {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-modal-content img {
  max-width: 90vw;
  max-height: 90vh;
  width: auto;
  height: auto;
  object-fit: contain;
}

.image-modal-close {
  position: absolute;
  top: -40px;
  right: 0;
  background: none;
  border: none;
  color: white;
  font-size: 40px;
  cursor: pointer;
  padding: 0;
  width: 40px;
  height: 40px;
  line-height: 1;
}

.image-modal-close:hover {
  color: var(--resaltado);
}

/* Prevenir scroll cuando modal está abierto */
body.modal-open {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .cuatro-columnas-imagenes .columna img,
  .zoom-icon {
    transition: none;
  }
}


/* Section Dos Columnas */
.dos-columnas .imagen {
  position: relative;
  overflow: hidden;
}

/* Añadir cursor pointer cuando tiene zoom */
.dos-columnas .imagen.has-zoom {
  cursor: pointer;
}

.dos-columnas .imagen img {
  transition: transform 0.3s ease;
}

/* Efecto hover para imágenes con zoom */
.dos-columnas .imagen.has-zoom:hover img {
  transform: scale(1.02);
}

/* Estilos para el icono de lupa en dos-columnas */
.dos-columnas .zoom-icon-dos-columnas {
  position: absolute;
  bottom: 15px;
  right: 15px;
  width: 48px;
  height: 48px;
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease, background-color 0.3s ease;
  pointer-events: none;
  z-index: 5;
}

.dos-columnas .imagen.has-zoom:hover .zoom-icon-dos-columnas,
.dos-columnas .imagen.has-zoom:focus .zoom-icon-dos-columnas {
  opacity: 1;
}

.dos-columnas .zoom-icon-dos-columnas:hover {
  background-color: rgba(0, 0, 0, 0.85);
}

.dos-columnas .zoom-icon-dos-columnas svg {
  width: 24px;
  height: 24px;
  fill: white;
}

/* Outline para accesibilidad en dos-columnas */
.dos-columnas .imagen.has-zoom:focus {
  outline: 2px solid var(--primario);
  outline-offset: 2px;
}

/* Mobile adjustments */
@media (max-width: 767px) {
  .dos-columnas .zoom-icon-dos-columnas {
    width: 40px;
    height: 40px;
    bottom: 10px;
    right: 10px;
  }

  .dos-columnas .zoom-icon-dos-columnas svg {
    width: 20px;
    height: 20px;
  }
}

/* Añadir soporte para prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .dos-columnas .imagen img,
  .dos-columnas .zoom-icon-dos-columnas {
    transition: none;
  }
}








/* Added job application form styles */
/* Section Formulario */
.section-formulario .container {
  max-width: 800px;
  margin: 0 auto;
}

.section-formulario h2 {
  margin-bottom: var(--spacing-3xl);
}

/* Added h1 styles for contact form section */
.section-formulario h1 {
  color: var(--primario);
  font-size: var(--font-size-2xl);
  margin-bottom: var(--spacing-xl);
  text-align: center;
  line-height: 1.2;
}

.section-formulario h1 span {
  color: var(--resaltado);
}

/* Added parrafada styles for contact form intro text */
.section-formulario .parrafada {
  max-width: 68ch;
  margin: 0 auto var(--spacing-2xl);
  text-align: center;
}

.section-formulario .parrafada p {
  color: var(--texto);
  line-height: 1.6;
  margin: 0;
}

.section-formulario form {
  background-color: white;
  padding: var(--spacing-2xl);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Form groups */
.form-group {
  margin-bottom: var(--spacing-xl);
}

.form-group:last-of-type {
  margin-bottom: var(--spacing-2xl);
}

/* Added form-row for side-by-side fields */
.form-row {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
}

@media (min-width: 768px) {
  .form-row {
    flex-direction: row;
  }

  .form-row .form-group {
    flex: 1;
    margin-bottom: 0;
  }
}

/* Labels */
.form-group label,
.form-group legend {
  display: block;
  font-weight: 600;
  color: var(--primario);
  margin-bottom: var(--spacing-sm);
  font-size: var(--font-size-md);
}

.form-group legend {
  padding: 0;
  border: none;
}

.required {
  color: #d32f2f;
}

/* Input fields */
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group select,
.form-group textarea {
  width: 100%;
  padding: var(--spacing-md);
  border: 2px solid var(--gris-5);
  border-radius: 4px;
  font-size: var(--font-size-md);
  font-family: inherit;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

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

.form-group input[type="text"]:focus,
.form-group input[type="email"]:focus,
.form-group input[type="tel"]:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--primario);
  box-shadow: 0 0 0 3px rgba(0, 71, 171, 0.1);
}

/* Phone input group */
.phone-input-group {
  display: flex;
  gap: var(--spacing-sm);
}

.phone-input-group select {
  flex: 0 0 120px;
}

.phone-input-group input[type="tel"] {
  flex: 1;
}

/* Privacy checkbox */
.privacy-checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
}

.privacy-checkbox input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  cursor: pointer;
  accent-color: var(--primario);
  flex-shrink: 0;
}

.privacy-checkbox label {
  cursor: pointer;
  font-weight: normal;
  color: var(--texto);
  margin: 0;
}

.privacy-checkbox a {
  color: var(--resaltado);
  text-decoration: underline;
}

.privacy-checkbox a:hover {
  color: var(--primario);
}

/* Error messages */
.error-message {
  display: none;
  color: #d32f2f;
  font-size: var(--font-size-sm);
  margin-top: var(--spacing-xs);
}

.form-group.has-error input[type="text"],
.form-group.has-error input[type="email"],
.form-group.has-error input[type="tel"],
.form-group.has-error select,
.form-group.has-error textarea {
  border-color: #d32f2f;
}

.form-group.has-error .error-message {
  display: block;
}

/* Submit button */
.form-actions {
  text-align: center;
  margin-top: var(--spacing-2xl);
}

.btn-submit {
  background-color: var(--primario);
  color: white;
  border: none;
  padding: var(--spacing-md) var(--spacing-3xl);
  font-size: var(--font-size-lg);
  font-weight: 600;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
  min-width: 200px;
}

.btn-submit:hover {
  background-color: var(--primario-oscuro);
  transform: translateY(-2px);
}

.btn-submit:active {
  transform: translateY(0);
}

.btn-submit:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 71, 171, 0.3);
}

.btn-submit:disabled {
  background-color: var(--gris-4);
  cursor: not-allowed;
  transform: none;
}

/* Success message */
.success-message {
  display: none;
  background-color: #4caf50;
  color: white;
  padding: var(--spacing-lg);
  border-radius: 4px;
  text-align: center;
  margin-bottom: var(--spacing-xl);
  display: block;
}

.success-message.show {
  display: block;
}

/* Responsive adjustments */
@media (max-width: 767px) {
  .section-formulario form {
    padding: var(--spacing-lg);
  }

  .btn-submit {
    width: 100%;
    min-width: auto;
  }

  .phone-input-group {
    flex-direction: column;
  }

  .phone-input-group select {
    flex: 1;
    width: 100%;
  }
}







/* Error message */
.error-message-form {
    background-color: var(--rojo, #7a0606);
    background-color:#7a0606;
    color: white;
    padding: var(--spacing-md);
    border-radius: 4px;
    margin-bottom: var(--spacing-md);
    text-align: center;
    font-weight: 600;
    display: block;
}




/* Added job search section styles */
/* Section Buscador Vacantes */
.buscador-vacantes .parrafada {
  max-width: 68ch;
  margin: 0 auto var(--spacing-2xl);
  text-align: center;
}

.buscador-vacantes .parrafada p {
  color: var(--texto);
  line-height: 1.6;
  margin: 0;
}

.formulario-vacantes {
  max-width: 900px;
  margin: 0 auto;
}

.formulario-vacantes form {
  background-color: white;
  padding: var(--spacing-2xl);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Form row for search filters */
.form-row-search {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  align-items: stretch;
}

@media (min-width: 768px) {
  .form-row-search {
    flex-direction: row;
    align-items: flex-end;
  }
}

/* Form groups for search */
.form-group-search {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.form-group-search label {
  display: block;
  font-weight: 600;
  color: var(--primario);
  margin-bottom: var(--spacing-sm);
  font-size: var(--font-size-md);
}

.form-group-search select {
  width: 100%;
  padding: var(--spacing-md);
  border: 2px solid var(--gris-5);
  border-radius: 4px;
  font-size: var(--font-size-md);
  font-family: inherit;
  background-color: white;
  cursor: pointer;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.form-group-search select:focus {
  outline: none;
  border-color: var(--primario);
  box-shadow: 0 0 0 3px rgba(0, 71, 171, 0.1);
}

.form-group-search select:hover {
  border-color: var(--primario);
}

/* Search button */
.btn-search {
  background-color: var(--primario);
  color: white;
  border: none;
  padding: var(--spacing-md) var(--spacing-2xl);
  font-size: var(--font-size-md);
  font-weight: 600;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
  white-space: nowrap;
  align-self: stretch;
}

@media (min-width: 768px) {
  .btn-search {
    align-self: flex-end;
    min-width: 150px;
  }
}

.btn-search:hover {
  background-color: var(--primario-oscuro);
  transform: translateY(-2px);
}

.btn-search:active {
  transform: translateY(0);
}

.btn-search:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 71, 171, 0.3);
}

/* Responsive adjustments for job search */
@media (max-width: 767px) {
  .formulario-vacantes form {
    padding: var(--spacing-lg);
  }

  .btn-search {
    width: 100%;
  }
}