*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:'Montserrat',Arial,sans-serif;color:#263238;background:#fff}.wrap{max-width:1180px;margin:auto;padding:0 28px}.narrow{max-width:900px}.section{padding:95px 0}.topbar{height:72px;padding:0 5%;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);box-shadow:0 1px 8px #00000012}.brand{font-size:19px;letter-spacing:3px;font-weight:600;color:#153f4a;text-decoration:none}.topbar nav{display:flex;gap:28px}.topbar nav a{font-size:11px;text-transform:uppercase;letter-spacing:1.4px;text-decoration:none;color:#344b51;transition:.2s}.topbar nav a:hover{color:#168aa1}.menu-btn{display:none;border:0;background:none;font-size:24px;color:#153f4a}.hero{height:88vh;min-height:600px;position:relative;display:grid;place-items:center;overflow:hidden}.hero-bg{position:absolute;inset:0;background:url('https://images.unsplash.com/photo-1572331165267-854da2b10ccc?auto=format&fit=crop&w=2000&q=88') center/cover no-repeat;transform:scale(1.02)}.hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,34,42,.62),rgba(8,62,72,.28))}.hero-content{position:relative;text-align:center;color:#fff;padding:30px}.hero-kicker{font-size:10px;letter-spacing:4px;margin-bottom:26px}.main-logo{font-weight:300;font-size:clamp(48px,9vw,112px);letter-spacing:4px;line-height:1}.main-logo span{font-weight:600}.logo-sub{margin-top:22px;font-size:clamp(12px,1.7vw,21px);letter-spacing:7px}.hero-text{font-size:14px;font-weight:300;margin:30px auto;max-width:620px;line-height:1.8}.btn{display:inline-block;padding:15px 25px;border:1px solid #fff;color:#fff;text-decoration:none;font-size:10px;font-weight:600;letter-spacing:2px;transition:.25s}.btn:hover{background:#fff;color:#164a55}.scroll{position:absolute;bottom:25px;color:#fff;text-decoration:none;font-size:24px}.eyebrow{font-size:10px;font-weight:600;letter-spacing:3px;color:#168aa1}.intro{text-align:center}.intro h1,.process h2,.section-heading h2{font-size:clamp(30px,4vw,50px);font-weight:300;margin:17px 0;color:#213d44}.line{height:1px;width:70px;background:#2ca0b5;margin:30px auto}.intro p:last-child,.section-heading>p:last-child{font-size:14px;line-height:2;color:#64777c}.detail{display:grid;grid-template-columns:42% 58%;min-height:620px}.detail-text{background:#123f4a;color:white;padding:80px 12%;display:flex;align-items:center}.detail-text h2,.feature-copy h2{font-weight:300;font-size:43px;line-height:1.2;margin:15px 0 25px}.detail-text p,.feature-copy p{font-size:13px;line-height:1.9;color:#d7e5e8}.detail-text strong{display:block;margin-top:28px;font-size:13px;letter-spacing:1px}.light{color:#9fd0da}.text-link{display:inline-block;margin-top:35px;color:#fff;font-size:10px;letter-spacing:2px;text-decoration:none;border-bottom:1px solid #5f9daa;padding-bottom:7px}.detail-image{background:#dce8ea;overflow:hidden}.detail-image img{width:100%;height:100%;min-height:620px;object-fit:cover;display:block}.stats{background:#eef6f7}.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);text-align:center}.stats-grid div{padding:25px;border-right:1px solid #cadde1}.stats-grid div:last-child{border:0}.stats b{font-size:50px;font-weight:300;color:#174e5a;display:block}.stats span{font-size:10px;text-transform:uppercase;letter-spacing:2px;color:#68858b}.section-heading{text-align:center;max-width:760px;margin:0 auto 55px}.services-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}.services-grid article{padding:38px 28px;border:1px solid #dbe6e8;min-height:290px;transition:.25s}.services-grid article:hover{transform:translateY(-5px);box-shadow:0 12px 30px #173d4515}.service-number{font-size:11px;letter-spacing:2px;color:#2494a9}.services h3{font-size:18px;font-weight:500;color:#24464e;margin:25px 0 18px}.services p,.values p{font-size:12px;line-height:1.9;color:#74868a}.values{background:#fafcfc}.values-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:65px;text-align:center}.icon{font-size:38px;color:#168aa1}.values h3{font-weight:500;font-size:18px;margin:20px}.feature{display:grid;grid-template-columns:58% 42%;min-height:590px}.feature-image{background:url('https://images.unsplash.com/photo-1560089000-7433a4ebbd64?auto=format&fit=crop&w=1500&q=85') center/cover}.feature-copy{background:#1a5966;color:#fff;padding:80px 12%;display:flex;flex-direction:column;justify-content:center}.btn-light{align-self:flex-start;margin-top:18px}.process{text-align:center}.process-grid{margin-top:55px;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.process-card{height:380px;position:relative;display:flex;flex-direction:column;justify-content:flex-end;text-align:left;padding:30px;color:white;overflow:hidden;background-position:center;background-size:cover}.process-card:before{content:"";position:absolute;inset:0;background:linear-gradient(transparent 25%,rgba(4,36,43,.82))}.process-card>*{position:relative}.process-card span{font-size:10px;letter-spacing:2px}.process-card h3{font-size:24px;font-weight:400;margin:8px 0}.process-card p{font-size:11px;margin:0;color:#d8e7ea}.p1{background-image:url('https://images.unsplash.com/photo-1503387762-592deb58ef4e?auto=format&fit=crop&w=700&q=80')}.p2{background-image:url('https://images.unsplash.com/photo-1600607687920-4e2a09cf159d?auto=format&fit=crop&w=700&q=80')}.p3{background-image:url('https://images.unsplash.com/photo-1504307651254-35680f356dfd?auto=format&fit=crop&w=700&q=80')}.p4{background-image:url('https://images.unsplash.com/photo-1576013551627-0cc20b96c2a7?auto=format&fit=crop&w=700&q=80')}.cta{background:#0f4652;color:#fff;text-align:center;padding:90px 0}.cta h2{font-size:clamp(30px,4vw,48px);font-weight:300;margin:15px 0}.cta p{font-size:13px;line-height:1.9;color:#d5e6e9;margin-bottom:22px}footer{background:#092f38;color:#d4e0e2;padding:70px 0 0}.footer-grid{display:grid;grid-template-columns:1.4fr .8fr .8fr 1.1fr;gap:45px;padding-bottom:55px}.footer-logo{font-size:28px;font-weight:300;letter-spacing:3px;color:white}.footer-logo span{font-weight:600}.footer-grid h4{font-size:9px;letter-spacing:2px;color:#7fabb4;margin:0 0 18px}.footer-grid p,.social a{font-size:11px;line-height:1.8;color:#c1d1d4;text-decoration:none}.social{display:flex;flex-direction:column;gap:6px}.copyright{text-align:center;border-top:1px solid #27505a;padding:20px;font-size:9px;letter-spacing:1px;color:#6f979f}
@media(max-width:900px){.services-grid{grid-template-columns:1fr 1fr}.detail,.feature{grid-template-columns:1fr}.detail-text,.feature-copy{padding:70px 10%}.detail-image img{min-height:430px}.feature-image{min-height:430px}.process-grid{grid-template-columns:1fr 1fr}.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.menu-btn{display:block}.topbar nav{display:none;position:absolute;top:72px;left:0;right:0;background:#fff;flex-direction:column;padding:25px 6%;box-shadow:0 8px 12px #0001}.topbar nav.open{display:flex}.hero{height:75vh;min-height:540px}.logo-sub{letter-spacing:4px}.stats-grid,.values-grid{grid-template-columns:1fr}.stats-grid div{border-right:0;border-bottom:1px solid #cadde1}.stats-grid div:last-child{border-bottom:0}}
@media(max-width:520px){.section{padding:65px 0}.wrap{padding:0 20px}.brand{font-size:16px;letter-spacing:2px}.services-grid,.process-grid,.footer-grid{grid-template-columns:1fr}.process-card{height:310px}.detail-text h2,.feature-copy h2{font-size:34px}.main-logo{font-size:45px;letter-spacing:1px}.logo-sub{font-size:10px;letter-spacing:2px}.hero-text{font-size:12px}.detail-image img,.feature-image{min-height:330px}}

/* LOGO HIDROESTUDIO */

.topbar .logo {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.topbar .logo img {
    width: 65px;
    height: 65px;
    object-fit: contain;
    border-radius: 8px;
}

.topbar .logo span {
    color: white;
    font-size: 20px;
    font-weight: 700;
}

/* ADAPTACIÓN A CELULARES */

@media (max-width: 768px) {
    .topbar .logo img {
        width: 45px;
        height: 45px;
    }

    .topbar .logo span {
        font-size: 15px;
    }
}
/* LOGO EN EL PIE DE PÁGINA */

.footer-brand {
    display: flex;
    align-items: center;
    gap: 18px;
}

.footer-brand img {
    width: 90px;
    height: 90px;
    object-fit: contain;
    border-radius: 8px;
}

.footer-brand-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.footer-brand-text .footer-logo {
    margin: 0;
}

.footer-brand-text p {
    margin-top: 10px;
    font-size: 13px;
}

/* RESPONSIVE PARA CELULARES */

@media (max-width: 768px) {
    .footer-brand {
        gap: 12px;
    }

    .footer-brand img {
        width: 65px;
        height: 65px;
    }

    .footer-brand-text .footer-logo {
        font-size: 23px;
    }
}

/* BOTONES DE WHATSAPP */

.services-grid article {
    display: flex;
    flex-direction: column;
}

.btn-whatsapp {
    display: inline-block;
    margin-top: auto;
    padding: 13px 15px;
    background-color: #25D366;
    color: #ffffff;
    text-decoration: none;
    text-align: center;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.services-grid article p {
    margin-bottom: 25px;
}

.btn-whatsapp:hover {
    background-color: #128C7E;
    color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
}

@media (max-width: 768px) {
    .btn-whatsapp {
        width: 100%;
        padding: 14px 10px;
    }
}

/* DOS BOTONES EN LA SECCIÓN DE COTIZACIÓN */

.cta-botones {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 35px;
}

.cta-botones .btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-width: 220px;
    min-height: 48px;
    margin: 0;
    cursor: pointer;
    font-family: inherit;
}

/* FORMULARIO DE VISITA */

.agenda-formulario {
    max-width: 440px;
    margin: 30px auto 0;
    padding: 25px;
    background: #ffffff;
    color: #073642;
    border-radius: 12px;
    text-align: left;
    box-shadow: 0 8px 30px rgba(0,0,0,0.15);
}

.agenda-formulario[hidden] {
    display: none;
}

.agenda-formulario h3 {
    margin-bottom: 10px;
}

.agenda-formulario p {
    margin-bottom: 20px;
}

.agenda-formulario form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.agenda-formulario label {
    font-size: 14px;
    font-weight: 600;
}

.agenda-formulario input,
.agenda-formulario select {
    width: 100%;
    padding: 12px;
    border: 1px solid #cad9df;
    border-radius: 6px;
    background: white;
    color: #073642;
    font: inherit;
}

.btn-enviar-visita {
    margin-top: 15px;
    padding: 15px;
    background: #25D366;
    color: white;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
}

.btn-enviar-visita:hover {
    background: #128C7E;
}

/* ADAPTACIÓN A CELULARES */

@media (max-width: 768px) {
    .cta-botones {
        flex-direction: column;
        gap: 12px;
    }

    .cta-botones .btn {
        width: 100%;
        max-width: 320px;
    }

    .agenda-formulario {
        padding: 20px;
    }
}

/* ============================================
   HIDROESTUDIO - COTIZACIÓN Y AGENDAR VISITA
============================================ */

/* CONTENEDOR DE LOS DOS BOTONES */

.cta-botones {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 40px;
}

/* ESTILO DE LOS BOTONES */

.cta-botones .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 230px;
    min-height: 52px;
    margin: 0;
    padding: 14px 24px;

    box-sizing: border-box;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    text-align: center;
    cursor: pointer;

    transition: all 0.3s ease;
}

/* FORMULARIO DE VISITA */

.agenda-formulario {
    max-width: 460px;
    margin: 35px auto 0;
    padding: 30px;

    background: #ffffff;
    color: #073642;

    border-radius: 12px;
    text-align: left;

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

/* FORMULARIO OCULTO */

.agenda-formulario[hidden] {
    display: none !important;
}

/* TÍTULO */

.agenda-formulario h3 {
    margin-bottom: 12px;
    color: #073642;
    font-size: 24px;
}

/* DESCRIPCIÓN */

.agenda-formulario p {
    margin-bottom: 22px;
    color: #526d76;
    font-size: 14px;
}

/* CAMPOS */

.agenda-formulario form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.agenda-formulario label {
    font-size: 14px;
    font-weight: 600;
}

.agenda-formulario input,
.agenda-formulario select {
    width: 100%;
    padding: 12px;

    border: 1px solid #cad9df;
    border-radius: 6px;

    background: #ffffff;
    color: #073642;
    font-family: inherit;
    box-sizing: border-box;
}

/* BOTÓN DE WHATSAPP */

.btn-enviar-visita {
    margin-top: 15px;
    padding: 15px;

    background: #25D366;
    color: #ffffff;

    border: none;
    border-radius: 6px;

    font-family: inherit;
    font-weight: 600;
    cursor: pointer;

    transition: background 0.3s ease;
}

.btn-enviar-visita:hover {
    background: #128C7E;
}

/* AVISO DE CONFIRMACIÓN */

.agenda-formulario .agenda-aviso {
    margin-top: 18px;
    margin-bottom: 0;
    font-size: 12px;
    color: #647b82;
}

/* ============================================
   DISEÑO PARA CELULARES
============================================ */

@media (max-width: 768px) {

    .cta-botones {
        flex-direction: column;
        gap: 15px;
    }

    .cta-botones .btn {
        width: 100%;
        max-width: 320px;
    }

    .agenda-formulario {
        padding: 20px;
    }
}

/* ==========================================
   CORRECCIÓN DEL BOTÓN AGENDAR VISITA
========================================== */

.cta-botones #btnAgendar {
    background-color: #ffffff;
    color: #0f4652;
    border: 1px solid #ffffff;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* EFECTO AL PASAR EL MOUSE */

.cta-botones #btnAgendar:hover {
    background-color: #26a6bc;
    color: #ffffff;
    border-color: #26a6bc;
    transform: translateY(-3px);
}

/* EFECTO AL PRESIONAR */

.cta-botones #btnAgendar:active {
    transform: translateY(0);
}

/* ==========================================
   CONTACTO - TELÉFONO Y CORREO ELECTRÓNICO
========================================== */

/* ENLACES DEL PIE DE PÁGINA */

.footer-grid a[href^="tel:"],
.footer-grid a[href^="mailto:"] {
    color: #ffffff;
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    transition: color 0.3s ease;
}

/* EFECTO AL PASAR EL MOUSE */

.footer-grid a[href^="tel:"]:hover,
.footer-grid a[href^="mailto:"]:hover {
    color: #65cce0;
    text-decoration: underline;
}

/* ENLACES YA VISITADOS */

.footer-grid a[href^="tel:"]:visited,
.footer-grid a[href^="mailto:"]:visited {
    color: #ffffff;
}

/* ==========================================
   HIDROESTUDIO - TARJETAS CON IMÁGENES
========================================== */

/* CONTENEDOR DE LOS SERVICIOS */

.services-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    align-items: stretch;
}

