/*
  Global styles
  ------------
  This stylesheet defines a minimalist, high‑contrast theme using black, grey
  and white.  A consistent type scale, generous spacing and clear
  delineation between sections support readability and accessibility.  The
  navigation, carousel and forms are styled to be usable on both desktop and
  mobile devices.
*/

/* Colour variables */
:root {
  --color-bg: #ffffff;
  --color-secondary: #f5f5f5;
  --color-primary: #000000;
  --color-text: #111111;
  --color-accent: #333333;
}

/* Reset margins and typography */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text);
  background-color: var(--color-bg);
}

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

h1,
h2,
h3 {
  margin-top: 0;
  font-weight: bold;
  color: var(--color-primary);
}

/* Skip link */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--color-primary);
  color: #fff;
  padding: 0.5rem 1rem;
  z-index: 10000;
  text-decoration: none;
  transition: top 0.3s ease;
}

.skip-link:focus {
  top: 0;
}

/* Navigation */
header {
  background: var(--color-bg);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 1000;
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
  height: 60px;
}

.brand {
  font-size: 1.2rem;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-primary);
  font-weight: 700;
}

/* Menu toggle (hamburger) */
.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
}
.menu-toggle .bar {
  width: 100%;
  height: 3px;
  background: var(--color-primary);
  transition: transform 0.3s ease;
}

.nav-links {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
}
.nav-links li {
  position: relative;
}
.nav-links a,
.nav-links button {
  font-size: 1rem;
  color: var(--color-primary);
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem 0;
}
.nav-links button {
  display: flex;
  align-items: center;
}
.nav-links button .caret {
  margin-left: 0.25rem;
  font-size: 0.8rem;
}

/* Submenu */
.submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--color-bg);
  list-style: none;
  margin: 0;
  padding: 0.5rem 0;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border: 1px solid #e5e5e5;
}
.submenu li a {
  display: block;
  padding: 0.5rem 1rem;
  color: var(--color-primary);
  white-space: nowrap;
}
.submenu li a:hover,
.submenu li a:focus {
  background: var(--color-secondary);
}

/* Show submenu when parent has open state (handled via JS) */
.has-submenu.open > .submenu {
  display: block;
}

/* Hero Section */
.hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 4rem 1rem;
  background: var(--color-secondary);
}
.hero-content {
  flex: 1;
}
.hero-content h1 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}
.hero-content p {
  font-size: 1.1rem;
  margin-bottom: 2rem;
}
.cta-button {
  display: inline-block;
  background: var(--color-primary);
  color: #fff;
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  text-decoration: none;
  transition: background 0.3s ease;
}
.cta-button:hover,
.cta-button:focus {
  background: #222;
}
.hero-image {
  flex: 1;
  max-width: 500px;
}
.hero-image img {
  border-radius: 8px;
}

/* Trayectoria Section */
.trayectoria-section {
  padding: 3rem 1rem;
  max-width: 1200px;
  margin: 0 auto;
}
.trayectoria-section h2 {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 2rem;
}
/* Trayectoria items now consist of a title and a single centered image. */
.trayectoria-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: justify;
  gap: 1rem;
  margin-bottom: 3rem;
  
}
/* Optional modifier class remains unused but kept for backward compatibility */
.trayectoria-item.reverse {
  flex-direction: column;
}
/* Title styling for trayectoria sections */
.trayectoria-title {
  font-size: 1.5rem;
  margin: 0;
}
.trayectoria-image {
  width: 100%;
  max-width: 70%;
  display: flex;
  justify-content: center;
  text-align: justify;
  white-space: normal;     /* permite saltos de línea */
  word-wrap: break-word;   /* compatibilidad */
  overflow-wrap: break-word;
}
.listado li {
    margin-bottom: 30px; /* espacio entre ítems */
    line-height: 1.5;    /* mejora la legibilidad */
    
  }
.trayectoria-image img {
  width: 100%;
  max-width: 300px;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
  
}

