/* ===========================================================================
   Base styles — Solar de la Costa
   Reset moderno + tipografía base + componentes comunes (.sdc-*).
   No interfiere con el CSS legacy: todas las clases nuevas tienen prefijo sdc-.
   =========================================================================== */

/* --- Reset moderno --- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
/* Root en 10px y body en 1.6rem: son los valores que hoy impone styles.css
   (legacy, se carga después). Todo guest.css está calibrado con 1rem = 10px,
   así que los fijamos acá para que nada cambie el día que se retire styles.css. */
html { font-size: 10px; -webkit-text-size-adjust: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
body {
    font-family: var(--sdc-font-body);
    font-size: 1.6rem;
    line-height: 1.55;
    color: var(--sdc-ink);
    background: var(--sdc-cream);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
button, input, select, textarea {
    font: inherit;
    color: inherit;
}

/* --- Foco visible (accesibilidad) --- */
:focus-visible {
    outline: 3px solid var(--sdc-sun);
    outline-offset: 2px;
    border-radius: var(--sdc-radius-sm);
}

/* --- Layout helpers --- */
.sdc-container {
    width: 100%;
    max-width: var(--sdc-container);
    margin-inline: auto;
    padding-inline: var(--sdc-space-5);
}

/* --- Typography --- */
.sdc-h1, .sdc-h2, .sdc-h3 {
    font-family: var(--sdc-font-display);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--sdc-ink);
}
.sdc-h1 { font-size: var(--sdc-text-4xl); }
.sdc-h2 { font-size: var(--sdc-text-3xl); }
.sdc-h3 { font-size: var(--sdc-text-xl); }
.sdc-eyebrow {
    color: var(--sdc-orange);
    font-weight: 600;
    font-size: var(--sdc-text-xs);
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.sdc-lead {
    font-size: var(--sdc-text-lg);
    color: var(--sdc-ink-soft);
    line-height: 1.55;
}

/* --- Botones --- */
.sdc-btn {
    -webkit-appearance: none;
    appearance: none;
    border: none;
    background: none;
    cursor: pointer;
    font-family: var(--sdc-font-body);
    font-size: var(--sdc-text-base);
    font-weight: 600;
    padding: 0.75rem 1.4rem;
    border-radius: var(--sdc-radius-pill);
    transition: transform var(--sdc-trans-fast), box-shadow var(--sdc-trans), background var(--sdc-trans);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-decoration: none;
    line-height: 1.2;
    white-space: nowrap;
}
.sdc-btn:active { transform: translateY(0); }
.sdc-btn:disabled { opacity: 0.55; cursor: not-allowed; }

.sdc-btn-primary {
    background: var(--sdc-gradient);
    color: var(--sdc-white);
    box-shadow: 0 6px 20px rgba(186, 86, 34, 0.35);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.sdc-btn-primary:hover {
    background: var(--sdc-gradient-alt);
    transform: translateY(-1px);
    box-shadow: 0 10px 26px rgba(186, 86, 34, 0.45);
}

.sdc-btn-ghost {
    background: transparent;
    color: var(--sdc-brown);
    border: 1px solid var(--sdc-line);
}
.sdc-btn-ghost:hover {
    background: var(--sdc-cream-2);
    border-color: var(--sdc-sun);
}

.sdc-btn-block { width: 100%; }
.sdc-btn-lg { padding: 0.95rem 1.8rem; font-size: var(--sdc-text-lg); }

/* --- Card --- */
.sdc-card {
    background: var(--sdc-white);
    border-radius: var(--sdc-radius-lg);
    box-shadow: var(--sdc-shadow-md);
    padding: var(--sdc-space-6);
    border: 1px solid var(--sdc-line);
}
.sdc-card-sm { padding: var(--sdc-space-4); }
.sdc-card-lg { padding: var(--sdc-space-8); }

/* --- Form fields --- */
.sdc-field { display: flex; flex-direction: column; gap: 0.3rem; }
.sdc-label {
    font-size: var(--sdc-text-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--sdc-ink-soft);
    text-transform: uppercase;
}
.sdc-input {
    border: 1px solid var(--sdc-line);
    background: var(--sdc-white);
    padding: 0.7rem 0.85rem;
    border-radius: var(--sdc-radius);
    color: var(--sdc-ink);
    transition: border-color var(--sdc-trans-fast), box-shadow var(--sdc-trans-fast);
    width: 100%;
    font-size: 1.6rem; /* 16px: por debajo iOS hace zoom al enfocar */
}
.sdc-input:focus {
    outline: none;
    border-color: var(--sdc-sun);
    box-shadow: var(--sdc-shadow-focus);
}
.sdc-input.sdc-input-error {
    border-color: var(--sdc-error);
    background: var(--sdc-error-soft);
}
.sdc-help {
    font-size: var(--sdc-text-xs);
    color: var(--sdc-ink-mute);
    margin-top: var(--sdc-space-1);
}
.sdc-error-msg {
    font-size: var(--sdc-text-xs);
    color: var(--sdc-error);
    margin-top: var(--sdc-space-1);
    display: flex;
    align-items: center;
    gap: 0.3rem;
}
.sdc-error-msg::before { content: '⚠'; font-size: 1em; }
/* El atributo [hidden] del HTML pone `display: none` con baja especificidad,
   y nuestro `.sdc-error-msg { display: flex }` lo pisa. Subimos especificidad
   acá para que el JS pueda ocultar el mensaje con `el.hidden = true`. */
.sdc-error-msg[hidden] { display: none; }

/* --- Badge --- */
.sdc-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.6rem;
    border-radius: var(--sdc-radius-pill);
    font-size: var(--sdc-text-xs);
    font-weight: 600;
    background: var(--sdc-cream-2);
    color: var(--sdc-ink-soft);
}
.sdc-badge-success { background: var(--sdc-success-soft); color: var(--sdc-success); }
.sdc-badge-warn    { background: #fef3c7; color: var(--sdc-warn); }
.sdc-badge-error   { background: var(--sdc-error-soft); color: var(--sdc-error); }
.sdc-badge-info    { background: var(--sdc-info-soft); color: var(--sdc-info); }

/* --- WhatsApp floating button --- */
.sdc-wa {
    position: fixed;
    bottom: var(--sdc-space-5);
    right: var(--sdc-space-5);
    z-index: var(--sdc-z-float);
    background: #25D366;
    color: white;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.45);
    text-decoration: none;
    transition: transform var(--sdc-trans);
}
.sdc-wa:hover { transform: scale(1.08); }
.sdc-wa svg { width: 28px; height: 28px; fill: white; }

/* --- Skeleton / loading --- */
.sdc-skeleton {
    background: linear-gradient(90deg, var(--sdc-cream-2) 0%, var(--sdc-cream) 50%, var(--sdc-cream-2) 100%);
    background-size: 200% 100%;
    animation: sdc-skel 1.4s ease-in-out infinite;
    border-radius: var(--sdc-radius);
}
@keyframes sdc-skel {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* --- Spinner --- */
.sdc-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2.5px solid rgba(0, 0, 0, 0.12);
    border-top-color: var(--sdc-sun);
    border-radius: 50%;
    animation: sdc-spin 0.8s linear infinite;
    vertical-align: middle;
}
@keyframes sdc-spin {
    to { transform: rotate(360deg); }
}

/* --- Visually hidden (accesible para SR) --- */
.sdc-sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* --- Skip link (accesibilidad) --- */
.sdc-skip-link {
    position: absolute;
    top: -100px; left: 0;
    background: var(--sdc-ink);
    color: var(--sdc-white);
    padding: var(--sdc-space-3) var(--sdc-space-4);
    border-radius: 0 0 var(--sdc-radius) 0;
    z-index: var(--sdc-z-modal);
    text-decoration: none;
    font-weight: 600;
}
.sdc-skip-link:focus { top: 0; }

/* --- Campos de fecha en iPhone ---
   Safari de iOS dibuja los <input type="date"> con su propio estilo: no respeta
   el alto ni el ancho del resto de los campos (quedan mas altos y se salen de la
   tarjeta) y, vacios, no muestran nada. Sin el estilo nativo se comportan como
   cualquier otro campo. */
input[type="date"].sdc-input {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    min-width: 0;
    max-width: 100%;
    line-height: normal;
}
input[type="date"].sdc-input::-webkit-date-and-time-value { text-align: left; margin: 0; min-height: 1.2em; }
/* Solo iOS: texto de ayuda mientras el campo esta vacio (en el resto de los
   navegadores el campo ya muestra "dd/mm/aaaa"). */
@supports (-webkit-touch-callout: none) {
    input[type="date"].sdc-input[data-placeholder]:invalid::before { content: attr(data-placeholder); color: var(--sdc-ink-mute); }
}