/* TARJETA COMPLETA */

.services-grid .servicio-card {
    display: flex;
    flex-direction: column;
    padding: 0;
    min-width: 0;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #d9e5e9;
    transition: transform 0.3s ease,
                box-shadow 0.3s ease;
}

/* EFECTO AL PASAR EL MOUSE */

.services-grid .servicio-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 30px rgba(0, 40, 55, 0.12);
}

/* IMÁGENES DE LOS SERVICIOS */

.servicio-imagen {
    display: block;
    width: 100%;
    height: 190px;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.servicio-card:hover .servicio-imagen {
    transform: scale(1.025);
}

/* CONTENIDO DE LA TARJETA */

.servicio-contenido {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 28px;
}

.servicio-contenido h3 {
    margin: 16px 0;
    color: #073642;
}

.servicio-contenido p {
    flex: 1;
    color: #71868e;
    line-height: 1.8;
}

/* BOTÓN DE WHATSAPP */

.servicio-contenido .btn-whatsapp {
    display: block;
    margin-top: 24px;
    padding: 13px 12px;
    background: #20c968;
    color: #ffffff;
    border-radius: 5px;
    text-align: center;
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
    transition: background 0.3s ease;
}

.servicio-contenido .btn-whatsapp:hover {
    background: #16a954;
}

/* ==========================================
   ADAPTACIÓN PARA TABLETS
========================================== */

@media (max-width: 1000px) {
    .services-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .servicio-imagen {
        height: 220px;
    }
}

/* ==========================================
   ADAPTACIÓN PARA CELULARES
========================================== */

@media (max-width: 600px) {
    .services-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .servicio-imagen {
        height: 220px;
    }

    .servicio-contenido {
        padding: 24px;
    }
}