/* ------------------------------------------------
   BELLEZA INFINITA  •  style.css
   Diseño Modern + Tipografía Adaptativa + Paleta Analógica
--------------------------------------------------*/

/* ========== 1. RESET / BASE ========== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:100%}
body{
    font-family:'Work Sans',sans-serif;
    line-height:1.6;
    color:var(--clr-text);
    background:var(--clr-light);
    overflow-x:hidden;
}

/* ========== 2. THEME VARIABLES ========== */
:root{
    /* Analogue palette: coral → naranja → dorado */
    --clr-primary:#FF6B81;      /* coral vivo */
    --clr-primary-dark:#E3586C;
    --clr-accent:#FFA36C;       /* naranja suave */
    --clr-accent-dark:#E88E57;
    --clr-highlight:#FFD56B;    /* dorado pastel */
    --clr-background:#FFF8F2;   /* beige tenue */
    --clr-light:#F8F8F8;
    --clr-dark:#222222;
    --clr-text:#333333;
    --clr-white:#FFFFFF;
    --shadow-md:0 6px 20px rgba(0,0,0,0.1);
    --transition:all .3s ease;
    --radius:8px;
}

/* Adaptive typography with clamp() */
h1{font-family:'Poppins',sans-serif;font-weight:700;font-size:clamp(2.2rem,5vw,3.5rem);line-height:1.15;margin-bottom:.5em}
h2{font-family:'Poppins',sans-serif;font-weight:600;font-size:clamp(1.8rem,4vw,2.5rem);margin-bottom:.6em}
h3,h4{font-family:'Poppins',sans-serif;font-weight:600;font-size:clamp(1.3rem,2.8vw,1.7rem);margin-bottom:.4em}
p,li{font-size:clamp(1rem,2.5vw,1.1rem);margin-bottom:1em}
a{text-decoration:none;color:var(--clr-primary-dark);transition:var(--transition)}
a:hover{color:var(--clr-accent-dark);text-decoration:underline}

/* Utility */
.container{width:90%;max-width:1200px;margin:0 auto}
.section-title{text-align:center;color:var(--clr-dark);text-shadow:1px 1px 3px rgba(0,0,0,.1);margin-bottom:2rem}
.section-text{text-align:justify;margin:0 auto 2rem auto;max-width:760px}
.btn,
button,
input[type='submit']{
    display:inline-block;
    background:var(--clr-primary);
    color:var(--clr-white);
    border:none;
    padding:.75rem 2rem;
    border-radius:var(--radius);
    font-family:'Poppins',sans-serif;
    font-weight:600;
    cursor:pointer;
    transition:var(--transition);
}
.btn-secondary{background:var(--clr-accent);color:var(--clr-dark)}
.btn:hover,
button:hover,
input[type='submit']:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);background:var(--clr-primary-dark)}
.btn-secondary:hover{background:var(--clr-accent-dark)}
.read-more{color:var(--clr-primary);font-weight:600;text-decoration:underline}

/* Staggered reveal (ScrollReveal expected) */
.reveal{opacity:0;transform:translateY(40px);transition:var(--transition)}
.reveal.visible{opacity:1;transform:none}

/* Parallax backgrounds */
.parallax{background-attachment:fixed;background-size:cover;background-repeat:no-repeat;background-position:center}

/* Glassmorphism modal */
.modal{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;visibility:hidden;opacity:0;transition:var(--transition);background:rgba(0,0,0,.6);z-index:10000}
.modal[aria-hidden="false"]{visibility:visible;opacity:1}
.modal-content{
    background:rgba(255,255,255,0.25);
    backdrop-filter:blur(15px);
    border:1px solid rgba(255,255,255,.18);
    padding:2rem;
    border-radius:var(--radius);
    width:90%;
    max-width:500px;
    color:var(--clr-dark);
    box-shadow:var(--shadow-md);
}
.modal-close{background:none;border:none;font-size:2rem;color:var(--clr-white);position:absolute;top:1rem;right:1rem;cursor:pointer}

