/* Tipografías actualizadas */
/* M PLUS Rounded 1c para títulos (bold, redondeada) */
/* Montserrat para textos secundarios */
/* Cargadas desde Google Fonts */

:root {
  --marron: #5C3A2E;
  --terracota: #E07A5F;
  --arena: #EED9C4;
  --crema: #FBF5EF;
  --negro: #000;
  --rosa-suave: #F4C2C2;
  --coral: #E07A5F;
  --rosa-claro: #F8D7DA;
}

* {
  box-sizing: border-box;
}

html:focus-within {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--crema);
  color: #8B6F5C;
  font-family: 'Montserrat', Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  padding-top: 60px;
  padding-bottom: 50px;
}



h1, h2, h3, h4, h5, h6, .section-title {
  font-family: 'M PLUS Rounded 1c', 'Nunito', system-ui, sans-serif;
  font-weight: 800;
  color: var(--coral);
}

a {
  color: var(--terracota);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.btn-primary {
  --bs-btn-bg: var(--terracota);
  --bs-btn-border-color: var(--terracota);
  --bs-btn-hover-bg: #b87554;
  border-radius: 2rem;
  padding: 0.75rem 2rem;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(198, 132, 96, 0.2);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(198, 132, 96, 0.3);
}

.btn-outline-primary {
  --bs-btn-color: var(--terracota);
  --bs-btn-border-color: var(--terracota);
  --bs-btn-hover-bg: var(--terracota);
  --bs-btn-hover-border-color: var(--terracota);
  border-radius: 2rem;
  padding: 0.75rem 2rem;
  transition: all 0.3s ease;
}

.btn-outline-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(198, 132, 96, 0.2);
}

.navbar-brand img {
  height: 60px;
}

.navbar {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.fixed-top {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
}

.section {
  padding: 5rem 0;
}

@media (max-width: 768px) {
  .section {
    padding: 2rem 0;
  }
  
  main#inicio {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }
}

.card {
  border-radius: 2rem;
  border: none;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  padding: 1.5rem;
}

iframe {
  border-radius: 2rem;
}

/* Ocultar título del canal de YouTube */
iframe[src*="youtube.com"] {
  pointer-events: none;
}

iframe[src*="youtube.com"]::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background: transparent;
  z-index: 10;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
}

#preloader {
  position: fixed;
  inset: 0;
  background: #fff;
  display: grid;
  place-items: center;
  z-index: 9999;
  transition: opacity 1s;
}

#preloader.hide {
  opacity: 0;
  pointer-events: none;
}

.logo-wave {
  animation: pk-wave 1.8s ease-in-out infinite;
}

@keyframes pk-wave {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(6px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .logo-wave {
    animation: none;
  }
}

/* Utilidades */
.section-title {
  font-weight: 800;
  margin-bottom: 2rem;
  color: var(--coral);
  position: relative;
}

.section-title::after {
 
  position: absolute;
  bottom: -0.5rem;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, var(--coral), var(--rosa-claro));
  border-radius: 2px;
}

.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.show {
  opacity: 1;
  transform: none;
}

/* Fondo completo rotativo */
.ornaments {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
}

.ornament {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity 1s ease;
}

.ornament.active {
  opacity: 0.3;
}

@media (prefers-reduced-motion: reduce) {
  .ornament { transition: none; }
}

@media (max-width: 768px) {
  .ornament {
    width: 100vw;
    height: 100vh;
    min-height: 100vh;
  }
  .ornament.active { opacity: 0.3; }
}

