/* TomaPlay — estilo compartido por todas las páginas.
   Tonos cálidos claros, nada de fluorescentes, igual que el resto
   de la familia Toma (TomaShoot, TomaFoton). */

@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@600;700&family=Quicksand:wght@400;500;600;700&display=swap');

:root {
    --crema: #FBF3E7;
    --crema-suave: #F3E5D3;
    --marron-900: #3E2C1C;
    --marron-700: #6B4A32;
    --marron-500: #A97C50;
    --terracota: #D98B4A;
    --terracota-suave: #F0C29A;
    --verde-ok: #6FA968;
    --rojo-no: #C9564F;
    --blanco: #FFFDF9;
    --sombra: 0 4px 14px rgba(62, 44, 28, 0.12);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: 'Quicksand', sans-serif;
    background: var(--crema);
    color: var(--marron-900);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .manuscrito {
    font-family: 'Caveat', cursive;
    font-weight: 700;
    line-height: 1.1;
    margin: 0 0 0.3em;
}

h1 { font-size: 3.2rem; }
h2 { font-size: 2.3rem; color: var(--marron-700); }

p { line-height: 1.6; }

a { color: var(--terracota); }

.contenedor {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.boton {
    display: inline-block;
    font-family: 'Quicksand', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    border: none;
    border-radius: 999px;
    padding: 0.85rem 1.8rem;
    background: var(--terracota);
    color: var(--blanco);
    cursor: pointer;
    box-shadow: var(--sombra);
    transition: transform 0.15s ease, background 0.15s ease;
    text-decoration: none;
    text-align: center;
}
.boton:hover { transform: translateY(-2px); background: var(--marron-700); }
.boton:disabled { background: var(--terracota-suave); cursor: not-allowed; transform: none; }

.boton-secundario {
    background: transparent;
    color: var(--marron-700);
    border: 2px solid var(--marron-500);
    box-shadow: none;
}
.boton-secundario:hover { background: var(--crema-suave); }

.boton-gigante {
    font-size: 1.4rem;
    padding: 1.3rem 2.5rem;
    width: 100%;
}

.tarjeta {
    background: var(--blanco);
    border-radius: 20px;
    box-shadow: var(--sombra);
    padding: 1.5rem;
}

.pastilla {
    display: inline-block;
    background: var(--crema-suave);
    color: var(--marron-700);
    border-radius: 999px;
    padding: 0.3rem 0.9rem;
    font-size: 0.9rem;
    font-weight: 600;
}