header.container-header {
  background-color: #ffffff !important;
  background-image: none !important;
}

  .hover-overlay {
    position: relative;
    display: inline-block;
    width: 100%;
    aspect-ratio: 1/1;
    overflow: hidden;
  }

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

  .hover-overlay::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #AA7DCE;
    opacity: 0;
    transition: opacity 0.3s;
    border-radius: 30px; 
  }

  .hover-overlay:hover::after {
    opacity: 0.5;
  }


/* === ESTILO POR DEFECTO (ESCRITORIO) === */
.btn-registrarse {
  font-size: 18px;
  padding: 5px 19px;
  background-color: #FE9105;
  border-radius: 30px;
  color: white;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-registrarse:hover {
  background-color: #e38e22; /* Hover opcional */
  color: white;
}

/* === AJUSTES SOLO PARA MÓVILES === */
@media (max-width: 991px) {
  .logo-img {
    height: 50px !important;
  }

  .navbar-toggler {
    border: none;
    padding: 6px;
  }

  /* Mostrar solo texto, ocultar íconos */
  .nav-mobile-hide-icon img {
    display: none !important;
  }

  .nav-mobile-show-text {
    display: inline !important;
    font-size: 16px;
    color: #fe9105 !important;
  }

  /* Botón Registrarse sin fondo en móvil */
  .btn-registrarse {
    background-color: transparent !important;
    border-radius: 0 !important;
    padding: 8px 0 !important;
    color: #24387d !important;
  }

  /* Menú en columna para móviles */
.nav-menu-items {
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 6px !important;
  width: 100%;
  margin-top: 12px;
}

.nav-menu-items .nav-link {
  align-self: flex-end !important;
  width: auto;
  text-align: right !important;
  margin-right: 0 !important;
  padding-right: 0 !important;
}


  /* Tienda texto en móvil */
  .only-mobile {
    display: inline !important;
    color: #fe9105;
    font-size: 16px;
  }

  .only-desktop {
    display: none !important;
  }
}

.footer {
  background-color: #FE9105;
  color: white;
  font-family: 'Montserrat', sans-serif;
  padding: 60px 40px;
  border-radius: 40px 40px 0 0;
  width: 100%;
  box-sizing: border-box;
  background-image: none;
}

.footer-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
  max-width: 1200px;
  margin: auto;
}

.footer-col {
  flex: 1 1 200px;
  min-width: 180px;
}

.footer-col h4 {
  font-weight: bold;
  margin-bottom: 12px;
}

.footer-col p {
  margin: 6px 0;
}

.logo-col img {
  margin-bottom: 10px;
  max-width: 150px;
}

.social-icons {
  display: flex;
  gap: 16px;
  margin-top: 20px;
}

.social-icons img {
  width: 24px;
}

/* ✅ ADAPTACIÓN PARA MÓVILES */
@media (max-width: 768px) {
  .footer-content {
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: 0 20px;
  }

  .footer-col {
    text-align: center;
  }

  .social-icons {
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .footer-col.footer-col-compact {
    flex: 1 1 160px !important;
  }
}

/* Centrar completamente la columna del logo */
.logo-col {
  display: flex;
  justify-content: center;   /* Centra horizontal */
  align-items: center;       /* Centra vertical */
  text-align: center;
}

/* Ajustar tamaño del logo */
.logo-col img {
  max-width: 200px;          /* <-- Aumenta el tamaño del logo */
  width: 100%;               /* Para que sea responsive */
  height: auto;
}



.nav-link-sub {
  margin-right: 15px;
  color: #24387d;
  text-decoration: none;
  transition: color 0.3s ease;
}

.nav-link-sub:hover {
  color: #aa7dce;
}

.nav-link-sub.active {
  color: #aa7dce;
  font-weight: bold;
}

.contacto-wrapper {
  display: flex;
  gap: 40px;
  justify-content: center;
  align-items: flex-start;
  font-family: 'Montserrat', sans-serif;
  flex-wrap: wrap;
  padding: 20px;
}

.contacto-form {
  flex: 1 1 300px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 280px;
}

.contacto-form label {
  font-weight: bold;
  margin-top: 10px;
  color: #24387d;
}

.contacto-form input,
.contacto-form textarea {
  border: none;
  background-color: #d8d1e7;
  border-radius: 15px;
  padding: 10px;
  font-size: 1em;
  font-family: 'Montserrat', sans-serif;
}

.contacto-form button {
  margin-top: 10px;
  padding: 10px 30px;
  border: none;
  background-color: #aa7dce;
  color: white;
  border-radius: 50px;
  font-weight: bold;
  font-size: 1.1em;
  cursor: pointer;
  align-self: flex-start;
}

.contacto-info {
  flex: 1 1 250px;
  color: #24387d;
  font-size: 1em;
  min-width: 260px;
}

.contacto-info h3 {
  font-weight: bold;
  font-size: 1.4em;
  margin-bottom: 10px;
}

.contacto-info ul {
  list-style: none;
  padding: 0;
  margin-top: 15px;
}

.contacto-info li {
  margin-bottom: 8px;
}

/* MÓVIL */
@media (max-width: 768px) {
  .contacto-wrapper {
    flex-direction: column;
    align-items: center;
  }

  .contacto-form,
  .contacto-info {
    width: 100%;
    max-width: 400px;
  }

  .contacto-form button {
    align-self: center;
  }
}

.mapa-container {
  margin-top: 40px;
  border-radius: 20px;
  overflow: hidden;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.sabias-section {
  text-align: center;
  padding: 60px 20px;
  font-family: 'Montserrat', sans-serif;
}

.sabias-titulo {
  font-size: 64px;
  color: #aa7dce;
  margin-bottom: 40px;
  font-weight: bold;
}

.sabias-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
}

.sabias-card {
  position: relative;
  border-radius: 30px;
  overflow: hidden;
  width: 100%;
  max-width: 400px;
  background-color: #aa7dce;
}

.sabias-card img {
  width: 100%;
  display: block;
}

.sabias-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
}

.sabias-numero {
  width: 107px;
  height: 107px;
  background-color: #24387d;
  color: white;
  font-size: 64px;
  font-weight: bold;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.sabias-texto {
  color: white;
  font-size: 24px;
  font-weight: bold;
  max-width: 400px;
  margin: 0 auto;
}

/* ✅ Adaptación para móviles */
@media (max-width: 768px) {
  .sabias-titulo {
    font-size: 42px;
  }

  .sabias-grid {
    flex-direction: column;
    align-items: center;
  }

  .sabias-numero {
    width: 80px;
    height: 80px;
    font-size: 42px;
  }

  .sabias-texto {
    font-size: 18px;
    padding: 0 10px;
  }
}

.ets-wrapper {
  font-family: Montserrat, sans-serif;
  color: #24387d;
  background: #fff;
  border-radius: 12px;
  max-width: 900px;
  margin: auto;
  padding: 20px;
}

.ets-title {
  font-size: 2.5em;
  font-weight: bold;
  color: #aa7dce;
}

.ets-date {
  font-size: 1.1em;
  color: #aa7dce;
  margin-bottom: 30px;
}

.ets-subtitle {
  font-size: 2.2em;
  font-weight: bold;
  color: #24387d;
  margin-top: 50px;
}

.ets-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  margin: 30px 0 20px;
}

.ets-tabs button {
  padding: 6px 24px;
  font-weight: 600;
  font-size: 1.2em;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  background-color: #eee;
}

.ets-tabs button:hover {
  background: #aa7dce;
  color: white;
}

.ets-section {
  padding-top: 60px;
  margin-bottom: 30px;
}

.ets-section-title {
  font-size: 1.5em;
  font-weight: bold;
  margin-bottom: 10px;
}

.ets-highlight {
  font-size: 1.3em;
  color: #b9afd2;
  font-weight: bold;
  margin-bottom: 10px;
}

.ets-highlight.purple {
  color: #aa7dce;
}

.ets-list {
  margin-left: 20px;
  margin-bottom: 30px;
  font-size: 1.2em;
}

.ets-cols {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 40px;
}

.ets-col {
  flex: 1 1 300px;
}

.ets-col-title {
  font-weight: bold;
  font-size: 1.3em;
  background: #b9afd2;
  color: #fff;
  padding: 10px;
  text-align: center;
  margin-bottom: 10px;
  border-radius: 30px;
}

.ets-col-title.left {
  border-radius: 50px 0 0 50px;
}

.ets-col-title.right {
  border-radius: 0 50px 50px 0;
}

.ets-content-cols {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  margin-top: 60px;
  gap: 20px;
}

.ets-left {
  flex: 1 1 480px;
}

.ets-right {
  flex: 1 1 300px;
  text-align: center;
}

.ets-right img {
  max-width: 100%;
  height: auto;
}

/* ✅ Mobile responsive */
@media (max-width: 768px) {
  .ets-title {
    font-size: 1.8em;
  }

  .ets-subtitle {
    font-size: 1.5em;
  }

  .ets-tabs button {
    font-size: 1em;
  }

  .ets-cols,
  .ets-content-cols {
    flex-direction: column;
  }

  .ets-col-title.left,
  .ets-col-title.right {
    border-radius: 30px;
  }
}

.rompe-tabu {
  color: #aa7dce;
  border-top: 2px solid #AA7DCE;
  border-bottom: 2px solid #AA7DCE;
  display: inline-block;
  padding: 10px 20px;
  margin-bottom: 60px;
  font-size: 4em;
  font-weight: bold;
  font-family: 'Montserrat', sans-serif;
}

.filtros-tabus {
  margin-bottom: 40px;
  font-weight: bold;
  font-size: 1.4em;
  color: #24387d;
}

.filtros-tabus a {
  margin: 0 10px;
  color: #24387d;
  text-decoration: none;
}

