/* RESET GENERAL */

* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}



html,

body {

  font-family: "Open Sans", sans-serif;

  background: #ffffff;

  overflow-x: hidden;

  /* 🔧 evita que se salga a lo ancho */

}



html {

  scroll-behavior: smooth;

}



a {

  text-decoration: none;

  color: inherit;

}



/* -------------------------------- */

/*        HEADER COMO LA IMAGEN     */

/* -------------------------------- */



header {

  width: 100%;

  position: absolute;

  top: 0;

  left: 0;

  z-index: 50;

  padding: 22px 40px;

}



.header-container {

  display: flex;

  justify-content: space-between;

  align-items: center;

}



.header-logo {

  font-family: "Righteous", cursive;

  font-size: 26px;

  color: white;

  letter-spacing: 0.35em;

}



.header-menu {

  display: flex;

  gap: 32px;

}



.header-menu a {

  color: white;

  font-size: 13px;

  text-transform: uppercase;

  letter-spacing: 0.2em;

  font-weight: 300;

  position: relative;

}



/* Línea animada debajo */

.header-menu a::after {

  content: "";

  position: absolute;

  left: 0;

  bottom: -4px;

  width: 0;

  height: 2px;

  background: white;

  transition: 0.3s;

}



.header-menu a:hover::after {

  width: 100%;

}



/* ======== MENÚ HAMBURGUESA ======== */

.menu-toggle {

  display: none;

  font-size: 30px;

  color: white;

  cursor: pointer;

}



/* Versión móvil */

@media (max-width: 768px) {

  .header-menu {

    display: none;

    flex-direction: column;

    position: absolute;

    top: 70px;

    right: 20px;

    background: rgba(0, 0, 0, 0.85);

    padding: 20px;

    border-radius: 8px;

    gap: 20px;

    z-index: 999;

  }



  .header-menu a {

    font-size: 16px;

  }



  .menu-toggle {

    display: block;

  }



  .header-menu.show {

    display: flex !important;

  }

}



@media (max-width: 768px) {

  .waves-image {

    display: none !important;

  }



  .waves-content {

    flex-direction: column;

    text-align: center;

    gap: 20px;

  }

}



/* ----------------------------- */

/*            HERO FULL          */

/* ----------------------------- */



.hero {

  width: 100%;

  height: 100vh;

  background: url("../img/banner.png") no-repeat center center/cover;

  position: relative;

}



/* Capa oscura para mejorar contraste */

.hero-overlay {

  width: 100%;

  height: 100%;

  background: rgba(0, 0, 0, 0.25);

}



/* Contenedor centrado */

.hero-center {

  position: absolute;

  top: 26%;

  left: 50%;

  transform: translate(-50%, -30%);

  text-align: center;

  color: white;

  padding: 0 20px;

}



.hero-title {

  font-family: "Righteous", cursive;

  font-size: 64px;

  letter-spacing: 0.35em;

  margin-bottom: 8px;

  text-transform: uppercase;

  white-space: nowrap;

  /* se mantiene en una línea */

}



.hero-subtitle {

  font-size: 16px;

  letter-spacing: 0.25em;

  margin-bottom: 28px;

  text-transform: uppercase;

}



.hero-btn {

  background: #3b5bff;

  border: none;

  padding: 14px 40px;

  color: white;

  text-transform: uppercase;

  font-size: 13px;

  letter-spacing: 0.2em;

  cursor: pointer;

  border-radius: 4px;

  transition: 0.3s;

}



.hero-btn:hover {

  background: #2949ff;

}



@media (max-width: 768px) {

  .hero-title {

    font-size: 34px !important;

    letter-spacing: 0.2em;

    white-space: normal;

    /* permite que se parta en dos líneas */

  }



  .hero-subtitle {

    font-size: 13px;

  }



  .hero-center {

    top: 32%;

  }

}



/* SECCIONES BASE */

section {

  padding: 60px 40px;

}



.container {

  max-width: 1200px;

  margin: 0 auto;

}



.section-title {

  font-size: 24px;

  text-transform: uppercase;

  letter-spacing: 0.15em;

  margin-bottom: 20px;

  font-weight: 600;

}



.text {

  font-size: 15px;

  max-width: 700px;

  line-height: 1.6;

}



/* SECCIÓN MANO + SOBRE NOSOTROS */

.section-waves {

  background: white;

  padding: 120px 40px 0px;

  /* más aire y separación */

}



.container-waves {

  max-width: 1200px;

  margin: 0 auto;

  text-align: center;

}



.waves-title {

  font-size: 16px;

  letter-spacing: 0.25em;

  text-transform: uppercase;

  margin-bottom: 12px;

  color: #222;

}



/* Layout mano / texto */

.waves-content {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 80px;

  /* más separación entre mano y texto */

}



/* MANO */

.waves-image img {

  width: 368px;

  height: auto;

  opacity: 0.9;

  margin-top: 40px;

  z-index: 0;

  position: relative;

}



/* TEXTO */

.waves-text {

  max-width: 520px;

  text-align: left;

}



.waves-text h3 {

  font-size: 18px;

  text-transform: uppercase;

  letter-spacing: 0.2em;

  margin-bottom: 15px;

}



.waves-text p {

  font-size: 15px;

  line-height: 1.7;

  color: #444;

}



/* Responsivo */

@media (max-width: 900px) {

  .waves-content {

    flex-direction: column;

    text-align: center;

    gap: 40px;

  }



  .waves-text {

    text-align: center;

  }

}



/* ------------------------------ */

/*      SECCIÓN SOLO DE IMAGEN    */

/* ------------------------------ */



.section-full-image {

  width: 100%;

  padding: 0;

  margin: 0;

  margin-top: -74px;

  z-index: 10;

  position: relative;

}



