:root {
    --bg-principal: #E1A07A;
    --bg-card: #D9A27A;
    --accent-warm: #8E4F36 ;
    --accent-red: #834830 ;
    --text-dark: #4D3328;
    --bg-celda: #F6E2D3 ;
    --borde-celda: #CD8640;

    --arcilla-clara: #F7F0E5;
    --porcelana: #FFF9F0;
    --terracota: #C77850;
    --ladrillo: #A9513B;
    --cacao: #49352D;
    --engobe: #F6E2D3;
    --esmalte: #CD8640;
 
    --salvia: #DB7F3E;
    --ocre: #C9625A;
    --celadon: #658D91;
}

body {
    margin: 0;
    background-color: var(--arcilla-clara);
    color: var(--cacao);
    font-family: Arial, sans-serif;
}
 
main.home {
    padding: 0;
    background-color: var(--arcilla-clara);
    color: var(--cacao);
    font-weight: normal;
    overflow: hidden;
}
 
/* Presentación principal */
 
.hero {
    min-height: 570px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 50px;
    padding: 70px 8%;
    position: relative;
}
 
.hero-content {
    max-width: 600px;
    position: relative;
    z-index: 1;
}
 
.eyebrow {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 0.8rem;
    font-weight: bold;
    color: var(--ladrillo);
    margin-bottom: 15px;
}
 
.hero h1 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2.5rem, 4.5vw, 4.5rem);
    line-height: 1.1;
    margin: 0 0 25px;
    font-weight: normal;
}
 
.hero h1 span {
    color: var(--ladrillo);
    font-style: italic;
}
 
.hero p,
.community p,
.experience p,
.closing p {
    font-size: 1.1rem;
    line-height: 1.8;
}
 
.hero-image {
    position: relative;
    z-index: 1;
}
 
.hero-image::before {
    content: "";
    position: absolute;
    background: var(--ocre);
    width: 90%;
    height: 90%;
    top: -25px;
    right: -25px;
    border-radius: 48% 52% 38% 62% / 48% 40% 60% 52%;
    transform: rotate(-8deg);
    z-index: -1;
}
 
.hero-image img {
    width: 100%;
    height: 440px;
    object-fit: cover;
    border-radius: 45% 45% 12px 12px;
}
 
/* Comunidad */
 
.community {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 70px;
    padding: 90px 10%;
    background-color: var(--porcelana);
    position: relative;
}
 
.community-image {
    position: relative;
}
 
.community-image::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: var(--salvia);
    border-radius: 35% 65% 50% 50% / 50% 35% 65% 50%;
    transform: rotate(6deg) scale(1.04);
    z-index: 0;
}
 
.community-image img {
    width: 100%;
    height: 390px;
    object-fit: cover;
    border-radius: 38% 62% 55% 45% / 45% 35% 65% 55%;
    position: relative;
    z-index: 1;
}
 
.community-content h2,
.experience h2,
.closing h2 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2rem, 3vw, 3rem);
    font-weight: normal;
    line-height: 1.2;
    margin-top: 0;
}
 
/* Experiencia */
 
.experience {
    padding: 100px 15%;
    text-align: center;
    position: relative;
    background-color: var(--arcilla-clara);
}
 
.experience-content {
    max-width: 850px;
    margin: auto;
    position: relative;
    z-index: 1;
}
 
.experience-decoration {
    position: absolute;
    width: 230px;
    height: 180px;
    background: var(--terracota);
    opacity: 0.22;
    border-radius: 65% 35% 40% 60% / 45% 50% 50% 55%;
    top: 35px;
    left: -70px;
    transform: rotate(-25deg);
}
 
.text-link {
    display: inline-block;
    margin-top: 20px;
    color: var(--ladrillo);
    font-size: 1.1rem;
    font-weight: bold;
    text-decoration: none;
}
 
.text-link:hover {
    text-decoration: underline;
}
 
/* Cierre */
 
.closing {
    padding: 80px 20px;
    text-align: center;
    background-color: #EBD4BD;
    position: relative;
}
 