/* ========== 3. HEADER ========== */
.header{position:fixed;top:0;left:0;width:100%;background:rgba(255,255,255,.9);backdrop-filter:saturate(180%) blur(10px);box-shadow:0 2px 8px rgba(0,0,0,.05);z-index:9000}
.header .container{display:flex;align-items:center;justify-content:space-between;padding:.8rem 0}
.logo{font-family:'Poppins',sans-serif;font-size:1.5rem;font-weight:700;color:var(--clr-primary-dark)}
.nav ul{display:flex;gap:1.2rem;list-style:none}
.nav a{color:var(--clr-dark);font-weight:500;position:relative}
.nav a::after{content:'';position:absolute;left:0;bottom:-2px;width:0;height:2px;background:var(--clr-primary);transition:width .3s}
.nav a:hover::after{width:100%}
.burger{display:none;background:none;border:none;font-size:1.8rem;color:var(--clr-dark);cursor:pointer}

/* ========== 4. HERO ========== */
.hero{background-size:cover;background-repeat:no-repeat;background-position:center;position:relative;color:var(--clr-white);padding:120px 0;text-align:center}
.hero-content{display:flex;flex-direction:column;align-items:center;gap:1.5rem}
.hero .btn{font-size:1.1rem}

/* ========== 5. GENERIC SECTIONS ========== */
section{padding:4rem 0}
.service-block{margin-bottom:4rem}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:2rem; }
.card{
    background:var(--clr-white);
    border-radius:var(--radius);
    box-shadow:var(--shadow-md);
    overflow:hidden;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    margin: 0 auto;
    transition:var(--transition);
}
.card:hover{transform:translateY(-6px);box-shadow:0 12px 25px rgba(0,0,0,.15)}
.card-image{width:100%;height:260px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.card-image img{width:100%;height:100%;object-fit:cover;margin:0 auto}
.card-content{padding:1.5rem}

/* TimeLine */
.timeline{position:relative;margin:2rem 0;padding-left:2rem;border-left:3px solid var(--clr-primary)}
.timeline-item{margin-bottom:1.5rem}
.timeline-date{font-weight:600;color:var(--clr-primary);}
.timeline-desc{margin-top:.5rem}

/* Progress */
progress{
    width:100%;
    height:18px;
    appearance:none;
    -webkit-appearance:none;
    border:none;
    border-radius:var(--radius);
    background:var(--clr-light);
    overflow:hidden;
}
progress::-webkit-progress-bar{background:var(--clr-light)}
progress::-webkit-progress-value{background:var(--clr-primary)}
progress::-moz-progress-bar{background:var(--clr-primary)}
.progress-wrap{margin:2rem 0}

/* Gallery Grid */
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem}
.gallery-caption{font-style:italic}

/* Testimonials */
.testimonials .card-image{width:120px;height:120px;border-radius:50%;overflow:hidden;margin-top:1.5rem}
.testimonials .card{padding-top:1rem}

/* Careers */
.careers .card{min-height:240px;justify-content:space-between}

/* Awards Background */
.awards{color:var(--clr-white);background-size:cover;background-repeat:no-repeat;background-position:center;}

/* Events */
.events .timeline{border-color:var(--clr-accent)}

/* External Links */
.external-links li{margin-bottom:.8rem;line-height:1.4}

/* Contact */
.contact{background-size:cover;background-repeat:no-repeat;background-position:center;color:var(--clr-white);position:relative}
.contact::before{content:'';position:absolute;inset:0;background:rgba(0,0,0,.5);z-index:0}
.contact .container{position:relative;z-index:1}
.contact-form{display:grid;grid-template-columns:1fr;gap:1.2rem;margin-top:2rem}
.form-group{display:flex;flex-direction:column}
label{margin-bottom:.3rem;font-weight:600}
input,select,textarea{
    padding:.7rem 1rem;
    border:1px solid #ddd;
    border-radius:var(--radius);
    font-size:1rem;
}
textarea{resize:vertical}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--clr-accent)}
/* Success state messages */
.success-msg{color:var(--clr-accent-dark);font-weight:600;margin-top:1rem}

/* ========== 6. FOOTER ========== */
.footer{background:var(--clr-dark);color:var(--clr-white);padding:3rem 0;font-size:.95rem}
.footer-columns{display:flex;flex-wrap:wrap;gap:2rem;justify-content:space-between}
.footer-col{flex:1 1 220px}
.footer a{color:var(--clr-highlight)}
.footer a:hover{text-decoration:underline}
.footer p{margin-bottom:.6rem}
/* Social links styled textually */
.footer-col p:last-child{margin-bottom:0}