.section-full-image img {

  width: 100%;

  height: auto;

  display: block;

  /* quita espacios fantasmas */

}



/* ============================= */

/*           CURSOS              */

/* ============================= */



.section-courses {

  padding: 120px 40px;

  background: #fff;

  text-align: center;

}



.courses-title {

  font-size: 26px;

  text-transform: uppercase;

  letter-spacing: 0.2em;

  margin-bottom: 70px;

  font-weight: 600;

  color: #111;

}



/* GRID */

.courses-grid {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 120px 80px;

  max-width: 1100px;

  margin: 0 auto;

}



/* TARJETA */

.course-card {

  padding: 0 30px;

  text-align: center;

  position: relative;

}



.course-card h3 {

  font-size: 18px;

  font-weight: 700;

  letter-spacing: 0.12em;

  text-transform: uppercase;

  margin-bottom: 16px;

  color: #111;

}



.course-icon {

  margin-bottom: 20px;

}



.course-icon i {

  font-size: 38px;

  color: #3b5bff;

  line-height: 1;

}



.course-desc {

  font-size: 15px;

  line-height: 1.75;

  color: #444;

  margin-bottom: 25px;

}



/* BADGE */

.course-badge {

  background: #f4d37d;

  color: #000;

  font-size: 12px;

  padding: 6px 16px;

  border-radius: 4px;

  position: absolute;

  top: -30px;

  left: 50%;

  transform: translateX(-50%);

  font-weight: 600;

}



/* PRECIO */

.course-price {

  font-size: 14px;

  font-weight: 700;

  letter-spacing: 0.1em;

  margin-bottom: 20px;

}



/* BOTÓN */

.course-btn {

  background: transparent;

  border: 2px solid #3b5bff;

  color: #3b5bff;

  padding: 12px 30px;

  font-size: 12px;

  text-transform: uppercase;

  cursor: pointer;

  letter-spacing: 0.15em;

  border-radius: 4px;

  transition: 0.3s;

}



.course-btn:hover {

  background: #3b5bff;

  color: #fff;

}



/* RESPONSIVO */

@media (max-width: 900px) {

  .courses-grid {

    grid-template-columns: 1fr;

    gap: 80px;

  }

}



/* ============================= */

/*          SECCIÓN VIDEO        */

/* ============================= */



.section-video {

  width: 100%;

  background: #f0f4f5;

  /* gris muy claro estilo PDF */

  padding: 80px 0;

  display: flex;

  justify-content: center;

}



.video-container {

  width: 80%;

  max-width: 1100px;

  margin: 0 auto;

  display: flex;

  justify-content: center;

}



.section-video video {

  width: 100%;

  border-radius: 6px;

  box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.18);

  outline: none;

}



/* ============================ */

/*         NUESTRO EQUIPO       */

/* ============================ */



.section-team {

  padding: 120px 40px;

  background: #ffffff;

  text-align: center;

}



.container-team {

  max-width: 1200px;

  margin: 0 auto;

}



.team-title {

  font-size: 22px;

  text-transform: uppercase;

  letter-spacing: 0.15em;

  margin-bottom: 20px;

  font-weight: 600;

  color: #111;

}



.team-description {

  max-width: 800px;

  margin: 0 auto 70px;

  font-size: 15px;

  line-height: 1.7;

  color: #555;

}



.team-grid {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 60px;

}



.team-card {

  text-align: center;

}



.team-photo {

  width: 180px;

  height: 180px;

  border-radius: 50%;

  object-fit: cover;

  margin-bottom: 18px;

  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);

}



.team-name {

  font-size: 16px;

  color: #3b5bff;

  text-transform: uppercase;

  letter-spacing: 0.1em;

  margin-bottom: 6px;

  font-weight: 600;

}



.team-role {

  font-size: 14px;

  color: #333;

}



/* Responsivo */

@media (max-width: 900px) {

  .team-grid {

    grid-template-columns: repeat(2, 1fr);

    gap: 40px;

  }

}



@media (max-width: 600px) {

  .team-grid {

    grid-template-columns: 1fr;

  }

}



/* ============================= */

/*           GALERÍA             */

/* ============================= */



.section-gallery {

  padding: 100px 40px;

  background: #ffffff;

  text-align: center;

}



.gallery-title {

  font-size: 22px;

  text-transform: uppercase;

  letter-spacing: 0.15em;

  margin-bottom: 40px;

}



/* GRID estilo Instagram */

.gallery-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 22px;

  max-width: 1200px;

  margin: 40px auto 0;

  padding: 0 20px;

}



.gallery-item {

  width: 100%;

  height: 260px;

  object-fit: cover;

  border-radius: 16px;

  cursor: pointer;

  background: #f1f3f5;

  transition: transform 0.25s ease, box-shadow 0.25s ease;

}



.gallery-item:hover {

  transform: translateY(-4px);

  box-shadow: 0 14px 30px rgba(0,0,0,0.12);

}





/* PAGINACIÓN */

.gallery-pagination{

  margin-top:30px;

  display:flex;

  justify-content:center;

  gap:10px;

}

.gallery-pagination a{

  padding:10px 14px;

  border-radius:10px;

  background:#eee;

  font-weight:700;

  text-decoration:none;

  color:#111;

}

.gallery-pagination a.active,

.gallery-pagination a:hover{

  background:#3B5BFF;

  color:#fff;

}





@media (max-width: 992px) {

  .gallery-grid {

    grid-template-columns: repeat(2, 1fr);

  }

}



@media (max-width: 576px) {

  .gallery-grid {

    grid-template-columns: 1fr;

  }



  .gallery-item {

    height: 220px;

  }

}









/* ============================ */

/*      SECCIÓN IMAGEN FULL     */

