@import url('https://fonts.googleapis.com/css2?family=Amatic+SC:wght@400;700&family=Bebas+Neue&family=Fjalla+One&family=Lobster+Two:ital,wght@0,400;0,700;1,400;1,700&family=Oswald:wght@200..700&family=Spicy+Rice&display=swap');

body{
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
} 


.header-centro {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #afcf85;
    height: 120px;
    padding: 0 20px;
}

/* Menú izquierdo en computadora */
.nav-left {
    position: absolute;
    right: calc(50% + 150px);
    display: flex;
    gap: 1.5rem;
}

/* Menú derecho en computadora */
.nav-right {
    position: absolute;
    left: calc(50% + 150px);
    display: flex;
    gap: 1.5rem;
}

/* Enlaces */
.nav-left a,
.nav-right a,
.menu-movil a {
    text-decoration: none;
    font-family: 'Oswald', sans-serif;
    font-size: 1.8rem;
    color: #5A2A3A;
    font-weight: 600;
}

.nav-left a:hover,
.nav-right a:hover,
.menu-movil a:hover {
    color: #03270b;
}

/* Logo centrado */
.logo-wrapper {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

img.logo-header {
    width: auto;
    height: 100px;
    object-fit: contain;
    display: block;
}

.estrella {
    font-size: 22px;
    color: #5A2A3A;
    opacity: 0.9;
}

/* El menú móvil no aparece en computadora */
.menu-movil {
    display: none;
}


/* ------------------------------ */
/* 📱 MODO CELULAR */
/* ------------------------------ */

@media (max-width: 768px) {

    .header-centro {
        height: auto;
        padding: 10px 4px 14px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }

    /* Logo arriba */
    .logo-wrapper {
        position: static;
        transform: none;
        order: 1;
        gap: 8px;
    }

    img.logo-header {
        height: 65px;
        width: auto;
    }

    .estrella {
        font-size: 16px;
    }

    /* Ocultamos los menús de computadora */
    .nav-left,
    .nav-right {
        display: none;
    }

    /* Los cuatro enlaces en una sola línea */
    .menu-movil {
        order: 2;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
        gap: clamp(8px, 3vw, 16px);
        width: 100%;
        white-space: nowrap;
    }

    .menu-movil a {
        font-size: clamp(23px, 3.6vw, 15px);
        white-space: nowrap;
        font-weight: 600;
    }

}
.banner-move {
  width: 100%;
  overflow: hidden;
  background-color: #588b6d; 
  padding: 0.2rem 0;
}

.banner-move h6 {
  display: inline-block;
  white-space: nowrap;
  color: rgb(245, 235, 235);
  font-family: 'Playfair Display', serif;
  font-size: 0.85rem;
  line-height: 0.85rem;
  margin: 0;
  width: 100%;
  animation: moveText 27s linear infinite;
}

@keyframes moveText {
  from { transform: translateX(100%); }
  to { transform: translateX(-100%); }
}

@media (max-width: 768px) {

  /* Header */
  header .container {
    flex-direction: column;
    gap: 1rem;
  }

  .logo {
    width: 180px;
  }

  .naver ul {
    flex-direction: column;
    
  }

  /* Banner */
  .banner-move h6 {
    font-size: 0.75rem;
  }
}

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

body {
    font-family: "DM Sans", sans-serif;
    color: #5A2A3A;
}


/* =========================
   FONDO
========================= */

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


html {
    scroll-behavior: smooth;
}


body {
    font-family: "DM Sans", sans-serif;
    color: #5A2A3A;
}


/* =========================================
   FONDO PRINCIPAL
========================================= */

.contacto {

    min-height: 100vh;

    width: 100%;

    position: relative;

    overflow: hidden;

    display: flex;

    justify-content: center;

    align-items: center;

    padding: 70px 30px;


    /* TU FONDO */

    background-image: url("fondoblog.jpg");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;
}


/* =========================================
   TARJETA
========================================= */

.tarjeta-contacto {

    position: relative;

    z-index: 2;

    width: min(900px, 100%);

    min-height: 500px;

    padding: 55px 65px;


    display: flex;

    align-items: center;

    justify-content: center;

    gap: 70px;


    background: rgba(255, 250, 252, 0.82);

    backdrop-filter: blur(10px);

    -webkit-backdrop-filter: blur(10px);


    border: 2px solid rgba(255, 255, 255, 0.85);

    border-radius: 35px;


    box-shadow:
        0 25px 60px rgba(120, 55, 90, 0.18),
        0 5px 15px rgba(120, 55, 90, 0.08);
}


/* =========================================
   FOTO
========================================= */

.foto-container {

    position: relative;

    flex-shrink: 0;
}


.foto-marco {

    width: 270px;

    height: 350px;

    overflow: hidden;


    border-radius:
        48% 48% 42% 42%;


    border: 8px solid rgba(255, 255, 255, 0.9);


    box-shadow:
        0 12px 30px rgba(120, 55, 90, 0.16);


    transform: rotate(-2deg);

    background: #F7DDE2;
}


.foto-marco img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;
}