/* ========== 7. GLOBAL HELPER CLASSES ========== */
.is-two-thirds{flex:0 0 66.666%}
.text-center{text-align:center}
.mt-2{margin-top:2rem}
.hidden{display:none}

/* ========== 8. RESPONSIVE NAV ========== */
@media(max-width:900px){
    .nav{position:fixed;top:70px;right:-100%;width:240px;height:calc(100vh - 70px);background:var(--clr-white);flex-direction:column;align-items:flex-start;padding:2rem;gap:1.3rem;transition:var(--transition)}
    .nav.open{right:0}

}


.about-section img {
  height: 400px ;
  object-fit: cover;
}

/* ========== 9. PAGE-SPECIFIC ========== */
/* Privacy & Terms top padding to avoid header overlap */
.legal-page{padding-top:100px}
/* Success.html centered */
.page-success{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
}
.page-success h1{color:var(--clr-primary);margin-bottom:1rem}

/* ========== 10. HOVER / FOCUS EFFECTS ========== */
.card-content h4{margin-bottom:.3rem}
.card-content h4::after{
    content:'';
    display:block;
    width:40px;
    height:3px;
    background:var(--clr-accent);
    margin:6px auto 10px auto;
}
input[type='text']:hover,
input[type='email']:hover,
textarea:hover{border-color:var(--clr-primary)}
.read-more:hover{color:var(--clr-accent-dark)}

/* ========== 11. ICON TEXT LINKS (SOCIAL) ========== */
.social-icon{font-weight:700;position:relative;padding-left:1.6rem}
.social-icon::before{
    content:'●';
    position:absolute;
    left:0;top:0;
    color:var(--clr-primary);
    font-size:1rem;line-height:1rem;
}

/* ========== 12. ANIMATIONS (Motion One / Scroll) ========== */
/* Buttons micro interaction */
@keyframes pulse{
    0%{transform:scale(1)}
    50%{transform:scale(1.05)}
    100%{transform:scale(1)}
}
.btn:hover{animation:pulse .6s ease-in-out}
/* Cards fade-up */
.card, .timeline-item, .gallery-grid .card, .testimonial{
    opacity:0;transform:translateY(40px);transition:var(--transition);
}
.card.visible,
.timeline-item.visible,
.gallery-grid .card.visible,
.testimonial.visible{opacity:1;transform:none}