/* ============================ */



.section-big-image {

  width: 100%;

  margin: 0;

  padding: 0;

}



.section-big-image img {

  width: 100%;

  height: auto;

  display: block;

  object-fit: cover;

}



/* ============================ */

/*       CLASES DE SURF         */

/* ============================ */



.section-surf-classes {

  padding: 120px 40px;

  background: #ffffff;

  text-align: center;

}



.surf-container {

  max-width: 1200px;

  margin: 0 auto;

}



.surf-title {

  font-size: 26px;

  text-transform: uppercase;

  letter-spacing: 0.15em;

  margin-bottom: 5px;

  color: #111;

  font-weight: 600;

}



.surf-subtitle {

  font-size: 15px;

  color: #3b5bff;

  letter-spacing: 0.1em;

  margin-bottom: 20px;

}



.surf-line {

  margin-bottom: 60px;

}



/* GRID */

.surf-grid {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 50px;

}



.surf-card {

  padding: 0 15px;

}



.surf-card-title {

  font-size: 17px;

  font-weight: 600;

  text-transform: uppercase;

  letter-spacing: 0.12em;

  margin-bottom: 15px;

  color: #111;

}



.surf-card p {

  font-size: 14px;

  line-height: 1.7;

  color: #444;

}



/* CTA */

.surf-cta {

  margin-top: 70px;

}



.surf-btn {

  background: #3b5bff;

  padding: 14px 40px;

  color: white;

  border-radius: 6px;

  font-size: 13px;

  text-transform: uppercase;

  letter-spacing: 0.2em;

  transition: 0.3s;

  display: inline-block;

}



.surf-btn:hover {

  background: #2949ff;

}



/* Animación fade-up */

.fade-up {

  opacity: 0;

  transform: translateY(30px);

  animation: fadeUp 0.9s ease forwards;

}



@keyframes fadeUp {

  to {

    opacity: 1;

    transform: translateY(0);

  }

}



/* RESPONSIVE */

@media (max-width: 900px) {

  .surf-grid {

    grid-template-columns: repeat(2, 1fr);

    gap: 40px;

  }

}



@media (max-width: 600px) {

  .surf-grid {

    grid-template-columns: 1fr;

  }

}



/* =============================== */

/*        SECCIÓN PRINCIPAL        */

/* =============================== */



.section-bnb {

  background: #fae7b4;

  padding: 140px 0;

  text-align: center;

}



.bnb-image-wrapper {

  margin: 0 auto 40px;

  width: 420px;

  height: 420px;

  border-radius: 50%;

  overflow: hidden;

}



.bnb-main-image {

  width: 100%;

  height: 100%;

  object-fit: cover;

}



.bnb-btn {

  margin-top: 20px;

  padding: 12px 26px;

  font-size: 13px;

  letter-spacing: 0.1em;

  background: white;

  color: black;

  border: 1px solid black;

  cursor: pointer;

  border-radius: 4px;

  transition: 0.3s;

}



.bnb-btn:hover {

  background: black;

  color: white;

}



/* =============================== */

/*              MODAL              */

/* =============================== */



.bnb-modal {

  display: none;

  position: fixed;

  inset: 0;

  background: rgba(0, 0, 0, 0.65);

  backdrop-filter: blur(3px);

  justify-content: center;

  align-items: center;

  padding: 20px;

  z-index: 9990;

}



.bnb-modal-content {

  background: #fae7b4;

  max-width: 900px;

  width: 100%;

  border-radius: 10px;

  padding: 40px 50px;

  position: relative;

  animation: fadeIn 0.35s ease;

}



@keyframes fadeIn {

  from {

    opacity: 0;

    transform: translateY(20px);

  }



  to {

    opacity: 1;

    transform: translateY(0);

  }

}



.bnb-close {

  font-size: 32px;

  font-weight: bold;

  color: #333;

  position: absolute;

  right: 20px;

  top: 10px;

  cursor: pointer;

}



.bnb-modal-title {

  font-size: 22px;

  text-transform: uppercase;

  letter-spacing: 0.2em;

  margin-bottom: 8px;

  text-align: center;

}



.bnb-modal-text {

  max-width: 700px;

  margin: 0 auto 40px;

  text-align: center;

}



/* CARDS */

.bnb-features {

  display: flex;

  justify-content: center;

  gap: 30px;

  margin-bottom: 50px;

}



.bnb-feature-card {

  width: 180px;

  text-align: center;

}



.bnb-feature-card img {

  width: 100%;

  border-radius: 6px;

  margin-bottom: 10px;

}



/* GALERÍA */

.bnb-gallery {

  display: flex;

  gap: 20px;

  justify-content: center;

  margin-bottom: 30px;

}



.bnb-gallery img {

  width: 30%;

  border-radius: 6px;

}



.bnb-gallery-wide img {

  width: 100%;

  margin-top: 10px;

  border-radius: 6px;

}



/* RESPONSIVE */

@media (max-width: 700px) {

  .bnb-features {

    flex-direction: column;

  }



  .bnb-gallery {

    flex-direction: column;

  }



  .bnb-gallery img {

    width: 100%;

  }

}



.section-testimonials {

  padding: 120px 40px;

  text-align: center;

  background: #ffffff;

}



.testimonials-title {

  font-size: 22px;

  text-transform: uppercase;

  letter-spacing: 0.15em;

  margin-bottom: 50px;

  font-weight: 600;

  color: #111;

}



.testimonials-grid {

  max-width: 1200px;

  margin: 0 auto;

}



.testimonial-card {

  text-align: center;

  padding: 20px;

}



.testimonial-photo {

  width: 120px;

  height: 120px;

  border-radius: 50%;

  object-fit: cover;

  margin-bottom: 15px;

  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);

}