/* Corazoncito de la foto */

.foto-corazon {

    position: absolute;

    right: -15px;

    bottom: 15px;

    width: 48px;

    height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;


    background: #8f0540;

    color: white;

    border-radius: 50%;


    font-size: 1.5rem;


    transform: rotate(8deg);


    box-shadow:
        0 5px 15px rgba(143, 5, 64, 0.2);
}


/* =========================================
   INFORMACIÓN
========================================= */

.informacion {

    flex: 1;

    min-width: 0;
}


/* pequeño título */

.pequeno-titulo {

    font-size: 0.75rem;

    letter-spacing: 0.25em;

    font-weight: 600;

    color: #a15b75;

    margin-bottom: 8px;
}


/* =========================================
   NOMBRE
========================================= */

h1 {

    font-family: "Playfair Display", serif;

    font-size: clamp(3rem, 6vw, 4.5rem);

    line-height: 0.95;

    font-weight: 500;

    color: #8f0540;

    margin-bottom: 20px;
}


h1 span {

    font-style: italic;

    color: #5A2A3A;
}


/* =========================================
   DESCRIPCIÓN
========================================= */

.descripcion {

    font-size: 0.95rem;

    line-height: 1.6;

    color: #70465a;

    max-width: 350px;
}


.frase {

    margin-top: 10px;

    font-family: "Playfair Display", serif;

    font-style: italic;

    color: #a15b75;

    font-size: 0.95rem;
}


/* =========================================
   DIVISOR
========================================= */

.linea {

    width: 100%;

    max-width: 360px;

    height: 1px;

    margin: 25px 0;

    background: rgba(143, 5, 64, 0.18);

    position: relative;

    display: flex;

    justify-content: center;

    align-items: center;
}


.linea span {

    background: rgba(255, 250, 252, 0.95);

    padding: 0 12px;

    color: #8f0540;

    font-size: 1rem;
}


/* =========================================
   CONTACTOS
========================================= */

.contactos {

    display: flex;

    flex-direction: column;

    gap: 14px;
}


.contacto-item {

    display: flex;

    align-items: center;

    gap: 15px;

    width: fit-content;


    color: #5A2A3A;

    text-decoration: none;


    transition:
        transform 0.25s ease,
        color 0.25s ease;
}


.contacto-item:hover {

    transform: translateX(5px);

    color: #8f0540;
}


/* iconos */

.icono {

    width: 38px;

    height: 38px;

    display: flex;

    justify-content: center;

    align-items: center;


    border-radius: 50%;

    background: #F7DDE2;

    color: #8f0540;


    font-size: 1rem;

    font-weight: 600;
}


/* texto de contacto */

.contacto-item span:last-child {

    display: flex;

    flex-direction: column;

    gap: 2px;

    font-size: 0.9rem;
}


