.hero{

    background:
    linear-gradient(
        135deg,
        var(--vino-principal),
        var(--vino-secundario)
    );

    color:white;

    min-height:85vh;

    display:flex;

    align-items:center;

    padding:80px 5%;
}

.hero-container{

    width:100%;

    max-width:1400px;

    margin:auto;

    display:grid;

    grid-template-columns:1.2fr 1fr;

    gap:60px;

    align-items:center;
}

.hero-badge{

    display:inline-block;

    padding:10px 18px;

    border-radius:30px;

    background:rgba(255,255,255,.10);

    border:1px solid rgba(255,255,255,.20);

    color:var(--dorado-principal);

    margin-bottom:25px;

    font-weight:600;
}

.hero-content h1{

    font-size:4rem;

    line-height:1.1;

    margin-bottom:25px;
}

.hero-content h1 span{

    display:block;

    color:var(--dorado-principal);
}

.hero-content p{

    font-size:1.15rem;

    line-height:1.8;

    margin-bottom:30px;
}

.hero-features{

    display:flex;

    flex-wrap:wrap;

    gap:15px;

    margin-bottom:35px;
}

.hero-features span{

    color:#f3e6c0;
}

.hero-buttons{

    display:flex;

    gap:15px;
}

.hero-panel{

    background:rgba(255,255,255,.08);

    border:1px solid rgba(255,255,255,.15);

    border-radius:20px;

    padding:30px;

    backdrop-filter:blur(10px);
}

.hero-panel h3{

    margin-bottom:25px;

    color:var(--dorado-principal);
}

.dogs-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:15px;

    margin-bottom:25px;
}

.dog-card{

    background:white;

    color:#333;

    border-radius:15px;

    overflow:hidden;

    box-shadow:0 8px 20px rgba(0,0,0,.15);

    text-align:center;

    padding-bottom:15px;
}

.dog-card img{

    width:100%;

    height:140px;

    object-fit:cover;
}

.dog-card h4{

    margin-top:12px;
}

.dog-status{

    display:inline-block;

    margin-top:10px;

    padding:5px 12px;

    border-radius:20px;

    background:#b3264f;

    color:white;

    font-size:.8rem;
}

.success{

    background:#198754;
}

.hero-search{

    display:flex;

    gap:10px;
}

.hero-search input{

    flex:1;

    border:none;

    border-radius:10px;

    padding:15px;
}

.hero-search button{

    background:var(--dorado-principal);

    border:none;

    border-radius:10px;

    padding:15px 25px;

    cursor:pointer;

    font-weight:700;
}
/* Botones principales del inicio: visibles y fáciles de identificar. */
.hero-buttons a,
.btn-primary,
.btn-secondary{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:48px;
    padding:14px 22px;
    border-radius:10px;
    font-weight:700;
    line-height:1.2;
    text-align:center;
}

.hero-buttons .btn-primary,
.btn-hero-main{
    background:var(--dorado-principal);
    color:var(--blanco);
    border:2px solid var(--dorado-principal);
    box-shadow:0 8px 18px rgba(0,0,0,.18);
}

.hero-buttons .btn-secondary,
.btn-hero-alt{
    background:var(--blanco);
    color:var(--vino-principal);
    border:2px solid var(--blanco);
}

.hero-buttons .btn-primary:hover,
.btn-hero-main:hover{
    background:var(--dorado-hover);
    border-color:var(--dorado-hover);
}

.hero-buttons .btn-secondary:hover,
.btn-hero-alt:hover{
    background:#f4ead2;
    color:var(--vino-hover);
}

/* Mantiene las fotografías dentro de su tarjeta sin deformar el layout. */
.dog-card{
    min-width:0;
}

.dog-card img{
    aspect-ratio:4 / 3;
    height:auto;
    max-height:150px;
    object-fit:cover;
    object-position:center;
}

@media(max-width:900px){
    .hero-container{
        grid-template-columns:1fr;
    }

    .hero-buttons{
        flex-direction:column;
    }

    .hero-buttons a{
        width:100%;
    }
}

@media(max-width:640px){
    .dogs-grid{
        grid-template-columns:1fr;
    }

    .dog-card img{
        max-height:220px;
    }
}

.recent-reports-actions{
    display:flex;
    justify-content:center;
    margin-top:18px;
}
.recent-reports-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:44px;
    padding:12px 18px;
    border-radius:8px;
    background:var(--vino-principal);
    color:var(--blanco);
    font-weight:700;
    text-decoration:none;
    box-shadow:0 8px 18px rgba(0,0,0,.12);
}
.recent-reports-btn:hover{
    background:var(--vino-hover);
}

@media(max-width:640px){
    .recent-reports-btn{
        width:100%;
    }
}

.dog-card-link{
    display:block;
    text-decoration:none;
}
.dog-card small{
    display:block;
    margin-top:6px;
    color:#666;
    line-height:1.35;
}
.dog-card-sin-folio .dog-status{
    background:#fff3cd;
    color:#7a5a00;
}


/* Tarjetas recientes compactas: resumen visual, no ficha completa. */
.dog-card{
    min-height:238px;
    display:flex;
    flex-direction:column;
}

.dog-card-photo{
    position:relative;
    overflow:hidden;
    background:#f4f4f4;
}

.dog-card img{
    width:100%;
    height:165px;
    aspect-ratio:auto;
    object-fit:cover;
    object-position:center;
    flex:0 0 auto;
    transition:transform .25s ease;
}

.dog-card-link:hover img{
    transform:scale(1.04);
}

.dog-card-body{
    min-height:72px;
    padding:10px 12px 12px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:4px;
}
.dog-card h4{
    margin:0;
    min-height:22px;
    display:-webkit-box;
    -webkit-line-clamp:1;
    -webkit-box-orient:vertical;
    overflow:hidden;
    font-size:.98rem;
    line-height:1.2;
}
.dog-card span,
.dog-card small{
    max-width:100%;
    display:-webkit-box;
    -webkit-line-clamp:1;
    -webkit-box-orient:vertical;
    overflow:hidden;
    overflow-wrap:anywhere;
}
.dog-card span{
    font-weight:700;
    color:var(--vino-principal);
    font-size:.82rem;
}
.dog-card small{
    margin-top:0;
    min-height:18px;
    font-size:.78rem;
}
.dog-card .dog-status{
    position:absolute;
    left:10px;
    bottom:10px;
    margin:0;
    max-width:100%;
    white-space:normal;
    box-shadow:0 4px 12px rgba(0,0,0,.22);
}