.testimonial-name {

  font-size: 15px;

  text-transform: uppercase;

  color: #3b5bff;

  margin-bottom: 6px;

  font-weight: 600;

}



a.tutorial_link {

    display: none;

}



.stars {

  color: #f4c842;

  font-size: 16px;

  margin-bottom: 12px;

}



.testimonial-text {

  font-size: 14px;

  line-height: 1.6;

  color: #444;

}



/* Responsivo */

@media (max-width: 900px) {

  .testimonials-grid {

    grid-template-columns: repeat(2, 1fr);

    gap: 40px;

  }

}



@media (max-width: 600px) {

  .testimonials-grid {

    grid-template-columns: 1fr;

  }

}



/* FONDO */

/* ===============================

   BOOKING FORM (FIX DEFINITIVO)

=============================== */

.booking-section {

  position: relative;

  padding: 120px 20px;

  display: flex;

  justify-content: center;

  align-items: center;

}



.booking-bg {

  position: absolute;

  inset: 0;

  background: url("../img/playa2.png") center/cover no-repeat;

  filter: brightness(0.65);

  z-index: 0;

}



.booking-section::before {

  content: "";

  position: absolute;

  inset: 0;

  background: rgba(0, 0, 0, 0.45);

  z-index: 1;

}



.booking-card {

  position: relative;

  z-index: 2;

  width: 100%;

  max-width: 520px;

  background: rgba(255, 255, 255, 0.96);

  border-radius: 18px;

  padding: 34px;

  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.35);

}



.booking-title {

  text-align: center;

  font-size: 20px;

  letter-spacing: 0.12em;

  margin-bottom: 18px;

}



.booking-card label {

  font-size: 12px;

  font-weight: 700;

  letter-spacing: 0.08em;

  margin-top: 14px;

  display: block;

}



.booking-input,

.booking-select {

  width: 100%;

  padding: 12px 14px;

  border-radius: 10px;

  border: 1px solid #ccc;

}



.date-box {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 12px;

}



.booking-options {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 10px;

}



.booking-options label {

  background: #f5f6fb;

  border: 1px solid #ddd;

  padding: 10px;

  border-radius: 10px;

  cursor: pointer;

}



.booking-summary {

  margin-top: 14px;

  background: #eef2ff;

  padding: 12px;

  border-radius: 10px;

  border-left: 4px solid #3b5bff;

}



.booking-btn {

  width: 100%;

  margin-top: 16px;

  padding: 14px;

  border: none;

  border-radius: 12px;

  background: linear-gradient(135deg, #3b5bff, #1f39ff);

  color: #fff;

  letter-spacing: 0.15em;

  cursor: pointer;

}



/* Responsive */

@media (max-width: 520px) {

  .booking-card {

    padding: 26px 18px 20px;

    border-radius: 16px;

  }



  .date-box {

    grid-template-columns: 1fr;

  }



  .booking-options {

    grid-template-columns: 1fr;

  }

}



/* =============================== */

/*         MAPA GOOGLE CSS         */

/* =============================== */



.section-map {

  background: #e8f5f4;

  /* fondo suave tipo PDF */

  padding: 80px 40px;

  text-align: center;

}



.map-title {

  font-size: 22px;

  text-transform: uppercase;

  letter-spacing: 0.15em;

  margin-bottom: 40px;

  font-weight: 600;

  color: #111;

}



.map-container {

  width: 100%;

  max-width: 1400px;

  margin: 0 auto;

  border-radius: 10px;

  overflow: hidden;

  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);

}



.map-container iframe {

  width: 100%;

  height: 420px;

  border: 0;

}



.footer {

  background: #26323f;

  color: #fff;

  padding: 60px 40px 30px;

  margin-top: 80px;

  font-size: 15px;

}



.footer-container {

  max-width: 1200px;

  margin: auto;

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 60px;

}



.footer-title {

  text-transform: uppercase;

  letter-spacing: 0.15em;

  font-size: 15px;

  margin-bottom: 18px;

  color: #fff;

}



.footer-item {

  margin-bottom: 10px;

}



.footer-item a {

  color: #bcd0e5;

}



.footer-links {

  list-style: none;

  padding: 0;

}



.footer-links li {

  margin-bottom: 8px;

}



.footer-links a {

  color: #bcd0e5;

  transition: 0.3s;

}



.footer-links a:hover {

  color: #ffffff;

}



.footer-social a {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 42px;

  height: 42px;

  margin-right: 12px;

  border-radius: 50%;

  background: rgba(255, 255, 255, 0.12);

  color: #fff;

  font-size: 18px;

  transition: 0.3s;

}



.footer-social a:hover {

  background: #3b5bff;

  transform: translateY(-3px);

}



.footer-top {

  margin-top: 20px;

  background: transparent;

  border: 2px solid #fff;

  padding: 8px 22px;

  color: #fff;

  border-radius: 4px;

  cursor: pointer;

  letter-spacing: 0.1em;

  transition: 0.3s;

}



.footer-top:hover {

  background: #fff;

  color: #26323f;

}



.footer-bottom {

  text-align: center;

  margin-top: 40px;

  color: #aab8c5;

  font-size: 14px;

}



/* RESPONSIVE */

@media (max-width: 900px) {

  .footer-container {

    grid-template-columns: 1fr;

    text-align: center;

  }



  .footer-social {

    justify-content: center;

  }

}



/* LOGO CIRCULAR PROFESIONAL */

.header-logo img {

  height: 96px;

  width: auto;

  max-width: 160px;

  object-fit: contain;

  background: #ffffff;

  padding: 10px 14px;

  border-radius: 12px;

  /* suave, no circular */

  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);

  display: block;

}



/* En móvil */