/* ✅ Responsive solo para móvil */
@media (max-width: 768px) {
  .rompe-tabu {
    font-size: 1.5em;
    padding: 8px 16px;
    margin-bottom: 40px;
  }

  .filtros-tabus {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    font-size: 1.2em;
  }

  .filtros-tabus a {
    margin: 0;
  }
}

.categorias-tienda {
  font-family: 'Montserrat', sans-serif;
  text-align: center;
  padding: 40px 20px;
  color: #24387d;
}

.titulo-categorias {
  font-size: 2em;
  font-weight: bold;
  margin-bottom: 30px;
  position: relative;
  display: inline-block;
}

.titulo-categorias::after {
  content: "";
  display: block;
  width: 100%;
  height: 3px;
  background-color: #aa7dce;
  margin-top: 10px;
}

.categorias-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

.categoria-item {
  position: relative;
  background-size: cover;
  background-position: center;
  border-radius: 16px;
  width: 280px;
  height: 360px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.overlay-texto {
  background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);
  width: 100%;
  padding: 20px;
  color: white;
  text-align: center;
}

.overlay-texto h3 {
  font-size: 1.4em;
  font-weight: bold;
  margin-bottom: 12px;
}

.btn-ver-mas {
  display: inline-block;
  background-color: white;
  color: #24387d;
  padding: 8px 20px;
  border-radius: 40px;
  font-weight: bold;
  font-size: 1em;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

.btn-ver-mas:hover {
  background-color: #e2d9f3;
}

/* ✅ Responsive móvil */
@media (max-width: 768px) {
  .categoria-item {
    width: 100%;
    height: 300px;
  }

  .titulo-categorias {
    font-size: 1.6em;
  }

  .overlay-texto h3 {
    font-size: 1.2em;
  }

  .btn-ver-mas {
    font-size: 0.95em;
    padding: 6px 16px;
  }
}

.destacados-tienda {
  padding: 60px 20px;
  font-family: 'Montserrat', sans-serif;
  text-align: center;
  color: #24387d;
}

.titulo-destacados {
  font-size: 2em;
  font-weight: bold;
  margin-bottom: 10px;
  color: #305663;
  margin-left: 70px;
}

.subtitulo-destacados {
  font-size: 1.3em;
  margin-bottom: 40px;
  color: #24387d;
  font-weight: 600;
}

.productos-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

.producto-card {
  width: 260px;
  background-color: #fdfcff;
  border-radius: 16px;
  overflow: hidden;
}

.producto-card img {
  width: 100%;
  object-fit: cover;
  height: 260px;
}

.producto-info {
  padding: 16px;
  text-align: left;
}

.producto-nombre {
  font-size: 1.1em;
  font-weight: bold;
  margin-bottom: 1px;
  color: #24387d;
}

.estrellas {
  margin-bottom: 10px;
}

.estrellas img {
  width: 18px;
  height: 18px;
}

.producto-info p {
  font-size: 0.95em;
  margin-bottom: 0px;
}

.precio {
  font-weight: bold;
  font-size: 1.1em;
  color: #24387d;
}

/* Separador inferior */
.separador-tienda {
  background-color: #dcddde;
  height: 180px;
  position: relative;
  margin-top: 60px;
}

.separador-tienda img {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 100%;
  object-fit: contain;
}

/* Responsive */
@media (max-width: 768px) {
  .producto-card {
    width: 100%;
  }

  .productos-grid {
    flex-direction: column;
    align-items: center;
  }

  .titulo-destacados {
    font-size: 1.6em;
  }

  .subtitulo-destacados {
    font-size: 1.1em;
  }

  .separador-tienda {
    height: 120px;
  }

  .separador-tienda img {
    height: 120px;
  }
}

.detalle-producto-tienda {
  font-family: 'Montserrat', sans-serif;
  padding: 40px 20px;
  color: #24387d;
  max-width: 1200px;
  margin: 0 auto;
}

.detalle-nombre {
  font-size: 2em;
  font-weight: bold;
  margin-bottom: 10px;
  color: #305663;
}

.detalle-rating {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 30px;
}

.detalle-rating span {
  color: #444;
  font-size: 0.9em;
}

.detalle-contenedor {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
}

.detalle-imagenes {
  flex: 1;
  min-width: 300px;
}

.imagen-principal {
  border-radius: 16px;
  overflow: hidden;
  text-align: center;
}

.imagen-principal img {
  width: 100%;
  max-height: 400px;
  object-fit: contain;
}

.detalle-info {
  flex: 1;
  min-width: 300px;
}

.detalle-card {
  background-color: #B6D4CA;
  padding: 30px;
  border-radius: 20px;
  color: #305663;
  max-width: 400px;
}

.detalle-card h3 {
  margin-top: 0;
  font-size: 1.5em;
  font-weight: bold;
}

.precio-unitario {
  font-weight: bold;
  font-size: 1.2em;
  margin-bottom: 15px;
}

.detalle-compra {
  margin-top: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.cantidad input {
  width: 60px;
  padding: 5px;
  border: none;
  border-radius: 6px;
  font-size: 1em;
}

.total {
  font-weight: bold;
  font-size: 1.2em;
  color: white;
}

.btn-comprar {
  background: ##f7f8fb;
  border: none;
  border-radius: 10px;
  padding: 10px 15px;
  cursor: pointer;
}

.btn-comprar img {
  width: 24px;
  height: 24px;
}

/* Responsive */
@media (max-width: 768px) {
  .detalle-contenedor {
    flex-direction: column;
  }

  .detalle-compra {
    flex-direction: column;
    align-items: flex-start;
  }

  .detalle-card {
    padding: 20px;
  }
}

.reviews-container {
  display: flex;
  justify-content: center;
  font-family: Montserrat, sans-serif;
  color: #24387D;
  gap: 100px;
  flex-wrap: wrap;
  padding: 0 100px;
}

.comentarios, .resenas {
  flex: 1;
  min-width: 300px;
}

.comentarios h3,
.resenas h3 {
  font-size: 28px;
  margin-bottom: 5px;
  font-weight: 700;
}

.comentario {
  display: flex;
  background: #FE9105 !important;
  color: #fff;
  border-radius: 12px;
  padding: 10px 15px;
  margin-bottom: 12px;
  align-items: flex-start;
  gap: 10px;
}

.comentario--verde {
  background: #6FB3A6 !important;
}

.icono-usuario {
  width: 32px;
  height: 32px;
  filter: brightness(0) invert(1); /* cambia azul a blanco */
}

.resenas p {
  font-size: 18px;
  margin-bottom: 12px;
  font-weight: 700;
}

.barra {
  display: flex;
  align-items: center;
  font-size: 14px;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.barra .progreso {
  flex: 1;
  height: 8px;
  background: #eee;
  border-radius: 4px;
  overflow: hidden;
}

.barra .relleno {
  height: 100%;
  background: #6FB3A6;
  border-radius: 4px;
}

/* ✅ Estilos responsive para móviles */
@media screen and (max-width: 768px) {
  .reviews-container {
    flex-direction: column;
    padding: 0 10px;
  }

  .comentarios, .resenas {
    width: 100%;
  }

  .comentario {
    flex-direction: row;
  }

  .icono-usuario {
    flex-shrink: 0;
  }
}

.producto-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

.login-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  padding: 40px;
  font-family: Montserrat, sans-serif;
  flex-wrap: wrap;
}

.login-form {
  flex: 1;
  max-width: 400px;
  color: #24387D;
}

.login-form h2 {
  font-size: 24px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: flex;
  align-items: center;
  font-weight: 600;
  margin-bottom: 5px;
  color: #24387D;
  font-size: 14px;
}

.form-group input {
  width: 100%;
  padding: 10px 15px;
  border-radius: 20px;
  border: none;
  background-color: #B6D4CA;
}

.icon {
  width: 16px;
  height: 16px;
  margin-right: 6px;
  filter: brightness(0) saturate(100%) sepia(97%) hue-rotate(185deg) brightness(90%) contrast(140%);
}

.btn-ingresar {
  background-color: #FE9105;
  color: white;
  border: none;
  padding: 10px 25px;
  border-radius: 20px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.3s;
}

.btn-ingresar:hover {
  background-color: #e38e22;
}

.login-logo {
  flex: 1;
  text-align: center;
}

.login-logo img {
  max-width: 100%;
  height: auto;
}

/* ✅ Responsive */
@media (max-width: 768px) {
  .login-container {
    flex-direction: column;
    align-items: stretch;
  }

  .login-form, .login-logo {
    max-width: 100%;
    text-align: center;
  }

  .login-form h2 {
    justify-content: center;
  }
}

.registro-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  padding: 40px;
  font-family: Montserrat, sans-serif;
  flex-wrap: wrap;
}

.registro-formulario {
  flex: 1;
  max-width: 450px;
  color: #24387D;
}

.registro-formulario h2 {
  font-size: 24px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.registro-grupo {
  margin-bottom: 20px;
}

.registro-grupo label {
  display: flex;
  align-items: center;
  font-weight: 600;
  margin-bottom: 5px;
  font-size: 14px;
}

.registro-grupo input {
  width: 100%;
  padding: 10px 15px;
  border-radius: 20px;
  border: none;
  background-color: #CCE1DA;
}

.icono-registro {
  width: 16px;
  height: 16px;
  margin-right: 6px;
  filter: brightness(0) saturate(100%) sepia(97%) hue-rotate(185deg) brightness(90%) contrast(140%);
}

.btn-registro {
  background-color: #FE9105;
  color: white;
  border: none;
  padding: 10px 25px;
  border-radius: 20px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.3s;
}

.btn-registro:hover {
  background-color: #e38e22;
}

.registro-logo {
  flex: 1;
  text-align: center;
}

.registro-logo img {
  max-width: 100%;
  height: auto;
}

/* ✅ Responsive */
@media (max-width: 768px) {
  .registro-container {
    flex-direction: column;
    align-items: stretch;
  }

  .registro-formulario,
  .registro-logo {
    max-width: 100%;
    text-align: center;
  }

  .registro-formulario h2 {
    justify-content: center;
  }
}

  @media (max-width: 768px) {
    #subheader-nav {
      flex-direction: column !important;
      padding: 15px 20px !important;
      gap: 15px !important;
      width: 90% !important;
    }
    #subheader-nav a {
      font-size: 16px !important;
    }
    #subheader-nav input {
      width: 100px !important;
    }
  }

