/* Page components: hero slider, page headers, service cards, work grid,
   testimonials, counters, accordion, contact form, video facade. */

/* ---- Hero slider ---- */

.hero {
  position: relative;
  overflow: hidden;
  background: #fff;
}

.hero__track {
  position: relative;
}

.hero__slide {
  display: none;
  min-height: 640px;
  padding-block: var(--sp-9);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  place-content: center;
}

.hero__slide.is-active {
  display: grid;
  animation: fade-in 600ms ease;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.hero__content {
  max-width: 1300px;
  margin-inline: auto;
  text-align: center;
  &.container{
    width: 100%;
  }
}

.hero__title {
  margin-bottom: var(--sp-5);
  font-family: var(--f-heading);
  font-size: var(--fs-hero-title);
  font-weight: 500;
  line-height: var(--lh-heading);
}

.hero__text {
  font-family: var(--f-heading);
  font-size: clamp(1.25rem, 1.25vw + 0.688rem, 1.625rem);
  line-height: var(--lh-loose);
}

/* Slide 1: dark photo, white type with a soft shadow for legibility. */
.hero__slide--dark {
  background-image: url("../img/7b80b695-f8e4-40dd-922d-99c4991f4bc9.jpg");
  background-image: image-set(url("../img/7b80b695-f8e4-40dd-922d-99c4991f4bc9.webp") type("image/webp"), url("../img/7b80b695-f8e4-40dd-922d-99c4991f4bc9.jpg") type("image/jpeg"));
  color: #fff;
  text-shadow: 0 0 0.3em #000;
  .btn{
    text-shadow: none;
  }
}

.hero__slide--dark .hero__title,
.hero__slide--dark .hero__text {
  color: #fff;
  font-weight: 700;
}

/* Slide 0: photo only, no copy in the original. */
.hero__slide--plain {
  background-image: url("../img/11682-A2.jpg");
  background-image: image-set(url("../img/11682-A2.webp") type("image/webp"), url("../img/11682-A2.jpg") type("image/jpeg"));
}

/* Slide 2: photo lightened behind dark type. */
.hero__slide--light {
  background-image: url("../img/Imagen-Nota.jpg");
  background-image: image-set(url("../img/Imagen-Nota.webp") type("image/webp"), url("../img/Imagen-Nota.jpg") type("image/jpeg"));
  background-color: rgba(255, 255, 255, 0.56);
  background-blend-mode: lighten;
  color: #000;
}

.hero__slide--light .hero__title,
.hero__slide--light .hero__text {
  color: #000;
}

.hero__slide--light .hero__text {
  font-weight: 600;
}

.hero__actions {
  margin-top: var(--sp-7);
}

/* Slider controls */

.hero__arrow {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity var(--transition), background var(--transition);
}

.hero:hover .hero__arrow,
.hero__arrow:focus-visible {
  opacity: 1;
}

.hero__arrow:hover {
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
}

.hero__arrow--prev {
  left: 20px;
}

.hero__arrow--next {
  right: 20px;
}

.hero__arrow::before {
  content: "";
  width: 12px;
  height: 12px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
}

.hero__arrow--prev::before {
  transform: rotate(-135deg) translate(-3px, -3px);
}

.hero__arrow--next::before {
  transform: rotate(45deg) translate(-3px, 3px);
}

.hero__dots {
  position: absolute;
  left: 50%;
  bottom: 70px;
  z-index: 3;
  display: flex;
  gap: var(--sp-3);
  margin: 0;
  padding: 0;
  list-style: none;
  transform: translateX(-50%);
}

.hero__dot {
  width: 12px;
  height: 12px;
  padding: 0;
  border: 2px solid #fff;
  border-radius: 50%;
  background: transparent;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
}

.hero__dot[aria-current="true"] {
  background: #fff;
}

/* Curved white divider at the bottom of the hero, as in the original. */
.hero__divider {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  height: 50px;
  pointer-events: none;
}

.hero__divider svg {
  width: 100%;
  height: 50px;
  display: block;
}

@media (max-width: 980px) {
  .hero__slide {
    min-height: 460px;
  }

  .hero__arrow {
    opacity: 1;
  }

  .hero__dots {
    bottom: 60px;
  }
}

/* ---- Page header (inner pages) ---- */

.page-header {
  padding-block: 8vw;
  background-position: center;
  background-size: cover;
  color: #fff;
}

.page-header--tight {
  padding-block: 5vw;
}

/* Copy column beside a narrower aside. Not `grid--sidebar`, which is the other
   way round and is what the project pages use. */
.page-header__grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--sp-9);
  align-items: start;
}

