:root{
      --miel:#FFD704;     /* amarillo miel */
      --tostado:#635234;  /* café medio */
      --oscuro:#4a3c23;   /* café oscuro */
      --crema:#fff9e0;    /* fondo suave */
      --tinta:#2b2416;    /* texto */
    }
    html{scroll-behavior:smooth}
    section{scroll-margin-top:92px}
    body{background:var(--crema); color:var(--tinta)}

    /* Tipografía artesanal (Google Fonts opcionales) */
    @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;800&family=Nunito:wght@300;400;600;800&display=swap');
    h1,h2,h3,.display-title{font-family:"Playfair Display", serif}
    body{font-family:"Nunito", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", sans-serif}

    /* Navbar */
    .navbar{background:linear-gradient(90deg, var(--crema), var(--crema))}
    .navbar .nav-link{color:var(--tostado)}
    .navbar .nav-link:hover{color:var(--tinta)}
    .navbar-brand{color:#fff!important; font-weight:800}

    /* Hero con textura/ornamentos */
    .hero{
      position:relative; overflow:hidden;
      background:
        radial-gradient(1200px 600px at 110% -10%, rgba(255,215,4,.23), transparent 55%),
        radial-gradient(900px 400px at -10% 110%, rgba(99,82,52,.28), transparent 55%),
        linear-gradient(135deg, var(--oscuro) 0%, var(--tostado) 58%, #3b2f1a 100%);
      color:#fff; padding-top:120px; padding-bottom:110px;
    }
    .hero:after{
      content:""; position:absolute; inset:auto -80px -80px auto; width:360px; height:360px; border-radius:50%;
      background:radial-gradient(circle at 30% 30%, rgba(255,215,4,.45), rgba(255,215,4,0) 60%);
      filter:blur(3px); opacity:.8; pointer-events:none;
    }
    .display-title{font-weight:800; line-height:1.05; font-size:clamp(34px,5vw,58px)}
    .lead-hero{color:#fff6cc; max-width:680px}
    .sello{
      display:inline-flex; gap:8px; align-items:center; background:rgba(255,255,255,.12);
      border:1px solid rgba(255,255,255,.25); padding:.45rem .8rem; border-radius:999px; margin:.2rem .2rem 0 0
    }
    .btn-miel{background:var(--miel); color:#3b2f1a; font-weight:800; border:none}
    .btn-miel:hover{filter:brightness(0.95)}
    .btn-ghost{border:1px solid #fff; color:#fff}
    .btn-ghost:hover{background:#fff; color:var(--oscuro)}

    /* Bloques artesanales */
    .card-wood{
      background:#fff; border:1px solid #eee0b3; border-radius:1rem;
      box-shadow:0 10px 32px rgba(74,60,35,.12)
    }
    .icon-badge{
      width:54px;height:54px;border-radius:50%;display:inline-grid;place-items:center;
      background:linear-gradient(180deg, #fff6bf, #ffe37a); color:#5a441f; border:1px solid #f0cf5f; font-size:20px; flex:0 0 54px
    }
    .list-cafe li{margin-bottom:.3rem}

    /* Sección encabezado */
    .section-head small{letter-spacing:.18em; text-transform:uppercase; font-weight:800; color:#8e7a54}
    .section-head h2{color:var(--oscuro); font-weight:800}

    /* Galería */
    .object-cover{object-fit:cover; object-position:center}
    .ratio-1x1{aspect-ratio:1/1}

    /* WhatsApp fancy */
    .whatsapp-fancy{position:fixed;bottom:20px;left:20px;background:#25d366;color:#fff;padding:12px 20px;font-weight:bold;border-radius:50px;box-shadow:0 8px 16px rgba(0,0,0,.3);display:flex;gap:10px;align-items:center;z-index:9999;transition:background .3s,transform .2s;text-decoration:none !important}
    .whatsapp-fancy:hover{background:#1ebe5d;transform:scale(1.05)}

    footer a{text-decoration:none !important}


    /* --- Estilo General del Formulario --- */
.rd-mailform {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: #333;
    max-width: 700px;
    margin: 2rem auto;
    padding: 2rem;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.rd-mailform .row {
    display: flex;
    flex-wrap: wrap;
    margin: -10px;
}

.rd-mailform .col-md-6,
.rd-mailform .col-sm-12 {
    padding: 10px;
    box-sizing: border-box;
}

.rd-mailform .col-sm-12 {
    width: 100%;
}

.rd-mailform .col-md-6 {
    width: 50%;
}


/* --- Estilo de los Campos (Inputs) y Etiquetas Flotantes --- */
.form-wrap {
    position: relative;
    margin-top: 15px;
}

.form-input {
    width: 100%;
    padding: 12px 15px;
    font-size: 16px;
    color: #444;
    background-color: transparent; /* CAMBIADO: Permite ver la etiqueta detrás */
    border: 1px solid #ccc;
    border-radius: 5px;
    transition: all 0.3s ease;
    box-sizing: border-box;
    position: relative; /* AÑADIDO: Para el contexto de z-index */
    z-index: 2;         /* AÑADIDO: Se asegura que el texto esté por encima de la etiqueta */
}

.form-label {
    position: absolute;
    top: 13px;
    left: 15px;
    font-size: 16px;
    color: #888;
    pointer-events: none;
    transition: all 0.3s ease;
    z-index: 1; /* AÑADIDO: Se asegura que la etiqueta esté por debajo del texto */
}


/* --- Efecto Flotante de la Etiqueta (Activado por JS y CSS :focus) --- */
.form-input:focus + .form-label,
.form-input.not-empty + .form-label,
.form-wrap.focus .form-label {
    top: -10px;
    left: 10px;
    font-size: 12px;
    color: #007bff;
    background-color: #f9f9f9; /* Mismo color que el fondo para tapar la línea del input */
    padding: 0 5px;
    z-index: 3; /* AÑADIDO: Se pone por encima de todo cuando está activo */
}

/* --- Resaltar el Borde del Input al Enfocar --- */
.form-input:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

/* --- Estilo del Textarea --- */
textarea.form-input {
    min-height: 120px;
    resize: vertical;
}


/* --- Estilo del Botón de Enviar --- */
.btn {
    width: 100%;
    padding: 14px 20px;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    background-color: #007bff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}

.btn:hover, .btn:focus {
    background-color: #0056b3;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
}

.btn:active {
    transform: translateY(0);
}


/* --- Reglas para Móviles (Responsivo) --- */
@media (max-width: 767px) {
    .rd-mailform .col-md-6 {
        width: 100%;
    }

    .rd-mailform {
        padding: 1.5rem;
    }
}

/* ===== RD Mailform – snackbars ===== */
.snackbars{
  position:fixed;bottom:20px;left:50%;transform:translateX(-50%);
  width:auto;max-width:380px;padding:14px 17px;background-color:#151515;color:#fff;
  border-radius:6px;box-shadow:0 4px 12px rgba(0,0,0,.25);z-index:9999;opacity:0;
  transition:opacity .3s, bottom .3s
}
.snackbars.show{opacity:1;bottom:40px}

/* --- Contenedor Principal del Formulario --- */
.rd-mailform {
    max-width: 600px; /* Ancho máximo del formulario */
    margin: 40px auto; /* Centra el formulario en la página */
    padding: 30px; /* Espacio interior */
    background-color: #ffffff; /* Fondo blanco */
    border-radius: 12px; /* Bordes redondeados */
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1); /* Sombra sutil para darle profundidad */
    display: flex;
    flex-direction: column;
    gap: 20px; /* Espacio entre cada campo */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Fuente legible */
}

/* --- Estilo para todos los campos de entrada (input y textarea) --- */
.rd-mailform input[type="text"],
.rd-mailform input[type="email"],
.rd-mailform textarea {
    width: 100%; /* Ocupa todo el ancho disponible */
    padding: 15px; /* Espacio interior para que el texto no se pegue al borde */
    border: 1px solid #ccc; /* Borde sutil */
    border-radius: 8px; /* Bordes redondeados */
    font-size: 16px; /* Tamaño de letra legible */
    color: #333; /* Color del texto */
    box-sizing: border-box; /* Asegura que el padding no afecte el ancho total */
    transition: border-color 0.3s, box-shadow 0.3s; /* Transición suave para el foco */
}

/* --- Estilo para el campo de texto de varias líneas --- */
.rd-mailform textarea {
    resize: vertical; /* Permite al usuario ajustar la altura verticalmente */
    min-height: 120px; /* Altura mínima */
}

/* --- Efecto al hacer clic en un campo (estado :focus) --- */
.rd-mailform input[type="text"]:focus,
.rd-mailform input[type="email"]:focus,
.rd-mailform textarea:focus {
    outline: none; /* Elimina el borde de foco predeterminado */
    border-color: #007BFF; /* Cambia el color del borde a un azul llamativo */
    box-shadow: 0 0 8px rgba(0, 123, 255, 0.25); /* Agrega una sombra azulada */
}

/* --- Estilo para el texto de marcador de posición (placeholder) --- */
.rd-mailform::placeholder {
    color: #999;
    opacity: 1;
}

/* --- Estilo del Botón de Envío --- */
.btn-cta {
    padding: 15px 20px;
    border: none; /* Sin borde */
    border-radius: 8px; /* Bordes redondeados */
    background-color: #007BFF; /* Color de fondo azul */
    color: white; /* Texto blanco */
    font-size: 18px; /* Tamaño de letra */
    font-weight: bold; /* Texto en negrita */
    cursor: pointer; /* Cambia el cursor a una mano */
    transition: background-color 0.3s, transform 0.2s; /* Transición suave */
    text-align: center;
}

/* --- Efecto al pasar el mouse sobre el botón (estado :hover) --- */
.btn-cta:hover {
    background-color: #0056b3; /* Un azul más oscuro */
    transform: translateY(-2px); /* Mueve el botón ligeramente hacia arriba */
}

/* --- Efecto al hacer clic en el botón (estado :active) --- */
.btn-cta:active {
    transform: translateY(0); /* Regresa el botón a su posición original */
}