@font-face {
    font-family: "Parkinsans";
    src: url(fonts/Parkinsans-VariableFont_wght.ttf);
}

/* /////////////////////////////////////////////////// */

*{
    font-family: "Parkinsans", sans-serif;
}

body{
    background-image: url(img/fondo.png);
    background-size: 300px;
    background-attachment: fixed;
}

header{
    background-color: #ffcb05;
}

header img{
    max-height: 150px;
}

.nav-link{
    color:  #232c5f;
}

.nav-link:hover{
    color: #ed1c24;
}

.btn{
    background-color: #232c5f;
    color: white;
}

.btn:hover{
    background-color: #ed1c24;
    color: white;
}

#banner{
    background-image: url(img/banner.jpg);
}

#banner div{
    height: 70vh;
}

h1{
    background-color: #ed1c24;
    border: 10px solid #232c5f;
    color: white;
    font-weight: bold;
    padding: 8px 0;
    margin-bottom: 0;
}

#banner, #sobres, #cartas, #torneos{
    margin-bottom: 50px;
}

h2{
    color: #ed1c24;
}

#sobres img{
    margin: 20px 0;
}

#cartas{
    background-image: url(img/cartas.jpg);
    background-attachment: fixed;
    padding: 50px 0;
}

.img-thumbnail{
    border-color:#232c5f;
}

footer{
    background-color: #232c5f;
    color: white;
}
# Cheatsheet — Parcial DIW (Bootstrap desde letra)

Basado en el patrón de tus 3 letras (Astro Tech, Balatro, Stranger Things). Todas piden lo mismo: replicar un sitio a partir de specs de tabla + colores/fuentes, con grilla 100% Bootstrap.

---

## 1. Estructura típica de la letra

- **Tabla de comportamiento por breakpoint** (Mobile / SM-MD / LG-XL-XXL o XS-SM / MD / LG-XL) → te dice columnas, alineación, visibilidad por sección.
- **Especificaciones** → colores, fuentes, tamaños, bordes, paddings/margins, imágenes, enlaces/hover.
- **Muestras a escala real** → para medir a ojo si algo no está en la tabla.

**Orden de trabajo recomendado:**
1. Leer letra completa una vez, sin tocar código.
2. Armar el HTML semántico primero (header, main, section por bloque, footer) SIN clases de Bootstrap todavía.
3. Meter `container`/`row`/`col` según la tabla, breakpoint por breakpoint.
4. Recién ahí estilos propios (colores, fuentes, bordes) en `estilos.css`.
5. Dejar `estilos.css` para lo que Bootstrap no resuelve (nunca reinventar lo que ya es una clase de Bootstrap).

---

## 2. Breakpoints Bootstrap → columnas

Bootstrap grid = 12 columnas. Los prefijos de columna:

| Breakpoint letra | Ancho mínimo | Prefijo Bootstrap |
|---|---|---|
| XS (default) | <576px | `col-` |
| SM | ≥576px | `col-sm-` |
| MD | ≥768px | `col-md-` |
| LG | ≥992px | `col-lg-` |
| XL | ≥1200px | `col-xl-` |
| XXL | ≥1400px | `col-xxl-` |

**Regla clave:** una vez que fijás un valor en un breakpoint, se mantiene para los mayores hasta que lo pises con otro. Por eso mobile-first: definís XS y después solo *sobreescribís* lo que cambia en SM/MD/LG.

**Ejemplo típico de tabla → código:**

> "Logo: 6 columnas (mobile) / 2 columnas (SM/MD en adelante)"
```html
<div class="col-6 col-sm-2">...</div>
```

> "Nav: No visible (mobile) / 8 columnas (LG+)"
```html
<nav class="d-none d-lg-flex col-lg-8">...</nav>
```

> "Icono Menú: columna auto (mobile) / No visible (SM+)"
```html
<div class="col-auto d-sm-none">...</div>
```

---

## 3. Visibilidad ("No visible" / "visible")

- Ocultar hasta cierto breakpoint: `d-none d-md-block` (oculto en XS/SM, visible desde MD)
- Ocultar desde cierto breakpoint: `d-block d-md-none` (visible en XS/SM, oculto desde MD)
- Si es un elemento flex (nav, contenedor con `d-flex`), usar el display correspondiente en vez de `block`: `d-none d-lg-flex`.

---

## 4. Alineación horizontal / vertical (dentro de `row` o `d-flex`)

| Español (letra) | Clase Bootstrap |
|---|---|
| Alineación horizontal: `center` | `justify-content-center` |
| Alineación horizontal: `between` | `justify-content-between` |
| Alineación horizontal: `end` | `justify-content-end` |
| Alineación horizontal: `start` | `justify-content-start` |
| Alineación vertical: `center` | `align-items-center` |
| Alineación vertical: `end` (alineados al final) | `align-items-end` |
| Alineación vertical: `start` | `align-items-start` |
| Elementos centrados en ambos ejes | `d-flex justify-content-center align-items-center` |

**Texto** centrado/alineado (no flex): `text-center`, `text-start`, `text-end`, `text-md-start`, etc.

---

## 5. Dirección flex (column/row)

> "Comportamiento flex: column (mobile) / row (LG+)"
```html
<div class="d-flex flex-column flex-lg-row">...</div>
```