@media (max-width: 768px) {

  .header-logo img {

    height: 56px;

    max-width: 120px;

    padding: 6px 8px;

  }

}



/* =============================== */

/*     MODAL CLIMA Y OLAS          */

/* =============================== */

.surf-modal {

  display: none;

  position: fixed;

  inset: 0;

  background: rgba(0, 0, 0, 0.65);

  backdrop-filter: blur(3px);

  justify-content: center;

  align-items: center;

  padding: 18px;

  z-index: 9999;

}



.surf-modal.show {

  display: flex;

}



.surf-modal-content {

  width: 100%;

  max-width: 980px;

  background: #ffffff;

  border-radius: 14px;

  overflow: hidden;

  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.35);

  animation: surfFadeIn 0.22s ease;

}



@keyframes surfFadeIn {

  from {

    opacity: 0;

    transform: translateY(14px);

  }



  to {

    opacity: 1;

    transform: translateY(0);

  }

}



.surf-modal-header {

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 18px 22px;

  background: linear-gradient(

    90deg,

    rgba(59, 91, 255, 1),

    rgba(41, 73, 255, 1)

  );

  color: #fff;

}



.surf-modal-title {

  font-size: 14px;

  letter-spacing: 0.18em;

  text-transform: uppercase;

  font-weight: 600;

}



.surf-modal-close {

  width: 38px;

  height: 38px;

  border-radius: 10px;

  border: 1px solid rgba(255, 255, 255, 0.35);

  background: rgba(255, 255, 255, 0.12);

  color: #fff;

  font-size: 22px;

  cursor: pointer;

  display: grid;

  place-items: center;

  transition: 0.2s;

}



.surf-modal-close:hover {

  background: rgba(255, 255, 255, 0.2);

}



.surf-modal-body {

  padding: 22px;

  background: #fff;

}



.surf-meta {

  display: flex;

  gap: 12px;

  flex-wrap: wrap;

  align-items: center;

  justify-content: space-between;

  margin-bottom: 14px;

}



.surf-location {

  font-size: 13px;

  color: #334155;

  letter-spacing: 0.08em;

  text-transform: uppercase;

  font-weight: 600;

}



.surf-actions {

  display: flex;

  gap: 10px;

  flex-wrap: wrap;

}



.surf-btn {

  border: 1px solid #dbe2ff;

  background: #f4f6ff;

  color: #1f39ff;

  padding: 10px 14px;

  border-radius: 10px;

  font-size: 12px;

  letter-spacing: 0.12em;

  text-transform: uppercase;

  cursor: pointer;

  transition: 0.2s;

}



.surf-btn:hover {

  background: #e9edff;

}



.surf-grid {

  display: grid;

  grid-template-columns: 1.1fr 0.9fr;

  gap: 14px;

}



.surf-card {

  border: 1px solid #eef2ff;

  border-radius: 14px;

  padding: 16px;

  background: #ffffff;

}



.surf-card h4 {

  font-size: 12px;

  letter-spacing: 0.18em;

  text-transform: uppercase;

  color: #0f172a;

  margin-bottom: 10px;

}



.surf-kpis {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 10px;

}



.surf-kpi {

  background: #f8fafc;

  border: 1px solid #eef2f7;

  border-radius: 12px;

  padding: 12px;

}



.surf-kpi .label {

  font-size: 11px;

  color: #64748b;

  letter-spacing: 0.06em;

  text-transform: uppercase;

  margin-bottom: 6px;

}



.surf-kpi .value {

  font-size: 18px;

  font-weight: 700;

  color: #0f172a;

}



.surf-kpi .sub {

  margin-top: 6px;

  font-size: 12px;

  color: #475569;

}



.surf-note {

  margin-top: 12px;

  font-size: 13px;

  color: #475569;

  line-height: 1.6;

}



.surf-status {

  font-size: 13px;

  color: #0f172a;

  background: #f8fafc;

  border: 1px dashed #e2e8f0;

  border-radius: 12px;

  padding: 12px;

}



.surf-spinner {

  width: 16px;

  height: 16px;

  border: 2px solid rgba(31, 57, 255, 0.25);

  border-top-color: rgba(31, 57, 255, 1);

  border-radius: 50%;

  display: inline-block;

  vertical-align: middle;

  animation: spin 0.7s linear infinite;

  margin-right: 8px;

}



@keyframes spin {

  to {

    transform: rotate(360deg);

  }

}



@media (max-width: 900px) {

  .surf-grid {

    grid-template-columns: 1fr;

  }



  .surf-kpis {

    grid-template-columns: 1fr;

  }

}





/* =============================== */

/*            CONTACTO             */

/* =============================== */



.contact-section{

  position: relative;

  width: 100%;

  padding: 120px 20px;

  overflow: hidden;

  display: flex;

  justify-content: center;

  align-items: center;

}



/* Fondo con imagen (opcional). Si no querés imagen, podés borrar esto */

.contact-section::before{

  content:"";

  position:absolute;

  inset:0;

  background: url("../img/playa2.png") no-repeat center/cover;

  filter: brightness(0.55);

  transform: scale(1.03);

  z-index:0;

}



/* Capa de contraste */

.contact-section::after{

  content:"";

  position:absolute;

  inset:0;

  background: radial-gradient(circle at top,

    rgba(0,0,0,0.25),

    rgba(0,0,0,0.55)

  );

  z-index:1;

}



/* Tarjeta */

.contact-card{

  position: relative;

  z-index: 2;

  width: 100%;

  max-width: 560px;

  background: rgba(255,255,255,0.95);

  backdrop-filter: blur(8px);

  border: 1px solid rgba(255,255,255,0.35);

  border-radius: 18px;

  padding: 34px 34px 28px;

  box-shadow: 0 18px 45px rgba(0,0,0,0.35);

}