.closing h2 {
    max-width: 700px;
    margin: 0 auto 20px;
}
 
.closing p {
    max-width: 650px;
    margin: 0 auto 30px;
}
 
.hero-button {
    display: inline-block;
    padding: 15px 25px;
    margin-top: 15px;
    background-color: var(--ladrillo);
    color: white;
    text-decoration: none;
    border-radius: 30px;
    font-weight: bold;
    transition: background-color 0.2s, transform 0.2s;
}
 
.hero-button:hover {
    background-color: var(--cacao);
    transform: translateY(-2px);
}
 
/* Adaptación a celulares */
 
@media (max-width: 800px) {
    .hero,
    .community {
        grid-template-columns: 1fr;
        gap: 35px;
        padding: 55px 7%;
    }
 
    .hero {
        min-height: auto;
    }
 
    .hero-image img {
        height: 350px;
    }
 
    .community-image img {
        height: 320px;
    }
 
    .experience {
        padding: 75px 8%;
    }
 
    .hero h1 {
        font-size: 2.8rem;
    }
}
 
@media (max-width: 480px) {
    .hero-image img {
        height: 270px;
    }
 
    .community-image img {
        height: 250px;
    }
 
    .hero h1 {
        font-size: 2.3rem;
    }
 
    .hero p,
    .community p,
    .experience p,
    .closing p {
        font-size: 1rem;
    }
}

.title {
    font-family: Times New Roman, serif;
    font-size: 2.5rem;
    text-align: left;
    margin-bottom: 20px;
    margin-left: 10px;
}

.subtitle {
    font-family: Times New Roman, serif;
    font-size: 2rem;
    text-align: left;
    margin-bottom: 15px;
    margin-left: 10px;
}

.nav-links {
    list-style-type: none;
    margin: 0;
    padding: 0;
    background-color:  var(--text-dark);
    align-items: center;
    display: flex;
    justify-content: center;
}


.nav-links a {
    display: block;
    color: var(--bg-celda);
    text-align: center;
    padding: 14px 20px;
    text-decoration: none;
    font-family: Arial, sans-serif;
    transition: background-color 0.3s ease;
    font-size: 1.25rem;
}

.nav-links img {
    width: 60px;
    height: auto;
}

.nav-links a:hover {
    background-color: var(--accent-red);
    border-radius: 10px;
}

.exeption {
    background-color: none;
}
.logo-link:hover {
    background-color: transparent !important;
}

.schedule {
    font-family: Arial, sans-serif;
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 45px 0px;
}

