@import url('fonts/fonts.css');

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Lato', sans-serif;
    background-color: #F8FAFC;
    color: #334155;
    line-height: 1.8;
}

h1, h2, h3, dt { font-family: 'Cormorant Garamond', serif; color: #0F766E; /* Spa Aqua Blue/Green */ }

/* SKELETON C: EDITORIAL CSS COLUMNS + DEFINITION LISTS */
._contenedor_editorial {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
}

/* Header as a blockquote */
blockquote._cabecera_editorial {
    text-align: center;
    border-bottom: 2px solid #0F766E;
    padding-bottom: 30px;
    margin-bottom: 40px;
}
blockquote._cabecera_editorial h1 { font-size: 48px; margin-bottom: 10px; }
blockquote._cabecera_editorial p { font-size: 20px; font-style: italic; color: #64748B; }

/* Navigation as Definition List */
dl._navegacion_spa {
    display: flex; justify-content: center; gap: 40px; margin-bottom: 50px;
}
dl._navegacion_spa dt a {
    text-decoration: none; color: #0F766E; font-size: 18px; text-transform: uppercase; letter-spacing: 2px;
}
dl._navegacion_spa dt a:hover, dl._navegacion_spa dt a._activo { border-bottom: 1px solid #0F766E; }

/* The Core Trick: CSS Columns for content */
._columnas_periodico {
    column-count: 2;
    column-gap: 60px;
    column-rule: 1px solid #E2E8F0;
}

@media (max-width: 768px) {
    ._columnas_periodico { column-count: 1; column-rule: none; }
    dl._navegacion_spa { flex-direction: column; align-items: center; gap: 15px; }
}

/* Hero image floats within columns */
._imagen_flotante {
    width: 100%;
    margin-bottom: 30px;
    break-inside: avoid; /* Prevent image splitting across columns */
}
._imagen_flotante img { width: 100%; border-radius: 4px; box-shadow: 0 10px 30px rgba(15, 118, 110, 0.15); }

/* Text Blocks */
._bloque_texto { break-inside: avoid; margin-bottom: 40px; }
._bloque_texto h2 { font-size: 32px; margin-bottom: 20px; }
._bloque_texto p { margin-bottom: 15px; font-size: 17px;}

/* Services List using definition terms */
dl._lista_servicios { margin-top: 30px; break-inside: avoid;}
dl._lista_servicios dt { font-size: 24px; margin-top: 25px; margin-bottom: 10px; border-left: 3px solid #0F766E; padding-left: 15px;}
dl._lista_servicios dd { font-size: 16px; margin-bottom: 15px; padding-left: 18px; color: #475569;}

._boton_spa {
    display: inline-block; padding: 12px 30px; background-color: #0F766E; color: #FFFFFF !important;
    text-decoration: none; font-family: 'Lato', sans-serif; text-transform: uppercase; letter-spacing: 1px; transition: 0.3s;
    border: 1px solid #0F766E; margin-top: 20px;
}
._boton_spa:hover { background-color: transparent; color: #0F766E !important; }

/* Forms */
._formulario_spa { display: flex; flex-direction: column; gap: 20px; margin-top: 20px; break-inside: avoid;}
._formulario_spa input, ._formulario_spa textarea {
    padding: 15px; border: none; border-bottom: 1px solid #CBD5E0; background: transparent; font-family: 'Lato', sans-serif;
}
._formulario_spa input:focus, ._formulario_spa textarea:focus { outline: none; border-bottom-color: #0F766E; }

/* Footer */
._pie_editorial { text-align: center; margin-top: 80px; padding-top: 30px; border-top: 1px solid #E2E8F0; font-size: 14px; color: #94A3B8;}
._pie_editorial a { color: #64748B; text-decoration: none; margin: 0 10px;}