/* Portfolio Section */
.portfolio-section {
  background: var(--color-secondary);
  padding: 3rem 1rem;
}
.portfolio-section h2 {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 1.5rem;
}
.carousel {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
}
.carousel-track-container {
  overflow: hidden;
  /* Add horizontal padding so that navigation arrows do not overlap
     the first and last images.  The padding values should roughly
     match the width of the arrows plus a small margin for balance. */
  /* Increase horizontal padding so that the navigation arrows and
     images maintain equal spacing on both sides.  This value should
     exceed the total width of the arrow buttons. */
  /* Padding is removed to allow the track to fully occupy the container.
     Navigation arrows are positioned absolutely outside the flow instead. */
  padding-left: 0;
  padding-right: 0;
}
.carousel-track {
  display: flex;
  /* Prevent wrapping so the slides remain in a single row.  The track
     width is determined by the number of slides times the width of
     each slide. */
  flex-wrap: nowrap;
  transition: transform 0.5s ease;
  will-change: transform;
  /* Remove list bullets and default padding/margin from the list */
  list-style: none;
  margin: 0;
  padding: 0;
  /* Ensure there is no gap between flex items.  Some browsers may
     introduce a default gap on flex containers; explicitly set it to
     zero to align the slides flush next to each other. */
  gap: 0;
}
.carousel-item {
  /* Each slide occupies an equal portion of the visible area.  With
     three slides shown at once, each item takes up a third of the
     carousel container.  Adjust this value if you change the
     slidesToShow variable in the JavaScript. */
  flex: 0 0 calc(100% / 4);
  /* Remove padding to eliminate gaps between images.  Padding and
     border are still included in the element width due to border-box. */
  padding: 0;
  /* Include padding and border in the element width calculation. */
  box-sizing: border-box;
  position: relative;
  /* Remove default list markers on the individual carousel items */
  list-style: none;
  /* Hide any overflow during fade transitions */
  overflow: hidden;
  /* Remove any default margins that could introduce gaps between slides */
  margin: 0;
}
.carousel-item img {
  /* Smooth fade transition when updating images */
  transition: opacity 0.4s ease;
}
/* When a slide is fading out, reduce the image opacity */
.carousel-item.fade-out img {
  opacity: 0;
}
.carousel-item img {
  width: 100%;
  height: 350px;
  /* Use contain so the entire image is visible within its container.
     The image will scale to fit while preserving its aspect ratio
     and without cropping.  There may be letterboxing (empty space)
     on the sides or top/bottom if the aspect ratios differ. */
  object-fit: contain;
  /* Slightly rounded corners on the images; reducing the radius minimises
     visible gaps between neighbouring slides. */
  border-radius: 4px;
  /* Indicate that carousel images can be clicked */
  cursor: pointer;
}
/* Blur classes for the edge items */
.carousel-item.blur-left img,
.carousel-item.blur-right img {
  filter: blur(2px) brightness(80%);
}

/* Hide slides that are not part of the visible trio */
.carousel-item.hidden {
  display: none !important;
}

/* Emphasise the central slide (optional) */
.carousel-item.active img {
  /* Remove blur and increase contrast slightly */
  filter: none;
}

/* Indicate that the central carousel item can be clicked */
.carousel-item.active {
  cursor: pointer;
}

/* Modal overlay for enlarged portfolio images */
.image-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: 10000;
}
.image-modal.open {
  display: flex;
}
.image-modal .modal-content {
  /*
    Constrain the modal content to a reasonable portion of the viewport.
    We avoid setting explicit width/height here, letting the content
    assume the size of the intrinsic image.  The `max-width` and
    `max-height` values ensure that a large portrait or landscape image
    never exceeds the viewport; instead it scales down while retaining
    aspect ratio.  Overflow remains enabled so users can scroll if
    the image still exceeds the available space.
  */
  max-width: 90vw;
  max-height: 90vh;
  /* Hide overflow to avoid scrollbars; the modal size is calculated in JS */
  overflow: hidden;
  outline: none;
}
.image-modal .modal-content img {
  /*
    Do not force the image to fill the modal container.  By using
    `width: auto` and `height: auto`, the image displays at its
    intrinsic dimensions.  The `max-width` and `max-height` ensure
    that, when the intrinsic size is larger than the modal container
    (which itself is limited to a fraction of the viewport), the
    image scales down proportionally.  The `object-fit: contain`
    property preserves aspect ratio when scaling down.  Adding
    `margin: auto` centres the image horizontally.
  */
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  margin: auto;
  border-radius: 8px;
}