.contact-title{

  text-align: center;

  font-size: 20px;

  font-weight: 700;

  letter-spacing: 0.12em;

  margin-bottom: 18px;

  color:#111;

  text-transform: uppercase;

}



/* Grupo */

.contact-group{

  margin-top: 14px;

}



.contact-group label{

  display:block;

  margin-bottom: 6px;

  font-size: 12px;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 0.08em;

  color:#2b2b2b;

}



/* Inputs */

.contact-group input,

.contact-group textarea{

  width: 100%;

  padding: 12px 14px;

  border-radius: 10px;

  border: 1px solid #d7d7d7;

  background: #fff;

  font-size: 14px;

  transition: 0.25s;

  resize: vertical;

}



.contact-group input:focus,

.contact-group textarea:focus{

  outline: none;

  border-color: #3b5bff;

  box-shadow: 0 0 0 4px rgba(59, 91, 255, 0.15);

}



/* Botón */

.contact-btn{

  width: 100%;

  margin-top: 18px;

  padding: 14px;

  border: none;

  border-radius: 12px;

  cursor: pointer;

  font-size: 13px;

  font-weight: 700;

  letter-spacing: 0.15em;

  text-transform: uppercase;

  color: #fff;

  background: linear-gradient(135deg,#3b5bff,#1f39ff);

  transition: 0.25s;

}



.contact-btn:hover{

  transform: translateY(-2px);

  box-shadow: 0 12px 25px rgba(59, 91, 255, 0.35);

}



.contact-btn:disabled{

  opacity: 0.65;

  cursor: not-allowed;

  transform: none;

  box-shadow: none;

}



/* Estado (mensajes) */

.contact-status{

  margin-top: 12px;

  font-size: 14px;

  text-align: center;

  color:#0f172a;

}



/* Responsive */

@media (max-width:520px){

  .contact-card{

    padding: 26px 18px 20px;

    border-radius: 16px;

  }

}



.shop-section {

  padding: 100px 20px;

  background: #f8fafc;

}



.shop-header {

  text-align: center;

  margin-bottom: 50px;

}



.shop-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 32px;

  max-width: 1200px;

  margin: auto;

}



.product-card {

  background: #fff;

  border-radius: 20px;

  overflow: hidden;

  box-shadow: 0 20px 40px rgba(0,0,0,.08);

  transition: transform .3s;

}



.product-card:hover {

  transform: translateY(-6px);

}



.product-card img {

  width: 100%;

  height: 280px;

  object-fit: cover;

}



.product-info {

  padding: 20px;

}



.product-meta {

  display: flex;

  justify-content: space-between;

  align-items: center;

}



.price {

  font-weight: 700;

  font-size: 18px;

}



.badge {

  padding: 6px 12px;

  border-radius: 20px;

  font-size: 12px;

}



.badge.alquiler {

  background: #e0f2fe;

  color: #0369a1;

}



.badge.venta {

  background: #ecfeff;

  color: #0f766e;

}



.open-product {

  width: 100%;

  margin-top: 14px;

  padding: 12px;

  border: none;

  border-radius: 12px;

  background: #2563eb;

  color: #fff;

  font-weight: 600;

  cursor: pointer;

}





/* =========================

   MODAL PRODUCTO – PRO

========================= */



.product-modal {

  position: fixed;

  inset: 0;

  z-index: 50;

  display: flex;

  align-items: center;

  justify-content: center;

}



.product-modal.hidden {

  display: none;

}



/* Overlay */

.product-modal-overlay {

  position: absolute;

  inset: 0;

  background: rgba(0, 0, 0, 0.65);

  backdrop-filter: blur(2px);

}



/* Caja principal */

.product-modal-box {

  position: relative;

  background: #ffffff;

  max-width: 880px;

  width: 92%;

  border-radius: 18px;

  padding: 26px;

  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.25);

  z-index: 2;

  animation: modalIn 0.25s ease;

}



@keyframes modalIn {

  from {

    opacity: 0;

    transform: translateY(15px) scale(0.98);

  }

  to {

    opacity: 1;

    transform: none;

  }

}



/* Cerrar */

.modal-close {

  position: absolute;

  top: 12px;

  right: 14px;

  font-size: 26px;

  background: none;

  border: none;

  cursor: pointer;

  color: #444;

}



.modal-close:hover {

  color: #000;

}



/* Grid */

.modal-grid {

  display: grid;

  grid-template-columns: 1.1fr 0.9fr;

  gap: 28px;

  align-items: start;

}



/* Imagen */

.modal-image {

  background: #f4f4f4;

  border-radius: 16px;

  padding: 10px;

}



.modal-image img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  border-radius: 12px;

}



/* Info */

.modal-info h2 {

  font-size: 28px;

  margin: 0 0 6px;

}



#modalDesc {

  color: #555;

  line-height: 1.6;

  margin-bottom: 14px;

}



/* Precio + tipo */

.modal-meta {

  display: flex;

  align-items: center;

  gap: 12px;

  margin-bottom: 14px;

}



.price {

  font-size: 24px;

  font-weight: 700;

}



/* Badge */

.badge {

  padding: 6px 14px;

  font-size: 13px;

  border-radius: 999px;

  text-transform: uppercase;

  font-weight: 600;

}



.badge.alquiler {

  background: #e0f2fe;

  color: #0369a1;

}



.badge.venta {

  background: #dcfce7;

  color: #166534;

}



/* Tallas */

.sizes {

  display: flex;

  flex-wrap: wrap;

  gap: 8px;

  margin-bottom: 18px;

}



.sizes span {

  padding: 6px 12px;

  border-radius: 8px;

  background: #f1f1f1;

  font-size: 14px;

}



/* Botón */