Recordá: si el contenedor es un `row` de Bootstrap, ya es flex por defecto en fila; si la letra pide que se apile en mobile, hay que agregar explícitamente `flex-column flex-md-row` (un `row` normal con `col-12` ya apila solo, pero si el contenedor NO es un `row`/`col`, necesitás `d-flex` + `flex-*`).

---

## 6. Contenedores: ancho fijo vs 100%

| Letra dice | Clase |
|---|---|
| "Ancho de contenido: 100%" | `container-fluid` |
| "Ancho de contenido: ancho fijo" | `container` |
| "Ancho de fondo: 100%" + "Ancho de contenido: ancho fijo" | Div exterior `w-100` (o full width con bg) conteniendo un `container` adentro |

Patrón típico para banner con imagen de fondo a **todo el ancho** pero contenido centrado:
```html
<section class="w-100" style="background-image:url(...);">
  <div class="container">
    ...contenido...
  </div>
</section>
```

---

## 7. Spacing (padding / margin) — escala Bootstrap

Bootstrap usa una escala 0–5 que equivale a múltiplos de `0.25rem`:

| Clase (nivel) | rem | px aprox |
|---|---|---|
| `-0` | 0 | 0px |
| `-1` | 0.25rem | 4px |
| `-2` | 0.5rem | 8px |
| `-3` | 1rem | 16px |
| `-4` | 1.5rem | 24px |
| `-5` | 3rem | 48px |

Prefijos: `p-` (padding todos los lados), `px-`/`py-` (horizontal/vertical), `pt-`/`pb-`/`ps-`/`pe-` (top/bottom/start/end). Igual con `m-` para margin.

> "Padding vertical: 3 (1rem)" → `py-3`
> "Margen inferior 5 (3rem)" → `mb-5`
> "Padding: 20px" (valor específico no estándar) → si no matchea la escala de Bootstrap, va en `estilos.css` como clase propia.

**Ojo:** cuando la letra da un valor en **px exacto** que no es un múltiplo limpio de la escala (ej. 20px, 70px, 75px), normalmente NO es una utility class de Bootstrap — es un valor a definir en tu CSS propio. Cuando la letra da el valor "3 (1rem)" con el número Bootstrap explícito entre paréntesis, ahí sí usás la utility class directa.

---

## 8. Otras clases útiles que suelen aparecer

- `img-fluid` → imagen responsiva/adaptable (lo que la letra llama "adaptable")
- `rounded` / `rounded-circle` → bordes redondeados ("borde redondeado")
- `border` `border-white` → bordes con color (combinar con CSS propio si el color no es de la paleta Bootstrap)
- `list-unstyled` → sacar viñetas por defecto (si la letra pide viñetas SÍ, no uses esto, dejá el `<ul>` normal o `list-group`)
- `gx-*` / `gy-*` → gutters (espacio entre columnas), si la letra menciona separación entre elementos de una fila
- `mx-auto` → centrar un bloque de ancho fijo horizontalmente
- `vh-100`, o `style="height:75vh"` → alturas en vh cuando la letra da "Banner: 75vh de altura" (esto casi siempre va en CSS propio porque Bootstrap no trae utilities de vh custom)

---

## 9. Checklist de HTML semántico (te lo piden siempre)

- `<header>` para encabezado
- `<nav>` para el menú (con `<a href="#seccion">` si pide "navegable mediante anclas")
- `<main>` envolviendo el contenido central
- `<section>` por cada bloque temático de la letra (banner, productos, etc.), idealmente con `id` que coincida con los anchors del nav
- `<footer>` para el pie
- `<article>` si son ítems repetidos tipo cards/productos/testimonios
- `<figure>`/`<figcaption>` opcional para imágenes con texto asociado

---

## 10. Tips generales de mecánica del parcial

- Guardar/trabajar en el disco que indique la letra (típicamente D, no C) — si la máquina reinicia perdés todo en C.
- Renombrar la carpeta de la plantilla como indica la letra (`Nombre_Apellido_NroEstudiante`) ANTES de laburar adentro.
- Antes de subir: comprimir, y verificar que la entrega tenga TODOS los archivos (HTML, CSS, imágenes, favicon si lo pide).
- Después de subir: bajar de nuevo la entrega y chequear que esté completa — es parte de la letra en tus últimos parciales.
- Favicon, title y meta descripción son puntos que se olvidan fácil y son gratis si los hacés bien.
- Como el examen es escrito/handwritten en tus parciales reales, priorizá la lógica de estructura y clases correctas por sobre la sintaxis perfecta (cerrar tags, etc.) — pero seguí escribiendo limpio, ayuda a no perderte vos mismo.

---

## 11. Errores típicos a evitar (de tus sesiones anteriores)

- Confundir `justify-content` (eje principal/horizontal en row) con `align-items` (eje cruzado/vertical) — no son intercambiables.
- Olvidar el prefijo de breakpoint y aplicar el mismo `col-` a todos los tamaños cuando la tabla pide valores distintos por breakpoint.
- Usar `d-none`/`d-block` sin considerar que el elemento es flex (te rompe el layout al reaparecer).
- Mezclar unidades: si la letra da rem, usar rem; si da px, usar px — no convertir de más y arriesgarte a un valor distinto al esperado.
- Dejar clases de Bootstrap que no coinciden con el breakpoint (ej: usar `col-md-6` cuando la letra pedía el cambio en `lg`, no en `md`).