.card_header {
    background-color: var(--bg-celda);
    border-bottom: 1px solid var(--borde-celda);
    border-radius: 40px 40px 0 0;
    padding: 12px 15px;
    color: var(--text-dark);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.card_data {
    background-color: var(--bg-celda);
    border-bottom: 1px solid var(--borde-celda);
    padding: 12px 15px;
    color: var(--text-dark);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.card_data_bottom{
    background-color: var(--bg-celda);
    border-radius: 0 0 40px 40px;
    padding: 12px 15px;
    color: var(--text-dark);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.schedule th, td {
    text-align: center;
    font-size: 1.2rem;
    padding: 10px;
}

.transition {
    padding: 5px;
    background-color: var(--accent-warm);
}

.footer {
    background-color: var(--text-dark);
    padding: 20px;
    display: flex;
}

.social-link {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.2rem;
}

.social-link span {
    color: white;
    text-decoration: underline;
}

iframe {
    border: 8px var(--accent-warm) solid;
    border-radius: 8px;
    width: 100%;
    box-sizing: border-box;
}

/* =========================================
   TIPOGRAFÍA NEUROLOP REGULAR
   ========================================= */

/*
   Guardá el archivo de la fuente en:
   static/fonts/Neurolop-Regular.woff2

   Si tu archivo tiene otra extensión o nombre,
   modificá la ruta de src.
*/

@font-face {
    font-family: "Neurolop";
    src: url("/static/fonts/Neuropol.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

.logo-font {
    font-family: "Neurolop", sans-serif;
    font-style: normal;
    font-weight: 400;
}

/* Títulos principales de la página */

.home .hero h1,
.home .community-content h2,
.home .editorial-content h2,
.home .closing h2 {
    font-family: Georgia, "Times New Roman", serif;
    font-weight: normal;
}

.hero h1 span.logo-font {
    color: var(--ladrillo);
    font-style: normal;
}

/* =========================================
   SECCIONES EDITORIALES
   ========================================= */

.editorial-section {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(35px, 6vw, 85px);
    padding: 90px 10%;
    position: relative;
}

.editorial-content {
    min-width: 0;
    position: relative;
    z-index: 2;
}

.editorial-content h2 {
    font-size: clamp(2rem, 3.2vw, 3.2rem);
    margin: 0 0 25px;
    color: var(--cacao);
}

.editorial-content p {
    font-size: 1.1rem;
    line-height: 1.85;
    margin: 0 0 20px;
}

/* =========================================
   CONTENEDORES DE IMAGEN
   ========================================= */

.editorial-image {
    position: relative;
    isolation: isolate;
    width: 100%;
    min-width: 0;
}

.editorial-image img {
    display: block;
    position: relative;
    z-index: 1;
    width: 100%;
    height: clamp(300px, 35vw, 440px);
    object-fit: cover;
}

/* Imagen 1: forma orgánica */

.community {
    background-color: var(--porcelana);
}

.community-image::before {
    background: var(--terracota);
    border-radius: 28% 72% 62% 38% / 43% 35% 65% 57%;
    transform: rotate(-5deg) scale(1.025);
}

.community-image img {
    border-radius: 30% 70% 58% 42% / 42% 35% 65% 58%;
}

/* Imagen 2: forma geométrica redondeada */

.comfort-section {
    background-color: var(--arcilla-clara);
}

.geometric-image {
    max-width: 440px;
    margin: 0 auto;
}

.geometric-image::before {
    content: "";
    position: absolute;
    width: 88%;
    height: 88%;
    top: -18px;
    right: -18px;
    background: var(--celadon);
    border-radius: 50%;
    z-index: 0;
}

.geometric-image img {
    width: 100%;
    aspect-ratio: 1 / 1;
    height: auto;
    object-fit: cover;
    border-radius: 50%;
    position: relative;
    z-index: 1;
}
/* Imagen 3: forma orgánica asimétrica */

.benefits-section {
    background-color: var(--porcelana);
}

.organic-image {
    max-width: 440px;
    margin: 0 auto;
}

.organic-image::before {
    content: "";
    position: absolute;
    width: 88%;
    height: 94%;
    bottom: -15px;
    left: -18px;
    background: var(--terracota);
    border-radius: 43% 57% 48% 52% / 55% 43% 57% 45%;
    transform: rotate(-8deg);
    z-index: 0;
}

.organic-image img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 48% 52% 42% 58% / 48% 42% 58% 52%;
    position: relative;
    z-index: 1;
}
/* =========================================
   CIERRE
   ========================================= */

.closing {
    background-color: #EBD4BD;
}

.closing h2 {
    max-width: 800px;
}

/* =========================================
   ADAPTACIÓN A CELULARES
   ========================================= */

@media (max-width: 800px) {
    .editorial-section {
        grid-template-columns: minmax(0, 1fr);
        gap: 38px;
        padding: 65px 7%;
    }

    .editorial-image {
        max-width: 560px;
        margin: 0 auto;
    }

    .editorial-image img {
        height: 350px;
    }

    /* En móvil, el texto de comunidad aparece primero */
    .community-content {
        order: -1;
    }

    .comfort-section .editorial-content {
        order: -1;
    }

    .editorial-content h2 {
        font-size: 2.4rem;
    }
}

@media (max-width: 480px) {
    .editorial-section {
        padding: 50px 7%;
        gap: 30px;
    }

    .editorial-image img {
        height: 270px;
    }

    .editorial-content h2 {
        font-size: 2rem;
    }

    .editorial-content p {
        font-size: 1rem;
        line-height: 1.8;
    }
}