#modalAddCart {

  width: 100%;

  padding: 14px;

  font-size: 16px;

  border-radius: 10px;

  border: none;

  cursor: pointer;

  background: linear-gradient(135deg, #111827, #374151);

  color: #fff;

  font-weight: 600;

}



#modalAddCart:hover {

  opacity: 0.9;

}



/* =========================

   RESPONSIVE

========================= */

@media (max-width: 768px) {

  .modal-grid {

    grid-template-columns: 1fr;

  }



  .modal-info h2 {

    font-size: 22px;

  }



  .price {

    font-size: 20px;

  }

}





/* ==========================

   CARRITO LATERAL – PRO

========================== */



.cart-drawer {

  position: fixed;

  top: 0;

  right: -420px;

  width: 420px;

  height: 100%;

  background: #ffffff;

  box-shadow: -20px 0 60px rgba(0,0,0,.25);

  transition: right .35s ease;

  z-index: 60;



  display: flex;

  flex-direction: column;

}



/* Abierto */

.cart-drawer.open {

  right: 0;

}



/* Header */

.cart-header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 18px;

  border-bottom: 1px solid #eee;

}



.cart-header h3 {

  margin: 0;

  font-size: 18px;

  font-weight: 700;

}



#closeCart {

  font-size: 26px;

  border: none;

  background: none;

  cursor: pointer;

}



/* Items */

.cart-items {

  padding: 18px;

  overflow-y: auto;

  flex: 1;

}



/* Item */

.cart-item {

  display: flex;

  gap: 14px;

  padding: 12px 0;

  border-bottom: 1px solid #f1f1f1;

}



.cart-item img {

  width: 70px;

  height: 70px;

  object-fit: cover;

  border-radius: 12px;

  background: #f4f4f4;

}



/* Info */

.cart-item-info {

  flex: 1;

}



.cart-item-info strong {

  display: block;

  font-size: 15px;

  margin-bottom: 6px;

}



/* Cantidad */

.cart-qty {

  display: flex;

  align-items: center;

  gap: 6px;

}



.cart-qty button {

  width: 28px;

  height: 28px;

  border-radius: 6px;

  border: none;

  cursor: pointer;

  background: #f1f1f1;

  font-weight: 700;

}



.cart-qty span {

  min-width: 20px;

  text-align: center;

}



/* Precio */

.cart-price {

  font-weight: 600;

  white-space: nowrap;

}



/* Footer */

.cart-footer {

  padding: 18px;

  border-top: 1px solid #eee;

  background: #fafafa;

}



/* Total */

.cart-total {

  display: flex;

  justify-content: space-between;

  font-size: 18px;

  margin-bottom: 14px;

}



/* Form */

#orderForm {

  display: grid;

  gap: 10px;

}



#orderForm input {

  padding: 10px;

  border-radius: 8px;

  border: 1px solid #ddd;

  font-size: 14px;

}



/* Botón */

#orderForm button {

  padding: 12px;

  border-radius: 10px;

  border: none;

  cursor: pointer;

  background: linear-gradient(135deg,#111827,#374151);

  color: #fff;

  font-weight: 600;

  font-size: 15px;

}



/* ==========================

   RESPONSIVE

========================== */

@media (max-width: 480px) {

  .cart-drawer {

    width: 100%;

    right: -100%;

  }

}

.lang-switcher {

    display: flex;

    align-items: center;

    gap: 10px;

    color: #fff;

    font-size: 0.95rem;

    margin-left: 20px;

}

.lang-switcher a {

    color: #fff;

    text-decoration: none;

}

.lang-switcher a.active {

    font-weight: bold;

    text-decoration: underline;

}

@media (max-width: 768px) {

    .lang-switcher {

        margin: 10px 0;

        justify-content: center;

    }

}





/* iPad Pro / tablets grandes */

@media (max-width: 1024px) {

  .shop-grid {

    grid-template-columns: repeat(2, 1fr);

    gap: 24px;

    padding: 0 16px;

  }



  .product-card img {

    height: 240px;

  }

}



@media (max-width: 1024px) {

  .cart-drawer {

    width: 90%;

    right: -100%;

  }



  .cart-drawer.open {

    right: 0;

  }

}

.shop-grid,

.cart-items,

.modal-grid {

  min-width: 0;

}



.product-card,

.modal-info,

.cart-item-info {

  min-width: 0;

}

button,

.open-product,

#modalAddCart {

  -webkit-appearance: none;

  appearance: none;

}

@media (pointer: coarse) {

  .shop-grid {

    grid-template-columns: repeat(2, 1fr);

  }

}



.btn-paypal {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 10px;

  margin-bottom: 14px;

  padding: 14px;

  border-radius: 12px;

  background: #ffc439;

  color: #111;

  font-weight: 700;

  font-size: 15px;

  text-decoration: none;

  transition: 0.25s;

}



.btn-paypal i {

  font-size: 20px;

}



.btn-paypal:hover {

  background: #ffb703;

  transform: translateY(-2px);

  box-shadow: 0 10px 20px rgba(0,0,0,0.25);

}



.cart-divider {

  display: flex;

  align-items: center;

  margin: 16px 0;

}



.cart-divider::before,

.cart-divider::after {

  content: "";

  flex: 1;

  height: 1px;

  background: #e5e7eb;

}



.cart-divider span {

  padding: 0 12px;

  font-size: 12px;

  font-weight: 700;

  color: #6b7280;

  letter-spacing: 0.15em;

  text-transform: uppercase;

}