.container-header .grid-child {
  justify-content: center !important;
}

.container-below-top-a {
  width: 100%;
  padding: 0;
  margin: 0;
}

@media screen and (max-width: 991px) {
  .only-desktop {
    display: none !important;
  }
}

  @media screen and (max-width: 991px) {
    #subheader-nav {
      display: none !important;
    }

    .logo-campana {
      width: 90% !important;
      max-width: 350px !important;
    }
  }

.carrito-container {
  max-width: 900px;
  margin: auto;
  padding: 2rem;
}

.carrito-item {
  display: flex;
  align-items: center;
  border: 1px solid #ccc;
  border-radius: 12px;
  margin-bottom: 1.5rem;
  padding: 1rem;
  gap: 1rem;
  flex-wrap: wrap;
}

.carrito-index {
  font-size: 1.7rem;
  font-weight: bold;
  background: #FE9105;
  color: white;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.carrito-imagen img {
  width: 215px;
  border-radius: 10px;
}

.carrito-info {
  flex: 1;
  min-width: 200px;
}

.carrito-info h3 {
  margin: 0;
  font-weight: 600;
  font-size: 1.1rem;
}

.carrito-info p {
  margin: 0.3rem 0;
  font-size: 0.95rem;
}

.carrito-acciones {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3rem;
}

.carrito-acciones img {
  
  cursor: pointer;
}

.carrito-btn-volver,
.carrito-btn-finalizar {
  margin-top: 2rem;
  padding: 0.6rem 1.5rem;
  font-weight: bold;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-size: 1rem;
}

.carrito-btn-volver {
  background-color: #FE9105;
  color: #fff;
  margin-right: 1rem;
  border-radius: 20px;
}

.carrito-btn-finalizar {
  background-color: #B6D4CA;
  color: #305663;
  border-radius: 20px;
}

/* ============ RESPONSIVE (MÓVIL) ============ */
@media (max-width: 768px) {
  .carrito-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.8rem;
    padding: 1.2rem;
  }

  .carrito-index {
    margin-bottom: 0.5rem;
  }

  .carrito-imagen img {
    width: 100%;
    max-width: 300px;
    margin-bottom: 0.5rem;
  }

  .carrito-info {
    width: 100%;
  }

  .carrito-info h3 {
    font-size: 1rem;
  }

  .carrito-info p {
    font-size: 0.9rem;
  }

  .carrito-acciones {
    flex-direction: row;
    width: 100%;
    justify-content: space-between;
  }

  .carrito-btn-volver,
  .carrito-btn-finalizar {
    width: 100%;
    margin-top: 1rem;
    padding: 0.8rem;
    font-size: 1rem;
  }
}

.btn-eliminar {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.btn-eliminar img {
    width: 35px;
  height: 35px;
}

.check-icon {
    width: 35px;
  height: 35px;
}

.pago-container {
  font-family: 'Montserrat', sans-serif;
  padding: 40px 20px;
  max-width: 1100px;
  margin: 0 auto;
  color: #24387d;
}

/* Contenedor de dos columnas */
.pago-contenido {
  display: flex;
  gap: 40px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

/* Columna de la izquierda */
.pago-formulario {
  flex: 1 1 500px;
  color: #305663;
}

/* Columna de la derecha (imagen decorativa) */
.imagen-pago {
  flex: 1 1 300px;
  text-align: center;
  margin-top: 40px;
}

.imagen-pago img {
  max-width: 100%;
  height: auto;
}

/* Títulos */
h2 {
  font-size: 1.6em;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Opciones de métodos de pago */
.metodos-pago label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-weight: 600;
}

.icono-pago {
  height: 20px;
}

/* Botones */
button.btn-continuar,
button.btn-pagar {
  background-color: #6FB3A6;
  color: white;
  font-weight: bold;
  padding: 10px 25px;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  margin: 20px 0;
  display: block;
  transition: opacity 0.3s ease;
}

button[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Sección de usuario */
.datos-usuario {
  margin-top: 30px;
}

.formulario {
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: #305663;
}

/* Campos de entrada */
input {
  padding: 10px;
  border-radius: 10px;
  border: none;
  background-color: #CCE1DA;
  font-size: 1em;
  color: #24387d;
}

input::placeholder {
  color: #7b7b7b;
}

.tarjeta-cvv {
  display: flex;
  gap: 10px;
}

/* Responsive para móviles */
@media (max-width: 768px) {
  .pago-contenido {
    flex-direction: column;
  }

  .imagen-pago {
    margin-top: 20px;
  }

  h2 {
    font-size: 1.3em;
  }

  .tarjeta-cvv {
    flex-direction: column;
  }
}

.compra-realizada {
  text-align: center;
  padding: 60px 20px;
  font-family: 'Montserrat', sans-serif;
  color: #24387d;
}

.cr-logo-final {
  max-width: 100%;
  height: auto;
  width: 523px;
  margin-bottom: 30px;
}

.compra-realizada h2 {
  font-size: 1.6em;
  font-weight: 700;
  margin-bottom: 30px;
  justify-content: center;
}

.cr-btn-volver {
  background-color: #FE9105;
  color: white;
  padding: 12px 30px;
  border-radius: 25px;
  font-weight: bold;
  text-decoration: none;
  display: inline-block;
  transition: background-color 0.3s ease;
}

.cr-btn-volver:hover {
  background-color: #ef8d3e;
}

@media (max-width: 600px) {
  .cr-logo-final {
    width: 220px;
  }

  .compra-realizada h2 {
    font-size: 1.3em;
  }
}

.capitulo-container {
  display: flex;
  align-items: center;
  margin: 0 auto 40px auto;
  max-width: 800px;
  font-family: Montserrat, sans-serif;
  gap: 20px;
}

.video-thumbnail {
  flex: 0 0 422px;
  height: 404px;
  border-radius: 30px;
  background-color: #d9d9d9; /* fallback si no hay imagen */
  background-size: cover; /* muestra la miniatura correctamente */
  background-position: center;
  position: relative;
  cursor: pointer;
}

.video-thumbnail .play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #aa7dce;
  border-radius: 50%;
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 56px;
  padding-left: 10px;
}

.capitulo-texto {
  flex: 1;
  padding-left: 20px;
  text-align: left;
}

.capitulo-texto p:first-child {
  color: #305663;
  margin: 0;
  font-weight: bold;
}

.capitulo-texto h3 {
  margin: 5px 0;
  color: #305663;
  font-weight: bold;
}

.capitulo-texto p:last-child {
  margin: 0;
  color: #305663;
}

/* ========== Responsive para móviles ========== */
@media (max-width: 768px) {
  .capitulo-container {
    flex-direction: column;
    text-align: center;
  }

  .video-thumbnail {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    background-size: cover;
    background-position: center;
  }

  .capitulo-texto {
    padding-left: 0;
    padding-top: 20px;
    text-align: center;
  }
}

/* ========== Botón del NavBAR ========== */

#subheader-nav .btn-sumate {
  background-color: #fe9105;
  color: white !important;
  padding: 5px 25px;
  border-radius: 30px;
  font-size: 18px;
  font-weight: 600;
  text-decoration: none;
  line-height: 1;
}

#subheader-nav .btn-sumate:hover {
  background-color: #ef8d3e;
}

/* ========== Recuadros Info ========== */

.card-info {
    position: relative;
    background-color: #6FB3A6; /* Puedes cambiar el color */
    border-radius: 20px;
    width: 100%;
    height: 220px;
    max-width: 330px;  /* Ajusta según el diseño */
    margin: 40px auto;
    
    /* FLEX para centrar el texto verticalmente */
    display:flex;
    justify-content: center; /* centra verticalmente */
    align-items: center;  /* centra horizontalmente */
  
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    box-shadow: 0 8px 20px rgba(0,0,0,0.10);

    padding: 20px 30px 20px; /* mínimo para que no pegue a los bordes */
}

.card-info h2 {
    color: white;
    font-size: 32px;
    font-weight: 700;
    margin: 0;
}

/* --- Recuadro pequeño superior --- */
.card-top {
    position: absolute;
    top: -35px; /* controla cuánto sobresale */
    left: 50%;
    transform: translateX(-50%);
    background-color: #6FB3A6; /* mismo color del recuadro grande */
    padding: 0px 25px;
    border-radius: 14px;
 
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Tamaño e imagen del ícono */
.card-top img {
    width: 50px;
    height: auto;
    margin-top: 15px;
}

/* Mismo recuadro pero naranja */
.card-info.orange,
.card-info.orange .card-top {
    background-color: #fe9105;
}

/* Tarjetas responsivas */
.cards-wrapper {
    display: flex;
    justify-content: center; /* centra horizontalmente */
    align-items: flex-start;
    flex-wrap: wrap;         /* permite que bajen */
    gap: 40px;               /* espacio entre tarjetas */
    width: 100%;
    margin: 40px auto;
}

/* --- Recuadros de perritos --- */

/* Título */
.featured-title {
  font-size: 32px;
  font-weight: bold;
  color: #305663;
  margin-bottom: 20px;
}

/* Contenedor de tarjetas */
.featured-list {
  display: flex;
  gap: 30px;
  justify-content: center;
}

/* Tarjeta individual */
.pet-card {
  width: 205px;
}

/* Imagen (rectángulo redondeado) */
.pet-image {
  width: 205px;
  height: 266px;
  border-radius: 30px;
  overflow: hidden;
}

.pet-image img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* igual que background-size: cover */
}