/* Ornamentos de retiros */
.retiro-ornaments {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.retiro-ornament {
  position: absolute;
  opacity: 0.3;
  max-width: 40px;
  filter: hue-rotate(15deg) saturate(1.2) brightness(1.1);
}

@media (max-width: 991px) {
  .retiro-ornament {
    max-width: 25px !important;
    opacity: 0.2 !important;
    filter: hue-rotate(15deg) saturate(1.2) brightness(1.1);
  }
}

.retiro-ornament-1 { top: 5%; left: 2%; transform: rotate(-15deg); }
.retiro-ornament-2 { top: 8%; left: 15%; transform: rotate(25deg); }
.retiro-ornament-3 { top: 12%; left: 30%; transform: rotate(45deg); }
.retiro-ornament-4 { top: 15%; right: 25%; transform: rotate(-30deg); }
.retiro-ornament-5 { top: 18%; right: 10%; transform: rotate(60deg); }
.retiro-ornament-6 { top: 22%; right: 2%; transform: rotate(-45deg); }
.retiro-ornament-7 { top: 35%; left: 1%; transform: rotate(20deg); }
.retiro-ornament-8 { top: 40%; left: 8%; transform: rotate(-35deg); }
.retiro-ornament-9 { top: 45%; left: 20%; transform: rotate(50deg); }
.retiro-ornament-10 { top: 50%; right: 20%; transform: rotate(-20deg); }
.retiro-ornament-11 { top: 55%; right: 5%; transform: rotate(35deg); }
.retiro-ornament-12 { top: 65%; left: 5%; transform: rotate(-50deg); }
.retiro-ornament-13 { top: 70%; left: 18%; transform: rotate(15deg); }
.retiro-ornament-14 { top: 75%; left: 35%; transform: rotate(-25deg); }
.retiro-ornament-15 { bottom: 20%; right: 30%; transform: rotate(40deg); }
.retiro-ornament-16 { bottom: 15%; right: 15%; transform: rotate(-40deg); }
.retiro-ornament-17 { bottom: 10%; right: 2%; transform: rotate(30deg); }
.retiro-ornament-18 { bottom: 25%; left: 25%; transform: rotate(-15deg); }
.retiro-ornament-19 { bottom: 30%; left: 10%; transform: rotate(25deg); }
.retiro-ornament-20 { bottom: 35%; left: 2%; transform: rotate(-35deg); }

/* Carrusel de retiros */
.retiro-card {
  border: none;
  box-shadow: 0 8px 25px rgba(0,0,0,0.08);
  border-radius: 2rem;
  transition: all 0.3s ease;
}

.retiro-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(0,0,0,0.12);
}

.retiro-bg {
  height: 200px;
  background-image: url('../img/retiro/LOGO DE REGRESO A TI SIN FONDOS_Mesa de trabajo 1 copia 26.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: var(--rosa-claro);
}

/* Split Screen Modal */
.split-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  background: white;
  overflow: hidden;
}

body:has(.split-modal) {
  overflow: hidden;
}

.split-container {
  display: flex;
  width: 100%;
  height: 100%;
  gap: 0;
}

.split-left, .split-right {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.split-left {
  background: linear-gradient(135deg, var(--coral), #F4A261);
  color: white;
  clip-path: polygon(0 0, 100% 0, 50% 100%, 0 100%);
  margin-right: -1px;
}

.split-right {
  background: linear-gradient(135deg, var(--rosa-claro), var(--rosa-suave));
  color: var(--marron);
  clip-path: polygon(50% 0, 100% 0, 100% 100%, 0 100%);
  margin-left: -1px;
}

.split-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10001;
  background: white;
  border-radius: 50%;
  padding: 1.5rem;
  box-shadow: 0 8px 25px rgba(0,0,0,0.2);
}

.center-logo {
  width: 200px;
  height: 100px;
  display: block;
}

.split-left:hover, .split-right:hover {
  flex: 1.1;
  transform: scale(1.02);
}

.split-content {
  text-align: center;
  padding: 2rem;
}

.split-content h2 {
  font-size: 3rem;
  font-weight: 800;
  margin-bottom: 1rem;
  font-family: 'M PLUS Rounded 1c', sans-serif;
  color: #000;
}

.split-content p {
  font-size: 1.2rem;
  margin-bottom: 2rem;
  opacity: 0.9;
}

.split-icon {
  opacity: 0.7;
  font-size: 48px;
}

@media (max-width: 768px) {
  .split-container {
    flex-direction: column;
  }
  
  .split-left {
    clip-path: polygon(0 0, 100% 0, 100% 85%, 0 70%);
  }
  
  .split-right {
    clip-path: polygon(0 15%, 100% 30%, 100% 100%, 0 100%);
  }
  
  .split-content h2 {
    font-size: 2rem;
  }
  
  .split-content p {
    font-size: 1rem;
  }
  
  .center-logo {
    width: 200;
    height: 100px;
  }
}


/* WhatsApp Floating Button */
.whatsapp-float {
  position: fixed;
  bottom: 60px;
  right: 20px;
  z-index: 1001;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #25D366;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4);
  transition: all 0.3s ease;
}

.whatsapp-float:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.6);
  text-decoration: none;
}

.whatsapp-float svg {
  width: 32px;
  height: 32px;
}

@media (max-width: 768px) {
  .whatsapp-float {
    width: 56px;
    height: 56px;
    bottom: 93px;
    right: 6px;
  }
  
  .whatsapp-float svg {
    width: 28px;
    height: 28px;
  }
}

/* Footer Fixed */
footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1000;
  padding: 0.5rem 0 !important;
}

footer img {
  height: 45px !important;
}

footer small {
  font-size: 0.75rem;
}

@media (max-width: 768px) {
  #sobre-mi .btn-outline-primary {
    display: block;
    text-align: center;
    margin: 0 auto;
  }
}