.page-header__inner {
  max-width: 800px;
}

.page-header__title {
  padding-left: var(--sp-4);
  border-left: 10px solid var(--c-accent);
  font-family: var(--f-display);
  font-size: var(--fs-display-lg);
  font-weight: 700;
  line-height: var(--lh-tight);
  color: #fff;
}

.page-header__lead {
  margin-top: var(--sp-5);
  padding-left: var(--sp-4);
  font-size: var(--fs-h3);
  line-height: var(--lh-body);
  text-wrap: balance;
}

.page-header__actions {
  margin-top: var(--sp-9);
  padding-left: var(--sp-4);
}

@media (max-width: 980px) {
  .page-header__grid {
    grid-template-columns: 1fr;
    gap: var(--sp-8);
  }
}

.page-header__meta {
  margin-top: var(--sp-5);
  padding-left: var(--sp-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5) var(--sp-7);
  font-size: var(--fs-body);
}

.page-header__meta dt {
  font-weight: 700;
  color: var(--c-accent);
}

.page-header__meta dd {
  margin: 0;
}

/* ---- Service cards (Divi blurbs) ---- */

/* Icon to the left of the title and copy, as in the original Divi blurbs
   (et_pb_blurb_position_left, container padded 15px off the icon).
   Explicit placement rather than a wrapper element, so the markup stays flat:
   the icon spans both text rows and keeps its top aligned with the title. */
.service-card {
  /* Divi set the icon size per section; sections override this and the grid
     column follows along. 60px is the home services grid. */
  --icon-size: 60px;

  display: grid;
  grid-template-columns: var(--icon-size) 1fr;
  /* Third row soaks up every bit of slack — the icon being taller than the
     copy, and the card being stretched to match its tallest sibling. Without
     it that space lands between the title and the paragraph, which is why
     short cards used to look torn apart. */
  grid-template-rows: auto auto 1fr;
  column-gap: 15px;
  align-items: start;
}

.service-card__icon {
  grid-column: 1;
  grid-row: 1 / -1;
  width: var(--icon-size);
  height: var(--icon-size);
  color: var(--c-muted);
}

.service-card__title {
  grid-column: 2;
  grid-row: 1;
  font-family: var(--f-display);
  font-size: var(--fs-h4);
  font-weight: 700;
  line-height: var(--lh-snug);
}

.service-card__text {
  grid-column: 2;
  grid-row: 2;
  font-size: var(--fs-lead);
  line-height: var(--lh-loose);
}

.service-card--dark .service-card__title {
  color: #fff;
}

/* Icon size and colour per section, matching the original's per-module values.
   The overrides live in sections.css next to the sections they belong to. */

/* ---- Section headings ---- */

.section-title {
  font-family: var(--f-display);
  font-size: var(--fs-display);
  font-weight: 700;
  line-height: var(--lh-heading);
}

.section-title--lg {
  font-size: var(--fs-display-lg);
  line-height: var(--lh-tight);
}

/* ---- Work grid ---- */

.work-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-7);
}

.work-card {
  background: #fff;
  box-shadow: var(--shadow-card);
}

.work-card__media {
  display: block;
  overflow: hidden;
  aspect-ratio: 400 / 250;
}

.work-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition);
}

.work-card:hover .work-card__media img {
  transform: scale(1.06);
}

.work-card__body {
  padding: var(--sp-5);
}

.work-card__title {
  margin-bottom: var(--sp-2);
  font-family: var(--f-display);
  font-size: 20px;
}

.work-card__cat {
  display: inline-block;
  margin-bottom: var(--sp-3);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

@media (max-width: 980px) {
  .work-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .work-grid {
    grid-template-columns: 1fr;
  }
}

/* ---- Testimonials ---- */

.testimonial {
  padding: var(--sp-7) var(--sp-5);
  background: #fff;
  text-align: center;
}

.testimonial__stars {
  width: 153px;
  height: 26px;
  margin: 0 auto var(--sp-5);
  object-fit: contain;
}

.testimonial__quote {
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-lead);
  line-height: var(--lh-loose);
}

.testimonial__author {
  display: block;
  font-weight: 700;
  text-transform: uppercase;
}