/* Texto */
.pet-info {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.pet-name {
  font-size: 18px;
  font-weight: bold;
  color: #305663;
}

.pet-age {
  font-size: 16px;
  color: #305663;
  opacity: 0.8;
}

/* ========== Sección general del final del body inicio ========== */
.pets-about {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    position: relative;
    margin: 60px auto;
    max-width: 1200px;
    padding: 0 20px;
}

/* Imagen grande */
.about-image img {
    width: 460px; 
    height: auto;
    border-radius: 34px;
    object-fit: cover;
    display: block;
    position: relative;
    z-index: 2; /* para que quede por encima del recuadro */
}

/* Recuadro de información */
.about-box {
    background-color: #FEDCB3;
    border-radius: 47px;
    padding: 20px 45px;
    max-width: 600px;
    position: relative;
    right: 60px;
    top: -160px;
    z-index: 1;
}

/* Título */
.about-title {
    color: #FE9105;
    font-size: 36px;
    font-weight: 900;
    margin-bottom: 20px;
}

/* Párrafo */
.about-text {
    font-size: 20px;
    font-weight: 500;
    color: #333;
    line-height: 1.4;
}

.about-text strong {
    font-weight: 700;
    color: #2c2c2c;
}

/* Segunda sección */
.pets-about-two {
    display: flex;
    justify-content: flex-end;
    position: relative;
    margin-top: -200px; /* similar superposición del diseño */
}

/* Recuadro verde */
.green-box {
    background-color: #B6D4CA;
    border-radius: 47px;
    padding: 20px 45px;
    width: 550px;
    position: relative;
    z-index: 1;
    text-align: right; /* alineación de todo hacia la derecha */
}

/* Título derecha */
.right-title {
    color: #305663;
    font-size: 36px;
    font-weight: 900;
    display: block !important; /* Para evitar el display:flex global */
    margin-bottom: 20px;
    text-align: right;
}

/* Texto a la derecha */
.right-text {
    font-size: 20px;
    font-weight: 500;
    color: #333;
    line-height: 1.4;
    text-align: right;
}

.right-text strong {
    font-weight: 700;
    color: #2c2c2c;
}


/* ========== Responsive Móvil de la misma sección del final del body inicio ========== */
@media (max-width: 991px) {

    .pets-about {
        flex-direction: column;
        gap: 20px;
    }

    .about-image img {
        width: 100%; /* que ocupe toda la pantalla */
        max-width: 400px;
    }

    .about-box {
        right: 0; /* quitar superposición */
        top: 0;
        margin-top: 10px;
        padding: 30px 25px;
        border-radius: 35px;
        width: 100%;
    }

    .about-title {
        font-size: 30px;
        text-align: center;
        display: block !important;
    }

    .about-text {
        font-size: 18px;
        text-align: center;
    }


    .pets-about-two {
        justify-content: center;
        margin-top: 20px;
        padding-right: 0;
    }

    .green-box {
        width: 100%;
        padding: 30px 25px;
        border-radius: 35px;
        text-align: center;
    }

    .right-title {
        text-align: center;
    }

    .right-text {
        font-size: 18px;
        text-align: center;
    }
}

/* Habilita scroll horizontal sensible y "snap" (suave) */
.featured-list {
  display: flex;               /* asegúrate que las cards sigan en fila */
  gap: 30px;                   /* mantiene el espacio entre tarjetas (si ya lo tienes, no lo cambia) */
  overflow-x: auto;            /* permite scroll horizontal cuando haga falta */
  -webkit-overflow-scrolling: touch; /* scroll suave en iOS */
  scroll-behavior: smooth;     /* desplazamiento suave al hacer wheel/JS */
  scroll-snap-type: x mandatory; /* snap opcional para buena UX (se alinea cada card) */
  padding-bottom: 8px;         /* evita que la barra de scroll choque con contenido */
}

/* Evita que las tarjetas se encojan y permite que ocupen su ancho natural */
.featured-list .pet-card {
  flex: 0 0 auto;              /* no crecer, no encoger, ancho automático */
  scroll-snap-align: start;    /* alineación cuando se "snappea" */
}

/* Opcional: ocultar la barra de scroll visual en Webkit (si no quieres verla) */
/* Descomenta si prefieres ocultarla */
/*
.featured-list::-webkit-scrollbar { height: 8px; }
.featured-list::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); border-radius: 999px; }
*/


/* Segunda sección */
.pets-inciativa {
    display: flex;
    justify-content: flex-end;
    position: relative;
    margin-top: -200px; /* similar superposición del diseño */
}

/* Recuadro verde */
.iniciativa-green-box {
    background-color: #6FB3A6;
    border-radius: 47px;
    padding: 20px 45px;
    width: 550px;
    position: relative;
    z-index: 1;
    text-align: right; /* alineación de todo hacia la derecha */
}

    .iniciativa-box {
        right: 0; /* quitar superposición */
        top: 0;
        margin-top: 10px;
        padding: 30px 25px;
        border-radius: 35px;
        width: 100%;
    }

/* Título derecha */
.iniciativaright-title {
    color: #ffffff;
    font-size: 36px;
    font-weight: 900;
    display: block !important; /* Para evitar el display:flex global */
    margin-bottom: 20px;
    text-align: right;
}

/* Texto a la derecha */
.iniciativaright-text {
    font-size: 20px;
    font-weight: 500;
    color: #ffffff;
    line-height: 1.4;
    text-align: right;
}

.iniciativaright-text strong {
    font-weight: 700;
    color: #2c2c2c;
}

    .iniciativa-title {
        font-size: 30px;
        text-align: right;
        display: block !important;
    }

    .iniciativa-text {
        font-size: 18px;
        text-align: right;
    }

.subheader-wrapper {
    position: relative;
    width: 100%;
}

.subheader-img {
    width: 100%;
    display: block;
}

/* RECUADRO VERDE SOBRE LA IMAGEN SOLO EN PC */
.iniciativa-overlay {
    position: absolute;
    top: 380px;       /* ← SUBE O BAJA EL CUADRO */
    width: 550px;       /* tu tamaño deseado */
    z-index: 10;
}

/* ========== Responsive Móvil de la misma sección del final del body inicio ========== */
@media (max-width: 991px) {
    .iniciativa-overlay {
        display: none;
    }

    .pets-iniciativa {
        justify-content: center;
        margin-top: 20px;
        padding-right: 0;
    }

    .iniciativa-green-box {
        width: 100%;
        padding: 30px 25px;
        border-radius: 35px;
        text-align: center;
    }

    .iniciativaright-title {
        text-align: center;
    }

    .iniciativaright-text {
        font-size: 18px;
        text-align: center;
    }
}

.pets-itv-intro-line {
    display: flex;
    align-items: center;
    gap: 40px;              /* separación entre imagen y texto */
    margin: 60px auto;
    max-width: 1200px;
    justify-content: space-around;
}

.pets-itv-intro-img {
    width: 498px;
    height: 202px;
    object-fit: contain;
}

.pets-itv-intro-text {
    font-size: 20px;
    font-weight: 500;
    color: #305663;
    text-align: right;
    max-width: 450px;       /* evita que el texto se vaya demasiado ancho */
    line-height: 1.3;
}

/* RESPONSIVE */
@media (max-width: 991px) {
    .pets-itv-intro-line {
        flex-direction: column;
        text-align: center;
        gap: 25px;
    }
  .pets-itv-info-line {
    flex-direction: column-reverse;
}

    .pets-itv-intro-img {
        width: 100%;
        height: auto;
    }

    .pets-itv-intro-text {
        text-align: center;
        max-width: 100%;
        padding: 0 20px;
    }
}

/* Imagen + 3 líneas centradas + botón */
.pets-itv-mid {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
    margin-top: 40px;
}

.pets-itv-mid-img {
    width: 500px;
    max-width: 100%;
}

.pets-itv-mid-text .line-1,
.pets-itv-mid-text .line-3 {
    font-size: 23px;
    font-weight: 500;
    color: #305663;
    margin: 0;
}

.pets-itv-mid-text .line-2 {
    font-size: 29px;
    font-weight: 700;
    color: #305663;
    margin: 0;
}

.pets-itv-button {
    display: inline-block;
    padding: 4px 22px;
    background: #FE9105;
    color: #fff;
    font-size: 24px;
    font-weight: 700;
    border-radius: 30px;
    text-decoration: none;
}

/* Línea doble: texto izquierda + imagen derecha */
.pets-itv-info-line {
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 40px;
    margin-top: 60px;
    flex-wrap: wrap;
}

.info-itv-text {
    max-width: 480px;
    text-align: left;
    color: #305663;
    font-size: 20px;
    line-height: 1.3;
}

.info-itv-img {
    width: 498px;
    max-width: 100%;
}

/* CONTENEDOR QUE AGRUPA LAS 3 TARJETAS */
.pets-block-wrapper {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
    margin-top: 100px;
}

.pets-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* TARJETAS */
.pets-block-card {
    width: 318px;
    height: 405px;
    background: #B6D4CA; /* normal */
    border-radius: 58px;
    position: relative;
    padding: 90px 25px 25px 25px;
    box-sizing: border-box;
}

.pets-block-circle {
    width: 94px;
    height: 94px;
    background: #6FB3A6; /* normal */
    border-radius: 50%;
    position: absolute;
    top: -47px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.pets-block-icon {
    width: 55%;
    height: auto;
}

.pets-block-text {
    font-size: 20px;
    color: #305663;
    line-height: 1.3;
}

.pets-block-title {
    margin-top: 25px;
    font-size: 46px;
    font-weight: 900;
    color: #6FB3A6;
    letter-spacing: -1px;
    line-height: 0.95;
}

/* 🎨 COLORES ESPECIALES PARA LA TARJETA CENTRAL */
.pets-block-mid .pets-block-card {
    background: #FEDCB3;
}

.pets-block-mid .pets-block-circle {
    background: #FE9105;
}

.pets-block-mid .pets-block-title {
    color: #FE9105;
}

/* 📱 RESPONSIVE */
@media (max-width: 900px) {
    .pets-block-wrapper {
        justify-content: center;
    }
}

@media (max-width: 650px) {
    .pets-block-wrapper {
        flex-direction: column;
        align-items: center;
    }
}

/* CONTENEDOR GENERAL */
.media-section {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin-top: 50px;
}

/* IMAGEN SUPERIOR IZQUIERDA */
.media-header-img {
    width: 394px;
    height: 101px;
    object-fit: contain;
}

/* CONTENEDOR DE TARJETAS */
.media-cards {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
}

/* CADA TARJETA */
.media-card {
    width: 384px;
    height: 376px;
    position: relative;
    border-radius: 30px;
    overflow: hidden;
    display: block;
    text-decoration: none;
}

/* IMAGEN INTERNA */
.media-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* DEGRADADO SUPERIOR TRANSPARENTE → INFERIOR VERDE */
.media-card-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 0%,
        #B6D4CA 100%
    );
}