.btn-buy-photo {

    display: inline-flex;

    align-items: center;

    gap: 10px;



    padding: 12px 26px;



    background: linear-gradient(135deg, #0284c7, #0ea5e9);

    color: #fff;



    font-family: 'Open Sans', sans-serif;

    font-size: 15px;

    font-weight: 600;



    border: none;

    border-radius: 999px;

    cursor: pointer;



    box-shadow: 0 8px 22px rgba(14, 165, 233, 0.35);

    transition: all 0.25s ease;

}



.btn-buy-photo:hover {

    transform: translateY(-1px);

    box-shadow: 0 12px 28px rgba(14, 165, 233, 0.45);

}



.btn-buy-photo:active {

    transform: scale(0.97);

}



/* ===============================

   LIGHTBOX OVERLAY

================================ */

.lightbox {

    position: fixed;

    inset: 0;

    z-index: 9999;



    display: none;

    align-items: center;

    justify-content: center;



    background: rgba(0, 0, 0, 0.9);

    backdrop-filter: blur(2px);

}



/* ===============================

   CONTENEDOR PRINCIPAL

================================ */

.lightbox-container {

    position: relative;



    display: flex;

    flex-direction: column;



    max-width: 92vw;

    max-height: 92vh;



    background: #000;

    border-radius: 12px;



    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.75);

}



/* ===============================

   IMAGEN (PROTAGONISTA)

================================ */

.lightbox-img {

    display: block;



    max-width: 100%;

    max-height: 78vh;



    object-fit: contain;

    background: #000;

}



/* ===============================

   FOOTER (CTA / INFO)

================================ */

.lightbox-footer {

    display: flex;

    justify-content: center;

    align-items: center;



    padding: 14px 20px;



    background: linear-gradient(

        to top,

        rgba(0, 0, 0, 0.85),

        rgba(0, 0, 0, 0.6)

    );

}



/* ===============================

   BOTÓN COMPRAR FOTO

================================ */

.btn-buy-photo {

    display: inline-flex;

    align-items: center;

    gap: 10px;



    padding: 12px 30px;



    background: linear-gradient(135deg, #0077ff, #00b3ff);

    color: #ffffff;



    font-family: 'Open Sans', sans-serif;

    font-size: 15px;

    font-weight: 600;



    border: none;

    border-radius: 999px;

    cursor: pointer;



    box-shadow: 0 10px 26px rgba(0, 119, 255, 0.45);

    transition: all 0.25s ease;

}



.btn-buy-photo:hover {

    transform: translateY(-2px);

    box-shadow: 0 16px 36px rgba(0, 119, 255, 0.6);

}



.btn-buy-photo:active {

    transform: scale(0.96);

}



/* ===============================

   BOTÓN CERRAR

================================ */

.lightbox-close {

    position: absolute;

    top: 14px;

    right: 18px;



    font-size: 26px;

    color: rgba(255, 255, 255, 0.85);

    cursor: pointer;



    z-index: 5;

    transition: color 0.2s ease;

}



.lightbox-close:hover {

    color: #ffffff;

}



/* ===============================

   BOTONES PREV / NEXT

================================ */

.lightbox-prev,

.lightbox-next {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);



    background: rgba(0, 0, 0, 0.65);

    color: #ffffff;



    border: none;

    font-size: 34px;

    line-height: 1;



    padding: 10px 14px;

    cursor: pointer;



    border-radius: 6px;

    transition: background 0.2s ease;



    z-index: 4;

}



.lightbox-prev:hover,

.lightbox-next:hover {

    background: rgba(0, 0, 0, 0.85);

}



.lightbox-prev {

    left: -56px;

}



.lightbox-next {

    right: -56px;

}



/* ===============================

   BOTÓN FULLSCREEN

================================ */

.lightbox-fullscreen {

    position: absolute;

    bottom: 18px;

    right: 18px;



    background: rgba(0, 0, 0, 0.65);

    color: #ffffff;



    border: none;

    font-size: 18px;

    padding: 8px 10px;

    border-radius: 6px;



    cursor: pointer;

    transition: background 0.2s ease;



    z-index: 4;

}



.lightbox-fullscreen:hover {

    background: rgba(0, 0, 0, 0.85);

}



/* ===============================

   ESTADOS DEL BOTÓN

================================ */

.btn-buy-photo.success {

    background: linear-gradient(135deg, #16a34a, #22c55e);

    box-shadow: none;

    cursor: default;

}



.btn-buy-photo.disabled {

    background: #6b7280;

    box-shadow: none;

    cursor: not-allowed;

}



/* ===============================

   RESPONSIVE (MÓVIL)

================================ */

@media (max-width: 768px) {



    .lightbox-container {

        max-width: 100vw;

        max-height: 100vh;

        border-radius: 0;

    }



    .lightbox-img {

        max-height: 70vh;

    }



    .lightbox-prev {

        left: 10px;

    }



    .lightbox-next {

        right: 10px;

    }



    .lightbox-footer {

        padding: 16px;

    }



    .btn-buy-photo {

        width: 100%;

        justify-content: center;

    }

}



/* =========================
   PAYPAL BUTTON
========================= */
.btn-paypal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  margin-top: 14px;
  padding: 14px 22px;

  width: 100%;
  max-width: 420px;

  background: linear-gradient(135deg, #ffc439, #ffb347);
  color: #111;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;

  border-radius: 14px;
  border: none;

  box-shadow: 0 10px 25px rgba(255, 196, 57, 0.35);
  transition: all 0.25s ease;

  cursor: pointer;
}

.btn-paypal:hover {
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 14px 32px rgba(255, 196, 57, 0.45);
}

.btn-paypal:active {
  transform: scale(0.98);
}

/* Icon */
.btn-paypal::before {
  content: "";
  font-family: "Font Awesome 6 Brands";
  font-weight: 400;
  font-size: 18px;
}

/* Texto ayuda */
.paypal-note {
  margin-top: 8px;
  font-size: 13px;
  color: #666;
  text-align: center;
}