/* ---- Client logos ---- */

.logo-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-7);
  align-items: center;
  margin-top: var(--sp-8);
}

.logo-strip a {
  display: block;
  transition: transform var(--transition);
}

.logo-strip a:hover {
  transform: scale(1.1);
}

.logo-strip img {
  margin-inline: auto;
}

@media (max-width: 767px) {
  .logo-strip {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---- Number counters ---- */

.counter {
  padding-block: 15px;
  text-align: center;
}

/* The 110px line-height is what gives the strip its height in the original. */
.counter__value {
  display: block;
  font-family: var(--f-display);
  font-size: 42px;
  font-weight: 700;
  line-height: 110px;
  color: inherit;
}

.counter__label {
  margin: 0;
  font-family: var(--f-display);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.6em;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: inherit;
}

@media (max-width: 980px) {
  .counter__value {
    font-size: 36px;
    line-height: 80px;
  }
}

/* ---- Accordion ---- */

.accordion {
  border-top: 1px solid var(--c-border);
}

.accordion__item {
  border-bottom: 1px solid var(--c-border);
  background: #fff;
}

.accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  width: 100%;
  padding: var(--sp-5);
  border: 0;
  background: transparent;
  font-family: var(--f-display);
  font-size: 16px;
  font-weight: 700;
  text-align: left;
  text-transform: uppercase;
  color: var(--c-heading);
}

.accordion__trigger:hover {
  color: var(--c-accent);
}

.accordion__trigger::after {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--transition);
}

.accordion__trigger[aria-expanded="true"]::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}

/* Height animation without measuring anything in JavaScript: a grid row going
   from 0fr to 1fr resolves to the content's natural height, and unlike
   `height: auto` it is animatable.
   `visibility` keeps a collapsed panel out of the accessibility tree; it flips
   only once the collapse has finished, so it never cuts the transition short. */
.accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  color: var(--c-text);
  transition: grid-template-rows var(--transition), visibility 0s linear 300ms;
}

.accordion__panel.is-open {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows var(--transition), visibility 0s;
}

/* The clipping box the collapsing row squeezes. Padding lives on its children,
   so nothing survives as a sliver once the row reaches 0. */
.accordion__panel-inner {
  overflow: hidden;
  min-height: 0;
}

.accordion__panel-inner > * {
  margin: 0;
  padding: 0 var(--sp-5) var(--sp-5);
}

.accordion__panel-inner ul {
  padding-left: calc(var(--sp-5) * 2);
}

/* The global reduced-motion rule zeroes durations but not delays, which would
   leave the visibility swap trailing the instant collapse. */
@media (prefers-reduced-motion: reduce) {
  .accordion__panel {
    transition-delay: 0s;
  }
}

/* ---- Gallery lightbox ---- */

.lightbox {
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  overscroll-behavior: contain;
}

.lightbox::backdrop {
  background: rgba(0, 0, 0, 0.9);
}

.lightbox__inner {
  display: grid;
  place-content: center;
  gap: var(--sp-4);
  height: 100%;
  padding: var(--sp-9) var(--sp-8);
}

.lightbox__img {
  max-width: min(90vw, 1200px);
  max-height: 80vh;
  margin-inline: auto;
  object-fit: contain;
}

.lightbox__caption,
.lightbox__counter {
  margin: 0;
  color: #fff;
  font-size: var(--fs-body);
  text-align: center;
}

.lightbox__counter {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--sp-5);
  letter-spacing: 2px;
}

.lightbox__close,
.lightbox__nav {
  position: absolute;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  transition: background var(--transition);
}

.lightbox__close:hover,
.lightbox__nav:hover {
  background: rgba(255, 255, 255, 0.28);
}

.lightbox__close {
  top: var(--sp-4);
  right: var(--sp-4);
}

/* Close is an X, the arrows are chevrons — all drawn in CSS so the overlay
   needs nothing from the icon sprite. */
.lightbox__close::before,
.lightbox__close::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 2px;
  background: currentColor;
}

.lightbox__close::before {
  transform: rotate(45deg);
}

.lightbox__close::after {
  transform: rotate(-45deg);
}

.lightbox__nav {
  top: 50%;
  transform: translateY(-50%);
}

.lightbox__nav--prev {
  left: var(--sp-4);
}

.lightbox__nav--next {
  right: var(--sp-4);
}