/* TEXTO INFERIOR IZQUIERDO */
.media-card-text {
    position: absolute;
    bottom: 25px;
    left: 25px;
    text-align: left;
    z-index: 2;
}

.media-card-text span {
    font-size: 29px;
    color: white;
    line-height: 1.05;
}

/* PRIMERA LÍNEA → 900 BLACK */
.media-text-bold {
    font-weight: 900;
}

/* SEGUNDA LÍNEA → 500 LIGHT */
.media-text-light {
    font-weight: 500;
}

/* RESPONSIVE */
@media (max-width: 1200px) {
    .media-cards {
        justify-content: center;
    }
}

@media (max-width: 700px) {
    .media-cards {
        flex-direction: column;
        align-items: center;
    }
}

/* ================================
   TÍTULOS PRINCIPALES
================================ */

/* Contenedor general */
.av-section {
  text-align: center;
  font-family: Montserrat, sans-serif;
  margin-top: 60px;
}

/* PUBLICIDAD BTL */
.av-main-title {
  font-weight: 900;
  line-height: 0.9;
}

.av-main-title span:first-child {
  font-size: 56px;
  color: #6fb3a6;
}

.av-main-title span:last-child {
  font-size: 99px;
  color: #fe9105;
}

/* Subtítulo */
.av-subtitle {
  margin-top: 20px;
  font-weight: 700;
  font-size: 29px;
  color: #305663;
  margin-bottom: 40px;
}

/* ================================
   RECUADRO GRANDE
================================ */
.large-card {
  width: 100%;
  max-width: 1103px;
  aspect-ratio: 1103/609;
  background: #d9d9d9;
  border-radius: 30px;
  margin: 0 auto;
}

.large-card-texts {
  width: 100%;
  max-width: 1103px;
  margin: 20px auto 50px auto;
  padding: 0 16px;
  box-sizing: border-box;
  text-align: left;
}

.large-card-title {
  font-weight: 700;
  font-size: 29px;
  color: #305663;
  margin: 15px 0 10px 0;
}

.large-card-paragraph {
  font-weight: 500;
  font-size: 20px;
  color: #305663;
  line-height: 1.5;
  margin: 0;
}

/* ================================
   RECUADROS PEQUEÑOS (2 columnas)
================================ */

.av-items {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.av-item {
  width: 100%;
  max-width: 544px;
  text-align: left;
  padding: 0 12px;
  box-sizing: border-box;
}

.av-item-box {
  width: 100%;
  aspect-ratio: 544/524;
  background: #d9d9d9;
  border-radius: 30px;
}

.av-item-text {
  font-weight: 500;
  font-size: 20px;
  color: #305663;
  margin-top: 15px;
  line-height: 1.5;
}

/* ================================
   RESPONSIVE
================================ */

/* Tablets */
@media (max-width: 900px) {
  .av-main-title span:first-child {
    font-size: 46px;
  }
  .av-main-title span:last-child {
    font-size: 75px;
  }
  .large-card-title {
    font-size: 26px;
  }
  .large-card-paragraph {
    font-size: 18px;
  }
  .ti-product-actions {

    margin-left: 0px !important;
}

}

/* Móviles */
@media (max-width: 600px) {
  .av-main-title span:first-child {
    font-size: 38px;
  }
  .av-main-title span:last-child {
    font-size: 58px;
  }
  .av-subtitle {
    font-size: 22px;
  }
  .large-card-title {
    font-size: 22px;
  }
  .large-card-paragraph {
    font-size: 17px;
  }
  .av-item-text {
    font-size: 17px;
  }
}

/* ======================================
   TITULO
====================================== */
.sp-title {
    font-weight: 700;
    font-size: 32px;
    color: #305663;
    text-align: left;
    margin: 0 0 40px 0;
    padding-left: 10px;
}

/* ======================================
   LAYOUT PRINCIPAL
====================================== */
.sp-section {
    display: flex;
    align-items: flex-start;
    gap: 40px;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 10px;
    box-sizing: border-box;
}

/* Columna izquierda */
.sp-left {
    flex: 0 0 auto;
}

.sp-main-img {
    width: 408px;
    height: auto;
    display: block;
}

/* Columna derecha */
.sp-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 25px;
    max-width: 650px;
}

/* Textos */
.sp-text {
    font-size: 20px;
    font-weight: 500;
    color: #305663;
    line-height: 1.5;
    margin: 0;
    text-align: left;
}

/* Palabras resaltadas */
.sp-highlight {
    color: #fe9105;
    font-weight: 700;
}

/* Fila con imagen + texto */
.sp-row {
    display: flex;
    gap: 25px;
    align-items: flex-start;
}

.sp-sub-img {
    width: 213px;
    height: auto;
    flex-shrink: 0;
}

/* ======================================
   RESPONSIVE
====================================== */
@media (max-width: 900px) {
    .sp-section {
        flex-direction: column;
        align-items: center;
    }

    .sp-main-img {
        width: 80%;
        max-width: 350px;
    }

    .sp-row {
        flex-direction: column;
    }

    .sp-sub-img {
        width: 80%;
        max-width: 200px;
        margin: 0 auto;
    }
    .titulo-destacados {
        margin-left: 0px;
    }
    .ti-title-1 {
    line-height: 1 !important;
  }
  .detalle-card {

  max-width: none;
  }
}

@media (max-width: 600px) {
    .sp-title {
        font-size: 26px;
    }

    .sp-text {
        font-size: 18px;
    }
}

/* Contenedor que mantiene la imagen y el botón juntos */
.na-image-container {
    position: relative;
    display: inline-block;
    width: 100%;
    max-width: 100%;
}

/* BOTÓN REGÍSTRATE */
.na-register-btn {
    position: absolute;
    bottom: 40px; /* distancia del borde inferior de la imagen */
    left: 50%;
    transform: translateX(-50%);

    background-color: #6FB3A6;
    color: white;
    font-weight: 900;
    font-size: 30px;

    padding: 8px 30px;
    border-radius: 70px;
    text-decoration: none;
    font-family: Montserrat, sans-serif;

    transition: transform 0.2s ease;
}

/* Hover (opc) */
.na-register-btn:hover {
    transform: translateX(-50%) scale(1.05);
}

/* RESPONSIVE – en móvil el botón baja debajo de la imagen */
@media (max-width: 768px) {
    .na-register-btn {
        position: static;       /* lo saca de la posición absoluta */
        transform: none;
        display: block;
        margin: 20px auto 0 auto;

        font-size: 20px;
        padding: 12px 30px;
        width: max-content;
    }

    .na-image-container {
        text-align: center;
    }
}

/* Contenedor general */
.na-body {
    width: 100%;
    text-align: center;
    font-family: Montserrat, sans-serif;
    padding: 60px 20px;
}

/* ---------- TEXTOS SUPERIORES ---------- */

.na-title-1 {
    color: #FE9105;
    font-size: 64px;
    font-weight: 900;
    margin: 0;
          display: block !important;
  line-height: 0.9;
}

.na-title-2 {
    color: #6FB3A6;
    font-size: 54px;
    font-weight: 900;
    margin: 0;
          display: block !important;
}

.na-title-3 {
    color: #305663;
    font-size: 32px;
    font-weight: 700;
    margin: 20px 0 5px;
}

.na-title-4 {
    color: #305663;
    font-size: 20px;
    font-weight: 500;
    margin: 0 0 40px;
}

/* ---------- IMAGEN CENTRAL ---------- */

.na-image-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 30px 0 50px;
}

.na-main-image {
    width: 100%;
    max-width: 1039px;
    border-radius: 20px;
}

/* ---------- TEXTOS INFERIORES ---------- */

.na-subtitle-1 {
    color: #6FB3A6;
    font-size: 36px;
    font-weight: 900;
    margin: 0;
          display: block !important;
  line-height: 0.9;
}

.na-subtitle-2 {
    color: #FE9105;
    font-size: 64px;
    font-weight: 900;
    margin: 0;
          display: block !important;
  line-height: 1.0;
}

.na-subtitle-3 {
    color: #6FB3A6;
    font-size: 36px;
    font-weight: 900;
    margin: 0;
          display: block !important;

}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 768px) {

    .na-title-1 {
        font-size: 40px;
    }

    .na-title-2 {
        font-size: 34px;
    }

    .na-title-3 {
        font-size: 22px;
    }

    .na-title-4 {
        font-size: 16px;
    }

    .na-main-image {
        width: 100%;
        max-width: 100%;
    }

    .na-subtitle-1,
    .na-subtitle-3 {
        font-size: 26px;
    }

    .na-subtitle-2 {
        font-size: 40px;
    }
}