header .container {
  display: flex;
  align-items: center;
  gap: 20px;
}

      :root {
        --color-primary: #ff6b81;
        --color-secondary: #333;
        --font-family-primary: "Poppins", sans-serif;
        --font-family-secondary: "Work Sans", sans-serif;
        --spacing-small: 8px;
        --spacing-medium: 16px;
        --spacing-large: 24px;
        --max-content-width: 1200px;
      }

      /* Reset básico */
      *,
      *::before,
      *::after {
        box-sizing: border-box;
      }

      body {
        margin: 0;
        font-family: var(--font-family-primary);
        line-height: 1.6;
        background-color: #fff;
        color: var(--color-secondary);
      }

      a {
        color: inherit;
        text-decoration: none;
      }

      /* Contenedor centrado */
      .container {
        max-width: var(--max-content-width);
        margin: 0 auto;
        padding: var(--spacing-medium);
      }

      /* Encabezado */
      header {
        width: 100%;
        background-color: #fff;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      }

      .header .container {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .logo {
        font-family: "Poppins", sans-serif;
        font-weight: 700;
        font-size: 1.5rem;
        line-height: 1.2;
        color: #000;
      }

      nav {
        flex: 1;
        margin-left: 2rem;
      }

      nav ul {
        display: flex;
        flex-wrap: wrap;
        gap: var(--spacing-small);
        list-style: none;
        justify-content: flex-end;
        padding: 0;
        margin: 0;
      }

      nav li {
        margin: 0;
      }

      nav a {
        padding: var(--spacing-small) var(--spacing-medium);
        transition: background-color 0.3s;
      }

      nav a:hover {
        background-color: rgba(0, 0, 0, 0.05);
        border-radius: 4px;
      }

      .burger {
        background: none;
        border: none;
        font-size: 1.5rem;
        cursor: pointer;
        display: none;
      }

      /* Hero */
      .hero {
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: var(--spacing-large) 1rem;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        position: relative;
      }
      /* .hero::after {
            content: "";
            position: absolute;
            top:0; left:0; right:0; bottom:0;
            background: rgba(0,0,0,0.5);
        } */
      .hero .container {
        position: relative;
        max-width: 800px;
        z-index: 1;
      }
      .hero-title {
        font-family: "Poppins", sans-serif;
        font-weight: 700;
        font-size: 2rem;
        margin-bottom: 1rem;
        color: #fff;
        text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.8);
      }
      .hero-subtitle {
        font-size: 1.2rem;
        margin-bottom: 2rem;
        color: #fff;
        text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.8);
      }
      .btn-primary {
        display: inline-block;
        background-color: var(--color-primary);
        color: #fff;
        padding: 0.75rem 1.5rem;
        border: none;
        border-radius: 4px;
        font-weight: 600;
        cursor: pointer;
        transition: background-color 0.3s;
      }
      .btn-primary:hover {
        background-color: #e85f76;
      }

      /* Secciones */
      section {
        padding: var(--spacing-large) 1rem;
      }

      .section-title {
        font-family: "Poppins", sans-serif;
        font-weight: 700;
        font-size: 2rem;
        margin-bottom: 1rem;
        text-align: center;
      }

      /* Contenido general */
      .section-text {
        max-width: 800px;
        margin: 0 auto 1rem auto;
        font-size: 1rem;
        line-height: 1.5;
      }

      /* Servicios */
      .service-block {
        margin-bottom: 2rem;
      }

      /* Cards */
      .cards {
        display: flex;
        flex-wrap: wrap;
        gap: var(--spacing-medium);
        justify-content: center;
      }

      .card {
        background: #fff;
        border-radius: 8px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
        flex: 1 1 300px;
        display: flex;
        flex-direction: column;
        max-width: 400px;
        overflow: hidden;
        height: 100%;
        transition: transform 0.3s, box-shadow 0.3s;
      }
      .card:hover {
        transform: translateY(-4px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
      }
      .card-image {
        width: 100%;
        overflow: hidden;
      }
      .image-container {
        width: 100%;
        height: 260px;
        overflow: hidden;
      }
      .image-container img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .card-content {
        padding: var(--spacing-medium);
        display: flex;
        flex-direction: column;
        flex: 1;
      }
      .service-title {
        font-family: "Poppins", sans-serif;
        font-weight: 600;
        font-size: 1.2rem;
        margin-bottom: 0.5rem;
      }
      .service-text {
        font-size: 0.95rem;
        margin-bottom: 1rem;
      }
      /* Gallery grid */
      .gallery-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: var(--spacing-medium);
      }

      /* Presentación de sección de galería */
      .gallery-caption {
        font-size: 0.9rem;
        text-align: center;
        padding: 0 0.5rem;
      }

      /* Modales */
      .modal {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 9998;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s;
      }
      .modal.show {
        opacity: 1;
        pointer-events: auto;
      }
      .modal-content {
        background: #fff;
        padding: var(--spacing-large);
        position: relative;
        max-width: 600px;
        width: 90%;
        border-radius: 8px;
      }
      .modal-close {
        position: absolute;
        top: 8px;
        right: 12px;
        background: none;
        border: none;
        font-size: 1.5rem;
        cursor: pointer;
      }

      /* Footer */
      footer {
        width: 100%;
        background-color: #fff;
        padding: var(--spacing-large) 1rem;
        box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
      }
      .footer-columns {
        display: flex;
        flex-wrap: wrap;
        gap: var(--spacing-large);
      }
      .footer-col {
        flex: 1 1 200px;
      }
      .footer .is-two-thirds {
        flex: 2 2 50%;
      }
      .external-links {
        list-style: disc inside;
        padding-left: 1rem;
      }

      /* Responsive */
      @media (max-width: 768px) {
        nav {
          display: none;
          position: absolute;
          top: 100%;
          right: 1rem;
          background: #fff;
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
          padding: var(--spacing-medium);
          z-index: 9996;
        }

        .footer-columns {
          flex-direction: column;
        }
      }

      /* Botón para modal adicional */
      .btn-secondary {
        background-color: var(--color-primary);
        color: #fff;
        padding: 0.5rem 1rem;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        transition: background-color 0.3s;
      }
      .btn-secondary:hover {
        background-color: #e85f76;
      }