.carousel-control {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: var(--color-primary);
  color: #fff;
  border: none;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  font-size: 2rem;
  opacity: 0.8;
  z-index: 5;
}
.carousel-control:hover,
.carousel-control:focus {
  opacity: 1;
}
.carousel-control.prev {
  /* Position the control at the padded edge of the carousel */
  /* Shift the left arrow slightly outside the carousel so it does not overlap the image */
  left: -4rem;
}
.carousel-control.next {
  /* Shift the right arrow slightly outside the carousel so it does not overlap the image */
  right: -4rem;
}

/* Videobook Section */
.videobook-section {
  padding: 3rem 1rem;
  max-width: 1000px;
  margin: 0 auto;
}
.videobook-section h2 {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 1rem;
}
.videobook-section p {
  max-width: 800px;
  margin: 0 auto 1.5rem auto;
  text-align: center;
}
.videobook-section video {
  width: 100%;
  max-height: 500px;
  border-radius: 8px;
  outline: none;
}

/* Contact Section */
.contact-section {
  background: var(--color-secondary);
  padding: 3rem 1rem;
  max-width: 800px;
  margin: 0 auto;
}
.contact-section h2 {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 1rem;
}
.contact-section .contact-intro {
  text-align: justify;
  text-justify: auto;
  max-width: 600px;
  margin: 0 auto 2rem auto;
}
.social-links {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}
.social-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
}
 .icon-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  /*border-radius: 50%;*/
  /* Hide overflow to create a circular mask for any inserted logo */
  overflow: hidden;
  /* Optional background colour for the icon circle.  You can adjust or
     remove this if your logos already provide contrast. */
  /* background: var(--color-primary);*/
 }
 .social-handle {
  margin-top: 0;
  margin-left: 0.25rem;
  font-size: 1rem;
  color: var(--color-primary);
 }

/* Make the entire social link behave as a flex container */
.social-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: inherit;
}

/* Ensure logos inside the social icons scale and maintain aspect ratio */
.icon-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.contact-section form {
  max-width: 600px;
  margin: 0 auto;
}
.form-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 1rem;
}
.form-group label {
  margin-bottom: 0.25rem;
  font-weight: 600;
}
.form-group input,
.form-group textarea {
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
}
.download-button {
  display: block;
  width: 50%;
  text-align: center;
  padding: 0.75rem 1.5rem;
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.3s ease;
  text-decoration: none;
}
.download-button:hover,
.download-button:focus {
  background: #222;
}
.btn-container {
    display: flex;
    justify-content: center; /* centra horizontal */
    align-items: center;     /* centra vertical si le das altura */
  }
.submit-button {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.3s ease;
}
.submit-button:hover,
.submit-button:focus {
  background: #222;
}
.required {
  color: #cc0000;
}

/* Center the submit button within its container */
/* Center the submit button within its container */
.submit-container {
  display: flex;
  justify-content: center;
  margin-top: 1rem;
}

/* Footer */
footer {
  padding: 1rem;
  text-align: center;
  font-size: 0.875rem;
  background: var(--color-bg);
  border-top: 1px solid #e5e5e5;
}

/* Visually hidden (for accessibility) */
.visually-hidden {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

/* Responsive design */
@media (max-width: 900px) {
  .hero {
    flex-direction: column;
    text-align: justify;
  }
  .hero-image {
    max-width: 100%;
  }
  .trayectoria-item {
    flex-direction: column;
  }
  .trayectoria-item.reverse {
    flex-direction: column;
  }
  .carousel-item {
    flex: 0 0 100%;
  }
  .carousel-item img {
    height: 300px;
  }
}

@media (max-width: 768px) {
  /* Show the menu toggle and collapse nav */
  .menu-toggle {
    display: flex;
  }
  .nav-links {
    position: absolute;
    top: 60px;
    right: 0;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    background: var(--color-bg);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    border-bottom: 1px solid #e5e5e5;
  }
  .nav-links.open {
    max-height: 400px;
  }
  .nav-links li {
    width: 100%;
    margin: 0;
  }
  .nav-links a,
  .nav-links button {
    width: 100%;
    text-align: left;
    padding: 1rem;
    border-top: 1px solid #e5e5e5;
  }
  .submenu {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    box-shadow: none;
    border: none;
  }
  .submenu li a {
    padding-left: 2rem;
  }
}