.contacto-item small {

    font-size: 0.62rem;

    letter-spacing: 0.15em;

    font-weight: 600;

    color: #a15b75;
}


/* =========================================
   UBICACIÓN
========================================= */

.ubicacion {

    margin-top: 25px;

    font-size: 0.8rem;

    color: #a15b75;

    letter-spacing: 0.08em;
}


/* =========================================
   DECORACIONES
========================================= */

.decoracion {

    position: absolute;

    z-index: 1;

    color: #8f0540;

    opacity: 0.65;

    pointer-events: none;
}


.estrella {

    font-size: 2rem;
}


.estrella-1 {

    top: 12%;

    left: 8%;

    transform: rotate(15deg);
}


.estrella-2 {

    bottom: 13%;

    right: 9%;

    font-size: 1.5rem;

    transform: rotate(-15deg);
}


.corazon {

    font-size: 3rem;

    opacity: 0.45;
}


.corazon-1 {

    top: 18%;

    right: 10%;

    transform: rotate(15deg);
}


.corazon-2 {

    bottom: 15%;

    left: 9%;

    transform: rotate(-15deg);
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 850px) {

    .contacto {

        padding: 50px 20px;
    }


    .tarjeta-contacto {

        gap: 45px;

        padding: 45px;

        max-width: 760px;
    }


    .foto-marco {

        width: 230px;

        height: 310px;
    }
}


/* =========================================
   TABLET PEQUEÑA
========================================= */

@media (max-width: 700px) {

    .contacto {

        padding: 40px 18px;
    }


    .tarjeta-contacto {

        flex-direction: column;

        text-align: center;

        gap: 35px;

        padding: 45px 30px;

        max-width: 570px;
    }


    .foto-marco {

        width: 220px;

        height: 285px;
    }


    .informacion {

        width: 100%;

        display: flex;

        flex-direction: column;

        align-items: center;
    }


    .descripcion {

        max-width: 400px;
    }


    .linea {

        max-width: 320px;
    }


    .contactos {

        align-items: flex-start;

        text-align: left;
    }


    .ubicacion {

        margin-top: 20px;
    }
}


/* =========================================
   CELULAR
========================================= */

@media (max-width: 480px) {

    .contacto {

        min-height: 100svh;

        padding: 25px 12px;
    }


    .tarjeta-contacto {

        width: 100%;

        padding: 35px 20px;

        border-radius: 27px;

        gap: 28px;
    }


    .foto-marco {

        width: 185px;

        height: 240px;

        border-width: 6px;
    }


    .foto-corazon {

        width: 40px;

        height: 40px;

        right: -12px;

        bottom: 8px;

        font-size: 1.2rem;
    }


    h1 {

        font-size: 2.8rem;

        margin-bottom: 15px;
    }


    .pequeno-titulo {

        font-size: 0.65rem;
    }


    .descripcion {

        font-size: 0.85rem;
    }


    .frase {

        font-size: 0.85rem;
    }


    .linea {

        margin: 20px 0;

        max-width: 270px;
    }


    .contactos {

        gap: 12px;
    }


    .contacto-item {

        font-size: 0.85rem;
    }


    .icono {

        width: 35px;

        height: 35px;
    }


    .decoracion {

        display: none;
    }
}


/* =========================================
   CELULAR MUY PEQUEÑO
========================================= */

@media (max-width: 360px) {

    .tarjeta-contacto {

        padding: 30px 16px;
    }


    .foto-marco {

        width: 165px;

        height: 215px;
    }


    h1 {

        font-size: 2.4rem;
    }


    .contacto-item {

        gap: 10px;
    }
}

.footer-section {
  background-color: #06351b; /* vino del header */
  padding: 2rem 0;
  width: 100%;
}

.footer-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.footer-text {
  color: #f5e4e9; /* rosita crema */
  font-family: 'Playfair Display', serif;
  font-size: 1rem;
  letter-spacing: 0.5px;
}