@media (max-width: 480px) {

    .na-title-1 {
        font-size: 32px;
    }

    .na-title-2 {
        font-size: 28px;
    }

    .na-title-3 {
        font-size: 18px;
    }

    .na-title-4 {
        font-size: 14px;
    }

    .na-subtitle-1,
    .na-subtitle-3 {
        font-size: 22px;
    }

    .na-subtitle-2 {
        font-size: 32px;
    }
}

/* Contenedor principal de la tarjeta */
.na-animal-card {
    display: flex;
    align-items: center;
    gap: 35px;
    padding: 20px 10px;
    flex-wrap: nowrap;
}

/* --- IMAGEN DEL ANIMAL --- */
.na-animal-img-wrapper {
    min-width: 202px;
    width: 202px;
    height: 211px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.na-animal-img {
    width: 202px;
    height: 211px;
    object-fit: cover;
    border-radius: 50%;
}

/* --- CONTENEDOR DE TEXTOS --- */
.na-animal-info {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 600px;
}

/* Nombre + raza */
.na-animal-titles {
    line-height: 1.1;
    margin-bottom: 5px;
}

.na-animal-name {
    color: #305663;
    font-size: 24px;
    font-weight: 700;
    margin: 0;
}

.na-animal-breed {
    color: #305663;
    font-size: 16px;
    font-weight: 700;
    margin: -2px 0 0;
}

/* Descripción */
.na-animal-desc {
    color: #305663;
    font-size: 14px;
    font-weight: 400;
    margin: 0;
    max-width: 480px;
}

/* --- TAGS / RECUADROS --- */
.na-animal-tags {
    display: flex;
    gap: 15px;
    margin-top: 10px;
}

.na-tag {
    width: 79px;
    height: 46px;
    border-radius: 12px;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    line-height: 1.1;
}

.na-tag-orange { background-color: #FE9105; }
.na-tag-green  { background-color: #6FB3A6; }

.na-tag-title {
    font-size: 14px;
    font-weight: 500;
    margin: 0;
}

.na-tag-subtitle {
    font-size: 11px;
    font-weight: 300;
    margin: -2px 0 0;
}

/* --- RESPONSIVE --- */
@media (max-width: 768px) {
    .na-animal-card {
        flex-direction: column;
        text-align: center;
    }

    .na-animal-info {
        align-items: center;
        text-align: center;
        max-width: 100%;
    }

    .na-animal-desc {
        max-width: 90%;
    }

    .na-animal-tags {
        justify-content: center;
    }
}

/* GRID PRINCIPAL: 2 POR FILA EN DESKTOP */
.na-animal-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 60px; /* vertical / horizontal */
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 10px;
}

/* RESPONSIVE – MÓVIL: 1 POR FILA */
@media (max-width: 768px) {

    .na-animal-grid {
        grid-template-columns: 1fr;
        gap: 35px;
        padding: 10px;
    }

    .na-animal-card {
        flex-direction: column;
        text-align: center;
    }

    .na-animal-info {
        align-items: center;
        text-align: center;
    }

    .na-animal-tags {
        justify-content: center;
    }
}

/* ====== CONTENEDOR GENERAL ====== */
.ti-header {
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
    padding: 40px 20px;
}

/* ====== LÍNEA 1 ====== */
.ti-title-1 {
    color: #6FB3A6;
    font-size: 36px;
    font-weight: 900;
    margin: 0;
    line-height: 0;
}

/* ====== LÍNEA 2 ====== */
.ti-title-2 {
    color: #FE9105;
    font-size: 74px;
    font-weight: 900;
    margin-top: 10px;
    margin-bottom: 40px;
    line-height: 1.05;
}

/* ====== LÍNEA 3 ====== */
.ti-subtitle-1 {
    color: #305663;
    font-size: 32px;
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
}

/* ====== LÍNEA 4 ====== */
.ti-subtitle-2 {
    color: #305663;
    font-size: 20px;
    font-weight: 500;
    margin-top: 10px;
    line-height: 1.4;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* ====== RESPONSIVE ====== */
@media (max-width: 768px) {
    .ti-title-1 {
        font-size: 28px;
    }

    .ti-title-2 {
        font-size: 48px;
    }

    .ti-subtitle-1 {
        font-size: 26px;
    }

    .ti-subtitle-2 {
        font-size: 18px;
        padding: 0 10px;
    }
}

@media (max-width: 480px) {
    .ti-title-1 {
        font-size: 22px;
    }

    .ti-title-2 {
        font-size: 36px;
    }

    .ti-subtitle-1 {
        font-size: 20px;
    }

    .ti-subtitle-2 {
        font-size: 16px;
    }
}

/* ===== CONTENEDOR GENERAL ===== */
.ti-product-actions {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 25px;
    margin-left: 25px;
}

/* ===== CAJA DE CANTIDAD + TOTAL ===== */
.ti-qty-total {
    display: flex;
    align-items: center;
    background: #6FB3A6;
    padding: 10px 18px;
    border-radius: 12px;
    gap: 15px;
    color: white;
    font-weight: 700;
    font-size: 18px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

/* ===== SELECTOR DE CANTIDAD ===== */
.ti-qty-box {
    display: flex;
    align-items: center;
    background: #ffffff00;
    border-radius: 10px;
    overflow: hidden;
}

.ti-qty-box input {
    width: 50px;
    text-align: center;
    border: none;
    font-size: 18px;
    font-weight: 600;
}

.ti-btn-qty {
    background: #FE9105;
    border: none;
    color: white;
    width: 34px;
    font-size: 18px;
    padding: 5px 0;
    cursor: pointer;
}

.ti-btn-down {
    border-right: 2px solid white;
}

.ti-btn-up {
    border-left: 2px solid white;
}

/* ===== PRECIO TOTAL ===== */
.ti-total-price {
    font-size: 18px;
    color: white;
    font-weight: 700;
}

/* ===== BOTÓN DEL CARRITO ===== */
.ti-btn-cart {
    background: #FE9105;
    border: none;
    padding: 20px 20px;
    border-radius: 14px;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.ti-btn-cart img {
    width: 32px;
    filter: brightness(0) invert(1);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 600px) {
    .ti-product-actions {
        flex-direction: column;
        gap: 15px;
    }

    .ti-qty-total {
        width: 100%;
        justify-content: space-between;
    }

    .ti-btn-cart {
        width: 100%;
    }
}


a:hover {
  color: #945606 !important;
}

/* CONTENEDOR GENERAL */
.sumate-container {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 40px 20px;
    text-align: center;
}

/* ---------- 1. FILA DE IMÁGENES (DESKTOP) ---------- */

.sumate-images {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 25px;
    margin-bottom: 40px;
}

/* Tamaños exactos */
.sumate-img-1 { width: 132px; height: 136px; }
.sumate-img-2 { width: 498px; height: 132px; }
.sumate-img-3 { width: 160px; height: 140px; }

/* ---------- 2. TEXTO PRINCIPAL ---------- */

.sumate-text {
    color: #305663;
    font-size: 23px;
    font-weight: 500;
    line-height: 1.3;
    max-width: 400px;
    margin: 0 auto;
}


/* ----------  📱 RESPONSIVE: MÓVIL  ---------- */

@media (max-width: 768px) {

    .sumate-images {
        flex-wrap: wrap;
        gap: 15px;
    }

    /* Las imágenes laterales van arriba */
    .sumate-img-1,
    .sumate-img-3 {
        order: 1;
        width: 40%;
        height: auto;
    }

    /* La imagen central baja */
    .sumate-img-2 {
        order: 2;
        width: 80%;
        height: auto;
    }

    /* Texto */
    .sumate-text {
        font-size: 18px;
        padding: 0 10px;
    }
}

/* CONTENEDOR GENERAL DE ESTA SECCIÓN */
.sumate-progreso {
    text-align: center;
    margin-top: 150px;
    margin-bottom: 40px;
}

/* Imagen superior (webp) */
.sumate-progreso-img {
    width: 100%;
    max-width: 491px;
    height: auto;
    margin: 0 auto 20px;
}

/* Texto principal */
.sumate-progreso-text {
    font-size: 20px;
    font-weight: 500;
    color: #305663;
    max-width: 320px;
    margin: 0 auto 25px;
    line-height: 1.3;
}

/* Imagen inferior (png) */
.sumate-progreso-bar {
    width: 100%;
    max-width: 222px;
    height: auto;
    margin: 60px auto 40px;
}

/* Texto final */
.sumate-progreso-subtext {
    font-size: 20px;
    font-weight: 500;
    color: #305663;
    max-width: 320px;
    margin: 0 auto;
    line-height: 1.3;
}

/* ---------------- RESPONSIVE ---------------- */

@media (max-width: 768px) {

    .sumate-progreso-text,
    .sumate-progreso-subtext {
        font-size: 18px;
        max-width: 280px;
    }

    .sumate-progreso-img{
      max-width: 320px
    }
    .sumate-progreso-bar {
        max-width: 200px;
    }
}

/* CONTENEDOR GENERAL */
.sumate-form-container {
    width: 100%;
    max-width: 600px;
    margin: 40px auto;
    padding: 0 20px;
    color: #305663;
}

/* TITULOS */
.sumate-form-title {
    font-size: 32px;
    font-weight: 700;
}

.sumate-form-subtitle {
    font-size: 20px;
    font-weight: 700;
    margin-top: 25px;
}

/* LABELS */
.sumate-label {
    font-size: 16px;
    font-weight: 500;
    margin: 10px 0 5px;
    display: block;
}

.sumate-label-icon {
    margin-right: 6px;
}

/* INPUTS */
.sumate-input {
    width: 100%;
    padding: 14px;
    border-radius: 20px;
    border: none;
    background: #CCE1DA;
    margin-bottom: 15px;
    font-size: 16px;
}

/* PREGUNTAS */
.sumate-question {
    font-size: 18px;
    font-weight: 700;
    margin: 20px 0 10px;
}

/* CHECKBOX ROW */
.sumate-checkbox-row {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    gap: 10px;
    font-size: 16px;
  color: #305663;
}

.sumate-checkbox {
    width: 20px;
    height: 20px;
    accent-color: #305663; /* Modern browsers */
}

/* BOTÓN */
.sumate-submit-btn {
    width: 100%;
    padding: 15px;
    margin-top: 25px;
    font-size: 18px;
    font-weight: 700;
    color: white;
    background: #ff7c1f;
    border: none;
    border-radius: 30px;
    cursor: not-allowed;
    opacity: 0.4;
    transition: 0.3s ease;
}

.sumate-submit-btn.enabled {
    cursor: pointer;
    opacity: 1;
}

/* Textareas similares a los inputs (grandes y con border-radius como en la imagen) */
.sumate-textarea {
    width: 100%;
    min-height: 110px;
    padding: 18px;
    border-radius: 18px;
    border: none;
    background: #E3F0EC; /* tono suave similar al que usas para inputs */
    margin-top: 12px;
    margin-bottom: 16px;
    font-size: 15px;
    color: #305663;
    box-sizing: border-box;
    resize: vertical;
}

/* RESPONSIVE */
@media (max-width: 480px) {
    .sumate-form-title {
        font-size: 28px;
    }

    .sumate-submit-btn {
        font-size: 17px;
    }

      .sumate-textarea {
        min-height: 90px;
    }
}

.card-link {
    text-decoration: none;
    color: inherit;
    display: block; /* permite que toda la tarjeta sea clickeable */
}

.sumate-cr-mensaje {
    max-width: 590px;
    margin: 15px auto 30px;
    text-align: center;
    font-size: 26px;
    font-weight: 500;
    color: #305663;
    line-height: 1.3;
}

/* Responsive */
@media (max-width: 480px) {
    .sumate-cr-mensaje {
        font-size: 20px;
        padding: 0 15px;
    }
}

.card-link {
    text-decoration: none;
    color: inherit;
    display: block; /* permite que toda la tarjeta sea clickeable */
}

/* Fondo semitransparente */
#popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(111, 179, 166, 0.85);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

/* Caja del popup */
#popup-box {
    background: white;
    width: 595px;
    height: 389px;
    padding: 40px 30px;
    border-radius: 49px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Títulos */
.popup-title-container p {
    margin: 0;
    line-height: 1.0;
    font-family: inherit;
    font-weight: 900;
}

.line1 {
    font-size: 36px;
    color: #6FB3A6;
}

.line2 {
    font-size: 64px;
    color: #FE9105;
}

.line3 {
    font-size: 36px;
    color: #6FB3A6;
}

/* Párrafo */
.popup-paragraph {
    margin-top: 25px;
    max-width: 600px;
    font-size: 20px;
    font-weight: 500;
    color: #305663;
}

/* Botón principal */
.btn-voluntario {
  background-color: #FE9105;
  color: white;
  border: none;
  padding: 10px 25px;
  border-radius: 20px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.3s;
  font-size: 24px;
}

.btn-voluntario:hover {
    opacity: 0.9;
}

/* Texto "Recordármelo más tarde" */
#popup-later {
    margin-top: 10px;
    font-size: 20px;
    font-weight: 500;
    color: #305663;
    cursor: pointer;
    text-decoration: underline;
}

/* ──────────────────────────────── */
/* 📱 RESPONSIVE */
/* ──────────────────────────────── */

@media (max-width: 768px) {

    #popup-box {
        width: 90%;
        height: auto;
        padding: 25px 20px;
    }

    .line1,
    .line3 {
        font-size: 28px;
    }

    .line2 {
        font-size: 44px;
    }

    .popup-paragraph {
        font-size: 18px;
        max-width: 90%;
    }

    .btn-voluntario {
        font-size: 20px;
        padding: 12px 20px;
        width: 100%;
        max-width: 300px;
    }

    #popup-later {
        font-size: 18px;
    }
}

@media (max-width: 480px) {

    #popup-box {
        padding: 20px 15px;
    }

    .line1,
    .line3 {
        font-size: 22px;
    }

    .line2 {
        font-size: 34px;
    }

    .popup-paragraph {
        font-size: 16px;
    }

    .btn-voluntario {
        font-size: 18px;
        padding: 10px;
        max-width: 260px;
    }

    #popup-later {
        font-size: 16px;
    }
}

