/* === Webfont local Tacural === */
@font-face{
  font-family: "TacuralBrush";
  src:
    url("../fonts/BRUSHSCI.woff2") format("woff2"),
    url("../fonts/BRUSHSCI.woff")  format("woff"),
    url("../fonts/BRUSHSCI.ttf")   format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ==== Variables === */
:root{
  --brand-accent: #e11c1c;

  /* Botones institucionales */
  --btn-bg-top:   #c4312e;
  --btn-bg-bot:   #a92624;
  --btn-text:     #ffffff;
  --btn-glow:     rgba(196,49,46,.55);
  --btn-radius:   28px;

  /* Botón con ancho inteligente */
  --btn-width: clamp(220px, 70vw, 320px);

  /* Layout */
  --content-max: 520px;
  --logo-height: 120px;
  --section-offset: clamp(16px, 6vh, 30px);

  --bg-overlay: linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,.55));
  --bg-image: url(../img/bg.jpg);
  --text: #fff;
}

/* ==== Base ==== */
*,*::before,*::after{ box-sizing: border-box; }
html,body{ height:100%; }

body{
  margin:0;
  color:var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  min-height:100dvh;

  background-image: var(--bg-overlay), var(--bg-image);
  background-position: center;
  background-size: cover;
  background-attachment: fixed;

  display:grid;
  place-items:center;
  padding:24px;
}

/* ==== Tarjeta principal ==== */
main.card{
  width:100%;
  max-width:var(--content-max);
  display:grid;
  gap:18px;
  padding:clamp(18px,3vw,28px);
  border-radius:24px;
  backdrop-filter: blur(8px);
  box-shadow: 0 20px 40px rgba(0,0,0,.35);
}

/* ==== Marca ==== */
.brand{
  display:grid;
  justify-items:center;
  gap:14px;
  text-align:center;
}

.brand img{
  height:var(--logo-height);
  width:auto;
  object-fit:contain;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,.35));
}

.slogan{
  margin:0;
  font-family:"TacuralBrush","Brush Script MT",cursive;
  font-weight:400;
  font-size:clamp(22px,5.4vw,36px);
  color:#e11c1c;
  -webkit-text-stroke: 5px #fff;
  text-shadow:0 1px 1px rgba(0,0,0,.25);
  paint-order: stroke fill;
  white-space: nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* ==== Botón institucional === */
.btn, .btn-descargar{
  --_bg: linear-gradient(180deg, var(--btn-bg-top), var(--btn-bg-bot));
  background: var(--_bg);
  color: var(--btn-text);
  border: none;
  border-radius: var(--btn-radius);
  padding: 12px 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  font-weight: 700;
  text-decoration: none;
  width: auto;
  min-width: var(--btn-width);
  box-shadow: 0 10px 22px rgba(0,0,0,.30);
  transition: transform .15s ease, box-shadow .22s ease, filter .22s ease;
}

.btn i,
.btn-descargar i{
    font-size:1.05em;
}

.btn:hover,
.btn-descargar:hover{
  transform: translateY(-1px);
  box-shadow:
    0 0 24px var(--btn-glow),
    0 12px 28px rgba(0,0,0,.28);
  filter: brightness(1.04);
}

.btn:active,
.btn-descargar:active{
  transform: translateY(1px);
}

/* ==== Formularios ==== */
.field { display:grid; gap:6px; }
.label{ font-weight:700; font-size:.95rem; }

.input, .select, .textarea {
  background: rgba(255,255,255,.9);
  color:#111;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.08);
  padding:12px 14px;
  width:100%;
  outline:none;
  transition: box-shadow .15s ease, border-color .15s ease;
}

.input:focus, .select:focus, .textarea:focus{
  box-shadow: 0 0 0 3px rgba(225,28,28,.25);
  border-color: rgba(225,28,28,.7);
}

.form-actions{
  display:flex !important;
  justify-content:center;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

/* ==== Biblioteca ==== */
.contenedor-recursos{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(220px,1fr));
  gap:18px;
  margin-top:25px;
}

.card-recurso{
   background: #ffffff20;
   border: 1px solid #ffffff15;
   padding: 14px;
   border-radius: 10px;
   backdrop-filter: blur(4px);
   display:flex;
   flex-direction:column;
   justify-content:space-between;
}

.card-recurso .thumb img{
   width:100%;
   height:150px;
   object-fit: cover;
   border-radius:6px;
   background:#222;
}

.card-recurso .info{
   margin-top:10px;
   color:#fff;
}

.card-recurso .info h4{
   margin:0;
   font-size:15px;
}

/* ==== Footer ==== */
.footer{
  text-align:center;
  opacity:.8;
  font-size:12px;
}

.footer a{
  color:#fff;
  text-decoration:none;
}

.btn-volver {
    display: flex !important;
    align-items: center;
    justify-content: center;

    width: 100% !important;
    max-width: 100% !important;
    padding: 14px 20px !important;

    background: rgba(255, 255, 255, 0.22) !important;
    color: #fff !important;

    border-radius: 40px !important;
    text-decoration: none !important;
    font-size: 17px !important;
    font-weight: 500 !important;

    backdrop-filter: blur(4px);
    margin-top: 12px;

    border: none !important;
    box-shadow: none !important;
}

.btn-volver i {
    margin-right: 10px;
    font-size: 20px !important;
}

.btn-volver:hover {
    background: rgba(255, 255, 255, 0.32) !important;
}


/* ===========================================================
   === RESPONSIVE REAL (CORREGIDO) ===
   =========================================================== */

/* === MOBILE FIX: Opción B – Card centrada === */
@media (max-width: 480px){

    body{
        display:block !important;
        padding: 0 !important;
    }

    main.card{
        width:95%;
        max-width:95%;
        margin:12px auto;
        border-radius:20px;
        padding-left:16px;
        padding-right:16px;
    }

    .contenedor-recursos{
        grid-template-columns:1fr !important;
        gap:16px;
    }

    .card-recurso .thumb img{
        height:150px !important;
        object-fit:contain !important;
    }

    /* Botones se adaptan fluidamente */
    .btn,
    .btn-descargar{
        min-width: 0 !important;
        width:100% !important;
    }
}

/* Teléfonos muy pequeños (<380px) */
@media (max-width: 380px){
    .btn,
    .btn-descargar{
        border-radius:22px;
    }

    .card-recurso .thumb img{
        height:130px !important;
    }
}

/* Tablets y pantallas medias */
@media (min-width:640px) and (max-width:1023px){
  .contenedor-recursos{
      grid-template-columns: repeat(auto-fill, minmax(200px,1fr));
      gap:16px;
  }
}

/* Pantallas grandes */
@media (min-width:1024px) and (max-width:1399px){
  .contenedor-recursos{
      grid-template-columns: repeat(auto-fill, minmax(240px,1fr));
  }
}

/* Pantallas muy grandes */
@media (min-width:1400px){
  .contenedor-recursos{
      grid-template-columns: repeat(auto-fill, minmax(260px,1fr));
      gap:22px;
  }
  .card-recurso .thumb img{
      height:180px;
  }
}

/* Hover elegante */
@media (hover:hover){
  .card-recurso{
      transition: transform .20s ease, box-shadow .25s ease;
  }
  .card-recurso:hover{
      transform: translateY(-4px);
      box-shadow: 0 10px 26px rgba(0,0,0,.35);
  }
}

/* === Fix para móviles: permitir blur real === */
@media (max-width: 768px) {

    body {
        background-attachment: scroll !important;
    }

    main.card {
        background: rgba(0,0,0,0.35); /* mantiene efecto vidrio */
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }
}