.lightbox__nav::before {
  content: "";
  width: 14px;
  height: 14px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
}

.lightbox__nav--prev::before {
  transform: rotate(-135deg) translate(-3px, -3px);
}

.lightbox__nav--next::before {
  transform: rotate(45deg) translate(-3px, 3px);
}

/* The thumbnails become buttons in practice once the script takes over. */
.gallery a {
  cursor: zoom-in;
}

@media (max-width: 767px) {
  .lightbox__inner {
    padding: var(--sp-9) var(--sp-4);
  }

  .lightbox__nav {
    width: 40px;
    height: 40px;
  }
}

/* ---- Video embed ---- */

.video-embed {
  aspect-ratio: 16 / 9;
  background: #000;
}

.video-embed iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---- Contact form ---- */

.contact-form {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-4);
  /* Divi puts a module margin between the heading and the form; every page that
     shows this form wants it, so it lives on the component. */
  margin-block: 30px;
}

/* min-width:0 keeps long values from blowing the grid track open. */
.contact-form .field {
  min-width: 0;
}

.contact-form .field--full {
  grid-column: 1 / -1;
}

/* The original hides the labels and leans on placeholders. Kept in the markup
   and hidden the accessible way, so screen readers still announce each field. */
.contact-form label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: var(--sp-4);
  border: 0;
  border-radius: var(--radius);
  background: #fff;
  font-family: inherit;
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  color: var(--c-text);
}

.contact-form .field--actions {
  text-align: right;
}

/* Outline button that takes its colour from the surrounding section: white on
   the dark contact panel, near-black on the Contacto page. */
.contact-form .btn {
  font-family: var(--f-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: #fff;
  border-color: #fff;
  border-width: 2px;
}

.contact-form .btn:hover {
  color: var(--c-heading);
  background: #fff;
}

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

.contact-form input:focus,
.contact-form textarea:focus {
  outline: 2px solid var(--c-accent);
  outline-offset: 0;
  border-color: var(--c-accent);
}

/* Honeypot: hidden from humans, tempting to bots. Not display:none, so
   headless bots that skip hidden fields still fill it in. */
.contact-form .hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-status {
  grid-column: 1 / -1;
  padding: var(--sp-4);
  font-weight: 600;
}

.form-status[hidden] {
  display: none;
}

.form-status--ok {
  background: #e6f4ea;
  color: #1e6b34;
}

.form-status--error {
  background: #fdecea;
  color: #a1281c;
}

@media (max-width: 767px) {
  .contact-form {
    grid-template-columns: 1fr;
  }
}

/* ---- Contact info blocks ---- */

.info-item {
  display: flex;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}

/* 18px / #666666 in the original's contact asides. On the Contacto page these
   blocks sit on the dark page header instead, where Divi left them at its
   32px default in the inherited (white) colour. */
.info-item__icon {
  flex: none;
  width: 18px;
  height: 18px;
  color: #666666;
}

.page-header .info-item__icon {
  width: 32px;
  height: 32px;
  color: currentColor;
}

.info-item__title {
  margin-bottom: var(--sp-1);
  font-family: var(--f-display);
  font-size: var(--fs-h4);
}

.info-item__text {
  font-size: var(--fs-lead);
}

/* ---- Project gallery ---- */

.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
}

.gallery a {
  display: block;
  overflow: hidden;
  aspect-ratio: 3 / 4;
}

.gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition);
}

.gallery a:hover img {
  transform: scale(1.06);
}

@media (max-width: 980px) {
  .gallery {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 767px) {
  .gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---- Quote block ---- */

.quote {
  max-width: 1100px;
  margin-inline: auto;
  text-align: center;
  font-size: var(--fs-md);
  line-height: var(--lh-loose);
  p{
    font-size: 30px;
    font-weight: 600;
  }
}

.quote__author {
  margin-top: var(--sp-5);
  font-weight: 700;
}

/* ---- Sidebar (project pages) ---- */

.sidebar__title {
  margin-bottom: var(--sp-4);
  font-family: var(--f-display);
  font-size: var(--fs-h4);
  text-transform: uppercase;
}

.sidebar ul {
  margin: 0 0 var(--sp-7);
  padding: 0;
  list-style: none;
}

.sidebar li + li {
  margin-top: var(--sp-2);
}

/* ---- Reveal-on-scroll animation ---- */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 600ms ease, transform 600ms ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
  }
}