/* ====== CONTENEDOR GENERAL ====== */
.dv-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
    padding: 40px 20px;
}

/* ====== TITULO PRINCIPAL ====== */
.dv-title-main {
    font-weight: 700;
    font-size: 32px;
    color: #305663;
    margin-bottom: 32px;
    display: block;
}

/* ====== IMAGEN PRINCIPAL ====== */
.dv-main-image {
    width: 100%;
    max-width: 942px;
    height: auto;
    margin-bottom: 32px;
}

/* ====== DESCRIPCIÓN ====== */
.dv-desc {
    max-width: 405px;
    margin: 0 auto 50px auto;
    font-weight: 700;
    font-size: 20px;
    color: #305663;
}

/* ====== TITULOS SECUNDARIOS ====== */
.dv-discover {
    font-weight: 900;
    font-size: 36px;
    color: #6FB3A6;
    margin: 40px 0 20px 0;
}

.dv-thanks-1 {
    font-weight: 900;
    font-size: 64px;
    color: #FE9105;
    margin: 0;
    line-height: 1.0px;
}

.dv-thanks-2 {
    font-weight: 900;
    font-size: 36px;
    color: #6FB3A6;
    margin: 25px 0 50px 0;
}

/* ====== GALERÍA ====== */
.dv-gallery {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap; /* Para responsive */
}

.dv-gallery-img {
    width: 100%;
    max-width: 350px;
    height: auto;
    border-radius: 29px;
    object-fit: cover;
}

/* ====== RESPONSIVE ====== */
@media (max-width: 992px) {
    .dv-thanks-1 {
        font-size: 48px;
    }
    .dv-thanks-2 {
        font-size: 30px;
    }
}

@media (max-width: 768px) {
    .dv-title-main {
        font-size: 28px;
    }
    .dv-discover {
        font-size: 30px;
    }
    .dv-thanks-1 {
        font-size: 40px;
    }
}

@media (max-width: 480px) {
    .dv-title-main {
        font-size: 24px;
    }
    .dv-desc {
        font-size: 18px;
    }
    .dv-discover {
        font-size: 26px;
    }
    .dv-thanks-1 {
        font-size: 32px;
    }
    .dv-thanks-2 {
        font-size: 26px;
    }
}

/* Botón NARANJA */
.dv-donar-btn {
    position: absolute;
    bottom: -25px; /* hace que el botón sobresalga */
    left: 50%;
    transform: translateX(-50%);

    background: #FE9105;
    padding: 14px 32px;
    color: white;
    font-size: 20px;
    font-weight: 700;
    border-radius: 100px;

    text-decoration: none;
    box-shadow: 0 6px 14px rgba(0,0,0,0.2);
    white-space: nowrap;
}

/* Hover */
.dv-donar-btn:hover {
    background: #ff9f26;
}

/* ==========================
   RESPONSIVE
   ========================== */

@media (max-width: 480px) {

    .dv-donar-btn {
        font-size: 18px;
        bottom: -22px;
        padding: 12px 26px;
    }
}

.dv-pets-block-card {
    /* Original */
    border-radius: 58px;
    padding: 50px 25px 25px 25px; /* top ya no es 90px */

    box-sizing: border-box;

    /* Overrides necesarios */
    position: relative;
    height: 182px;
    width: 459px;
    background: #6FB3A6;
    padding-top: 50px; /* agrega el padding top real */
}

.dv-pets-block-circle {
    width: 94px;
    height: 94px;
    background: #6FB3A6;
    border-radius: 50%;
    position: absolute;
    top: -47px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.dv-pets-block-text {
    /* Overrides primero */
    font-size: 32px;
    font-weight: bold;
    color: white;

    /* Propiedades originales que no cambian */
    line-height: 1.3;
}

@media (max-width: 600px) {

    .dv-pets-block-card {
        width: 90%;
        height: auto;
        padding-top: 60px;
        padding-bottom: 40px;
    }

    .dv-pets-block-text {
        font-size: 24px;
    }

    .dv-pets-block-circle {
        width: 80px;
        height: 80px;
        top: -40px;
    }
}

/* =========================== */
/*  VIDEO PRINCIPAL (GRANDE)   */
/* =========================== */

.cau-video-principal {
    width: 100%;
    max-width: 1103px;
    aspect-ratio: 1103 / 609;
    background-color: #d9d9d9;
    background-size: cover;
    background-position: center;
    border-radius: 20px;
    margin: 0 auto 50px auto;
    position: relative;
}

/* Icono PLAY grande */
.cau-play-big {
    width: 173px;
    height: 173px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
}


/* =========================== */
/*   CAPÍTULO CONTENEDORES     */
/* =========================== */

.cau-capitulo-container {
    display: flex;
    align-items: center;
    margin: 0 auto 40px auto;
    max-width: 1100px;
    font-family: Montserrat, sans-serif;
    gap: 20px;
  justify-content: center;
}


/* =========================== */
/*    VIDEO THUMBNAILS (PEQ)   */
/* =========================== */

.cau-video-thumbnail {
    flex: 0 0 544px;
    height: 338px;
    background-color: #d9d9d9;
    background-size: cover;
    background-position: center;
    border-radius: 30px;
    position: relative;
    cursor: pointer;
}

/* Icono PLAY pequeño */
.cau-play-small {
    width: 86px;
    height: 86px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
}


/* =========================== */
/*     TEXTO DEL CAPÍTULO      */
/* =========================== */

.cau-capitulo-texto {
    flex: 1;
    padding-left: 20px;
    text-align: left;
    color: #305663;
}


/* =========================== */
/*          RESPONSIVE         */
/* =========================== */

@media (max-width: 900px) {
    .cau-capitulo-container {
        flex-direction: column;
        text-align: center;
    }

    .cau-video-thumbnail {
        width: 100%;
        flex: unset;
        height: auto;
        aspect-ratio: 544 / 338;
    }

    .cau-capitulo-texto {
        padding-left: 0;
    }
}

@media (max-width: 600px) {
    .cau-play-big {
        width: 120px;
        height: 120px;
    }

    .cau-play-small {
        width: 65px;
        height: 65px;
    }
}

/* CONTENEDOR GENERAL */
.atl-container {
    text-align: center;
    font-family: Montserrat, sans-serif;
    margin-top: 60px;
}

/* TÍTULOS */
.atl-title-main {
    font-weight: 900;
    line-height: 0.9;
}

.atl-publicidad {
    font-size: 56px;
    color: #6fb3a6;
}

.atl-atl {
    font-size: 99px;
    color: #fe9105;
}

.atl-subtitle {
    margin-top: 20px;
    font-weight: bold;
    font-size: 29px;
    color: #305663;
    margin-bottom: 30px;
}

/* GRID DE ITEMS */
.atl-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: center;
}

