/* =====================================================================
   Pirate Sailor — style.css (Optimizado, 2 secciones: Asesoría y Formación)
   Fecha: 2025‑11‑01
   ===================================================================== */

/* ---------- RESET & GLOBALES ---------- */
*,*::before,*::after{box-sizing:border-box;}
html,body{margin:0;padding:0;width:100%;overflow-x:hidden;scroll-behavior:smooth;scroll-padding-top:80px;}
:root{
  --ps-bg:#031a2e;
  --ps-ink:#0e2b47;
  --ps-sea:#0f5e73;
  --ps-accent:#2dc6d6;
  --ps-white:#ffffff;
  --ps-muted:#eef5f8;
  --radius:16px;
  --radius-lg:22px;
  --shadow:0 8px 30px rgba(3,26,46,.2);
  --shadow-soft:0 6px 20px rgba(3,26,46,.12);
}

.pirate-font{font-family:'Pirata One',cursive;}

/* ---------- NAVBAR ---------- */
.nav-btn{font-family:'Pirata One',cursive;color:#fff;font-size:1.125rem;transition:color .2s ease;}
.nav-btn:hover{color:#93c5fd;}
@media(min-width:768px){#nav-links{display:flex!important;}}
.logo-img{height:40px;width:40px;border-radius:9999px;transition:transform .6s ease-out;}
.logo-animate{animation:helm-drift 10s ease-in-out infinite alternate;}
.group:hover .logo-animate{animation:helm-spin 1.8s cubic-bezier(.6,.2,.2,1) forwards;}
@keyframes helm-drift{0%{transform:rotate(-4deg);}50%{transform:rotate(4deg);}100%{transform:rotate(-4deg);}}
@keyframes helm-spin{from{transform:rotate(0);}to{transform:rotate(360deg);}}

/* ---------- SECCIONES / CARDS ---------- */
.service-card{padding:2rem;background:#fff;border-radius:1.5rem;box-shadow:0 4px 12px rgba(0,0,0,.15);transition:.3s;max-width:100%;border:1px solid #e5e7eb;}
.service-card:hover{transform:translateY(-6px);box-shadow:0 6px 18px rgba(0,0,0,.18);}
.icon-animate{transform-origin:center;transition:transform .3s ease-out,color .25s ease-out;}
.service-card:hover .icon-animate{color:#2563eb;animation:pirate-sway .9s ease-in-out infinite alternate;}
@keyframes pirate-sway{0%{transform:rotate(-8deg) translateY(0);}50%{transform:rotate(0) translateY(-4px);}100%{transform:rotate(8deg) translateY(0);}}

/* Contacto */
.contact-form{background:#fff;padding:2.5rem;border-radius:1.5rem;box-shadow:0 8px 24px rgba(0,0,0,.08);max-width:100%;border:1px solid #e5e7eb;}
.contact-form input,.contact-form textarea{outline-offset:2px;}

/* Toast */
#toast{display:none;position:fixed;bottom:30px;left:50%;transform:translateX(-50%);background:#15803d;color:#fff;padding:.75rem 1.5rem;border-radius:9999px;box-shadow:0 6px 16px rgba(0,0,0,.25);z-index:80;}

/* Footer */
.footer{background:#08204d;background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.04) 0 10px,transparent 10px 20px);color:#fff;padding:2rem 1.25rem;display:flex;flex-direction:column;align-items:center;gap:1rem;}
@media(min-width:768px){.footer{flex-direction:row;justify-content:space-between;}}
.footer-inner{display:grid;grid-template-columns:1fr;row-gap:2rem;max-width:100%;}
@media(min-width:768px){.footer-inner{grid-template-columns:repeat(3,1fr);align-items:center;}}
.logo-footer{height:48px;width:48px;padding:4px;border:2px solid #bfdbfe;border-radius:9999px;background:#fff;transition:transform .3s ease;}
.logo-footer:hover{transform:rotate(8deg) scale(1.08);}
.footer-link{display:inline-flex;align-items:center;gap:.35rem;color:#bfdbfe;position:relative;font-weight:500;transition:color .2s;}
.footer-icon{width:16px;height:16px;transition:transform .25s;}
.footer-link::after{content:'';position:absolute;left:0;bottom:-2px;width:0;height:1px;background:#bfdbfe;transition:width .25s;}
.footer-link:hover{color:#fff;}
.footer-link:hover::after{width:100%;}
.footer-link:hover .footer-icon{transform:translateX(2px);}
/* Centrar completamente los enlaces del footer */
.footer nav ul {
  justify-content: center !important;
  align-items: center;
  gap: 1.5rem;
  text-align: center;
}

.footer nav li {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}


/* Modal */
.modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:100;justify-content:center;align-items:center;padding:10px;}
.modal-content{animation:fade .25s ease-out;background:#fff;border-radius:1.5rem;padding:2rem;max-width:32rem;width:90%;box-shadow:0 12px 30px rgba(0,0,0,.25);}
@keyframes fade{from{opacity:0;transform:scale(.96);}to{opacity:1;transform:scale(1);}}

/* Modal fichas*/
.modal-content {
  animation: fadeIn .3s ease-out;
}
@keyframes fadeIn {
  from {opacity: 0; transform: scale(0.95);}
  to   {opacity: 1; transform: scale(1);}
}

/* ===== Scroll dentro de los modales ===== */
.modal {
  /* el overlay ya ocupa toda la pantalla; no tocamos aquí */
}

.modal-content{
  /* Limita la altura y permite scroll interno */
  max-height: 85vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch; /* suaviza en iOS */
  /* (opcional) padding-right visual para que no tape la barra */
  padding-right: 0.25rem;
}

#detail-title{
  position: sticky; /* que el título y la X sigan visibles */
  top: 0;
  background: #fff;
  padding-top: .25rem;
  padding-bottom: .5rem;
  z-index: 1;
  /* ligera sombra para separar del texto en scroll */
  box-shadow: 0 2px 0 rgba(0,0,0,.03);
}

#closeDetail{
  position: sticky; /* que la X no “desaparezca” al hacer scroll */
  top: .5rem;
}

/* Oculta la barra de desplazamiento, pero mantiene el scroll */
.modal-content {
  scrollbar-width: none;           /* Firefox */
  -ms-overflow-style: none;        /* IE/Edge */
}

.modal-content::-webkit-scrollbar { /* Chrome, Safari, Opera */
  display: none;
}

/* Oculta el aspa de cierre del modal de detalle */
#closeDetail {
  display: none !important;
}


/* centrar el titulo */
#detail-title {
  text-align: center;
  margin-top: 0.5rem;
}



/* Fade‑in */
.fade-in-section{opacity:0;transform:translateY(20px);transition:opacity .6s ease-out,transform .6s ease-out;}
.fade-in-section.visible{opacity:1;transform:translateY(0);}

/* Botón flotante WhatsApp */
.whatsapp-float{position:fixed;top:50%;right:24px;transform:translateY(-50%);z-index:60;display:flex;align-items:center;padding:0 1.25rem;height:48px;background:#25D366;color:#fff;border-radius:9999px;box-shadow:0 4px 14px rgba(0,0,0,.25);font-size:1rem;transition:transform .2s ease,box-shadow .2s ease;max-width:calc(100% - 48px);}
.whatsapp-float:hover{transform:translateY(calc(-50% - 4px));box-shadow:0 8px 22px rgba(0,0,0,.3);}
@media(max-width:768px){.whatsapp-float{top:auto;bottom:80px;right:16px;transform:none;}.whatsapp-float:hover{transform:translateY(-4px);}}

/* Ocultar Botón flotante WhatsApp */
.whatsapp-float {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none;
}


/* Responsive tweaks */
@media (min-width:560px) and (max-width:639px){
  body{overflow-x:hidden;}
  .contact-form{padding:1.75rem;}
  .footer-inner{grid-template-columns:repeat(2,1fr);}
  .whatsapp-float{right:20px;bottom:88px;top:auto;transform:none;}
}
@media (min-width:640px) and (max-width:1023px){
  .logo-img{width:48px;height:48px;}
  .contact-form{padding:2rem;}
  .whatsapp-float{right:32px;}
}
@media (min-width:640px) and (orientation:portrait){
  #servicios .grid{grid-template-columns:1fr!important;}
  .nosotros-wrapper{flex-direction:column!important;text-align:center;}
  .nosotros-img{width:60%;max-width:320px;margin-inline:auto;}
  .whatsapp-float{right:20px;bottom:96px;top:auto;transform:none;}
  .footer-inner{grid-template-columns:repeat(2,1fr);}
}
@media (min-width:1024px){
  .contact-form{max-width:40rem;}
  .footer-inner{grid-template-columns:repeat(3,1fr);}
}

/* Utilidad: asegurar botones visibles dentro de service-card */
.service-card button{display:inline-block!important;}

/* =============================================================
   Hero — frase de Cristóbal Colón (estilo destacado)
   ============================================================= */
#inicio p.italic {
  font-size: 1.25rem;
  line-height: 1.6;
  color: #f1f5f9;
  text-shadow: 0 2px 4px rgba(0,0,0,.4);
}

#inicio p.text-blue-200 {
  font-style: normal;
  letter-spacing: 0.5px;
  opacity: 0.9;
}

/* ═════════ BOTONES WHATSAPP UNIFICADOS ═════════ */
.btn-whatsapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: #25D366;
  color: #fff;
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  border-radius: 9999px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.btn-whatsapp:hover {
  background: #1ebe5d;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}
.btn-whatsapp i {
  width: 20px;
  height: 20px;
}

/* ═════════ GUIAS BLOG ═════════ */
#detail-body ul, #detail-body ol { margin-bottom: 1rem; }
#detail-body li { line-height: 1.6; }
#detail-body a.btn-whatsapp { margin-top: 1rem; }