/* ITEM */
.atl-item {
    width: 511px;
    text-align: left;
}

/* IMAGEN – MANTIENE ASPECT RATIO EXACTO */
.atl-img {
    width: 100%;
    aspect-ratio: 511 / 338;
    background-color: #d9d9d9;
    background-position: center;
    background-size: cover;
    border-radius: 30px;
}

/* TEXTOS */
.atl-item-title {
    font-weight: bold;
    color: #305663;
    margin: 10px 0 5px 0;
}

.atl-item-desc {
    font-size: 0.9em;
    color: #305663;
    margin: 0;
}

/* RESPONSIVE */
@media (max-width: 600px) {
    .atl-publicidad {
        font-size: 38px;
    }

    .atl-atl {
        font-size: 70px;
    }

    .atl-subtitle {
        font-size: 22px;
    }

    .atl-item {
        width: 100%;
        max-width: 420px;
    }
}

/* CADA TARJETA */
.apa-media-card {
    width: 411px;
    height: 726px;
    position: absolute;
    border-radius: 30px;
    overflow: hidden;
    display: block;
    text-decoration: none;
    transition: transform 0.3s ease, z-index 0.3s ease;
}

/* IMAGEN INTERNA */
.apa-media-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* DEGRADADO SUPERIOR TRANSPARENTE → INFERIOR VERDE */
.apa-media-card-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        #6fb3a600 60%,
        #6FB3A6 75%
    );
}

/* CONTENIDO SOBRE IMAGEN */
.apa-media-card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 24px;
    width: 100%;
    color: white;
    font-family: Montserrat, sans-serif;
}

/* Nombre */
.apa-name {
    font-size: 32px;
    font-weight: 800;
    margin: 0;
}

.apa-age {
    font-size: 18px;
    font-weight: 400;
    margin-left: 8px;
}

/* Energía */
.apa-energy {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    margin: 6px 0;
}

.apa-stars img {
    width: 18px;
    height: 18px;
}

/* Personalidad */
.apa-personality {
    font-size: 16px;
    margin: 6px 0;
}

/* Descripción */
.apa-description {
    font-size: 14px;
    line-height: 1.3;
    margin: 10px 0 18px;
    max-width: 330px;
}

/* BOTONES */
.apa-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
}

.apa-btn {
    width: 57px;
    height: 57px;
    border-radius: 50%;
    background: #FE9105;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Botón X */
.apa-btn-close {
    color: white;
    font-size: 36px;
    font-weight: 800;
    line-height: 1;
}

/* Botón corazón */
.apa-btn-like img {
    width: 28px;
    height: 28px;
}

/* ======================
   RESPONSIVE
   ====================== */

@media (max-width: 768px) {
    .apa-name {
        font-size: 26px;
    }

    .apa-description {
        font-size: 13px;
    }

    .apa-btn {
        width: 50px;
        height: 50px;
    }

    .apa-btn-close {
        font-size: 30px;
    }
}

@media (max-width: 480px) {
    .apa-media-card {
        width: 90%;
        height: auto;
    }

    .apa-media-card-content {
        padding: 20px;
    }

    .apa-name {
        font-size: 22px;
    }

    .apa-description {
        font-size: 12px;
    }
}

.apa-cards-wrapper {
    position: relative;
    width: 100%;
    max-width: 1000px;
    height: 760px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 30px;
}

.apa-card-center {
    z-index: 3;
    transform: translate(0, 0);
}
.apa-card-left {
    z-index: 1;
    transform: translate(-180px, -25px) scale(0.96);
}
.apa-card-right {
    z-index: 1;
    transform: translate(180px, -25px) scale(0.96);
}

@media (max-width: 768px) {
    .apa-card-left,
    .apa-card-right {
        display: none;
    }

    .apa-card-center {
        position: relative;
        transform: none;
    }

    .apa-cards-wrapper {
        height: auto;
    }
}

/* SECCIÓN GENERAL */
.apa-info-section {
    max-width: 1200px;
    margin: 120px auto;
    padding: 0 20px;
    display: flex;
    gap: 80px;
    align-items: flex-start;
    font-family: Montserrat, sans-serif;
}

/* ======================
   COLUMNA IZQUIERDA
   ====================== */

.apa-info-left {
    flex: 1;
    text-align: left;
}

/* SUBTITULAR */
.apa-subtitle {
    line-height: 1;
    margin-bottom: 24px;
}

.apa-subtitle-small {
    font-size: 36px;
    font-weight: 900;
    color: #6FB3A6;
}

.apa-subtitle-big {
    font-size: 64px;
    font-weight: 900;
    color: #FE9105;
}

/* TEXTO */
.apa-info-text {
    font-size: 20px;
    font-weight: 500;
    color: #305663;
    line-height: 1.4;
    margin-bottom: 32px;
}

/* BOTÓN */
.apa-info-btn {
    display: inline-block;
    background: #FE9105;
    color: white;
    font-size: 24px;
    font-weight: 700;
    padding: 14px 28px;
    border-radius: 30px;
    text-decoration: none;
}

/* ======================
   COLUMNA DERECHA
   ====================== */

.apa-info-right {
    flex: 1;
    text-align: left;
}

/* TÍTULO */
.apa-info-title {
    font-size: 32px;
    font-weight: 700;
    color: #305663;
    margin-bottom: 28px;
}

/* ITEM BARRA */
.apa-bar-item {
    margin-bottom: 20px;
}

.apa-bar-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    font-weight: 400;
    color: #305663;
    margin-bottom: 6px;
}

/* BARRA */
.apa-bar {
    width: 100%;
    height: 31px;
    background: #CCE1DA;
    border-radius: 10px;
    overflow: hidden;
}

.apa-bar-fill {
    height: 100%;
    background: #FE9105;
    border-radius: 10px;
}

/* TEXTO FINAL */
.apa-info-foot {
    margin-top: 24px;
    font-size: 20px;
    font-weight: 500;
    color: #305663;
}

/* ======================
   RESPONSIVE
   ====================== */

@media (max-width: 900px) {
    .apa-info-section {
        flex-direction: column;
        gap: 60px;
    }

    .apa-subtitle-big {
        font-size: 52px;
    }
}

@media (max-width: 480px) {
    .apa-subtitle-small {
        font-size: 28px;
    }

    .apa-subtitle-big {
        font-size: 42px;
    }

    .apa-info-text,
    .apa-info-foot {
        font-size: 18px;
    }

    .apa-info-btn {
        font-size: 20px;
    }
}

.dop-form-wrapper {
    max-width: 480px;
    margin: 0 auto;
    padding: 40px 20px;
    font-family: Montserrat, sans-serif;
    color: #305663;
}

.dop-title {
    font-size: 32px;
    font-weight: 700;
    margin: 32px 0 16px;
}

.dop-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dop-option,
.dop-check {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 400;
}

.dop-option input,
.dop-check input {
    width: 18px;
    height: 18px;
}

.dop-input {
    width: 100%;
    margin: 16px 0;
    padding: 14px;
    border-radius: 12px;
    border: none;
    background: #CCE1DA;
    font-size: 18px;
}

.dop-bank-info p {
    font-size: 18px;
    font-weight: 400;
    margin: 4px 0;
}

.dop-qr {
    width: 144px;
    height: 144px;
    margin: 16px 0;
}

.dop-small-title {
    font-size: 18px;
    font-weight: 700;
    margin: 16px 0 8px;
}

/* BOTÓN SUBIR */
.dop-upload-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #FE9105;
    color: white;
    font-size: 24px;
    font-weight: 700;
    border: none;
    border-radius: 30px;
    padding: 12px 24px;
    cursor: pointer;
    margin-bottom: 24px;
}

/* BOTÓN FINAL */
.dop-submit-btn {
    margin: 40px auto 0;
    display: block;
    background: #FE9105;
    color: white;
    font-size: 24px;
    font-weight: 700;
    border-radius: 30px;
    border: none;
    padding: 14px 32px;
    cursor: pointer;
    transition: opacity 0.3s;
}

/* ESTADO DESACTIVADO (SIMULADO) */
.dop-disabled {
    opacity: 0.4;
    pointer-events: none;
}

/* RESPONSIVE */
@media (max-width: 480px) {
    .dop-title {
        font-size: 26px;
    }

    .dop-upload-btn,
    .dop-submit-btn {
        font-size: 20px;
    }
}