/*==================================================
  CÁMARA DE COMERCIO
  TARJETAS DIGITALES
==================================================*/

/* RESET */

*,
*::before,
*::after{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

/* VARIABLES */

:root{

    --primary:#123d8d;
    --primary-light:#2f6de3;

    --gold:#d6b135;

    --bg:#eef3fb;

    --card:#ffffff;

    --text:#123d8d;

    --muted:#737d8c;

    --border:#e7edf8;

    --shadow-sm:0 6px 18px rgba(0,0,0,.06);

    --shadow-md:0 18px 45px rgba(0,0,0,.10);

    --shadow-lg:0 28px 70px rgba(0,0,0,.15);

    --radius:22px;

    --transition:.30s ease;

}

/* BASE */

html{

    scroll-behavior:smooth;

}

body{

    font-family:"Inter",sans-serif;

    background:linear-gradient(
        180deg,
        #ffffff,
        var(--bg)
    );

    color:var(--text);

    min-height:100vh;

    -webkit-font-smoothing:antialiased;

}

img{

    max-width:100%;

    display:block;

}

a{

    text-decoration:none;

}

/*=========================
HEADER
=========================*/

.hero{

    position:relative;

    height:255px;

    overflow:hidden;

    background:

    linear-gradient(
        135deg,
        var(--primary),
        var(--primary-light)
    );

}

.hero::before{

    content:"";

    position:absolute;

    inset:0;

    opacity:.08;

    background-image:

    radial-gradient(#fff 1px,transparent 1px);

    background-size:26px 26px;

}

.hero-content{

    position:relative;

    z-index:2;

    display:flex;

    flex-direction:column;

    align-items:center;

    padding-top:22px;

}

.logo{

    width:120px;

    margin-bottom:14px;

}

.hero h2{

    color:#fff;

    text-align:center;

    font-size:26px;

    line-height:1.15;

    font-weight:800;

}

.hero h2 span{

    display:block;

    font-size:30px;

}

.gold-line{

    width:85px;

    height:4px;

    background:var(--gold);

    border-radius:50px;

    margin-top:18px;

}

.wave{

    position:absolute;

    bottom:0;

    width:100%;

    height:110px;

}

/*=========================
FOTO
=========================*/

.profile{

    position:relative;

    display:flex;

    justify-content:center;

    margin-top:-82px;

    z-index:20;

}

.profile::before{

    content:"";

    position:absolute;

    width:260px;

    height:260px;

    border-radius:50%;

    background:

    radial-gradient(

        rgba(214,177,53,.20),

        transparent 70%

    );

    top:18px;

    z-index:-1;

}

.frame{

    background:#fff;

    padding:8px;

    border-radius:28px;

    box-shadow:var(--shadow-lg);

    transition:var(--transition);

}

.frame:hover{

    transform:translateY(-5px);

}

.photo{

    width:230px;

    height:295px;

    object-fit:cover;

    object-position:center top;

    border-radius:20px;

}

/*=========================
CONTENEDOR
=========================*/

.container{

    width:min(430px,92%);

    margin:auto;

    padding:24px 0 50px;

}
/*==================================================
  TARJETA PRINCIPAL
==================================================*/

.info-card{

    position:relative;

    background:var(--card);

    border-radius:30px;

    padding:35px 30px;

    box-shadow:var(--shadow-md);

    overflow:hidden;

}

.info-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:5px;

    background:linear-gradient(
        90deg,
        var(--gold),
        #f0d06a
    );

}

.decor{

    width:85px;

    height:4px;

    border-radius:50px;

    background:var(--gold);

    margin:0 auto 25px;

}

.info-card h1{

    text-align:center;

    font-size:42px;

    color:var(--primary);

    font-weight:800;

    line-height:1.1;

}

.cargo{

    margin-top:12px;

    text-align:center;

    color:var(--gold);

    font-size:22px;

    font-weight:700;

}

.empresa{

    margin-top:8px;

    margin-bottom:35px;

    text-align:center;

    color:var(--muted);

    font-size:18px;

    line-height:1.5;

}

/*==================================================
  CONTACTOS
==================================================*/

.contact-list{

    display:flex;

    flex-direction:column;

    gap:16px;

}

.contact-item{

    display:flex;

    align-items:center;

    gap:16px;

    padding:18px;

    border-radius:18px;

    border:1px solid var(--border);

    background:#f9fbff;

    transition:var(--transition);

    color:inherit;

}

.contact-item:hover{

    background:#fff;

    transform:translateY(-4px);

    box-shadow:var(--shadow-sm);

}

.icon{

    width:56px;

    height:56px;

    flex-shrink:0;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:16px;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--primary-light)
    );

    color:white;

    font-size:22px;

}

.info{

    flex:1;

}

.info span{

    display:block;

    font-size:13px;

    color:#8b96a8;

    margin-bottom:4px;

}

.info strong{

    display:block;

    font-size:18px;

    font-weight:700;

    color:var(--primary);

    word-break:break-word;

}

.arrow{

    width:42px;

    height:42px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:12px;

    color:var(--primary);

    background:#edf4ff;

    transition:var(--transition);

}

.contact-item:hover .arrow{

    background:var(--primary);

    color:white;

}

/*==================================================
  TITULOS OPCIONALES
==================================================*/

.section-title{

    margin:35px 0 18px;

    font-size:18px;

    font-weight:700;

    color:var(--primary);

}
/*==================================================
  BOTONES
==================================================*/

.buttons{
    display:flex;
    flex-direction:column;
    gap:18px;
    margin-top:35px;
}

.btn{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    width:100%;
    padding:18px;
    border-radius:18px;
    text-decoration:none;
    font-size:18px;
    font-weight:700;
    transition:.3s;
    cursor:pointer;
}

.btn i{
    font-size:20px;
}

.primary{

    color:#fff;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--primary-light)
    );

    box-shadow:

        0 20px 40px rgba(18,61,141,.25);

}

.primary:hover{

    transform:translateY(-4px);

    box-shadow:

        0 30px 60px rgba(18,61,141,.35);

}

.secondary{

    color:var(--primary);

    background:#fff;

    border:2px solid var(--primary);

}

.secondary:hover{

    background:#f4f8ff;

    transform:translateY(-4px);

}

.whatsapp{

    color:#fff;

    background:linear-gradient(
        135deg,
        #1fb85c,
        #28d366
    );

    box-shadow:

        0 18px 35px rgba(37,211,102,.30);

}

.whatsapp:hover{

    transform:translateY(-4px);

}

/*==================================================
  QR
==================================================*/

.qr{

    display:flex;

    justify-content:center;

    margin-top:35px;

}

.qr img{

    width:140px;

    background:#fff;

    padding:10px;

    border-radius:18px;

    box-shadow:var(--shadow-sm);

}

/*==================================================
  FOOTER
==================================================*/

.footer{

    margin-top:40px;

    text-align:center;

    padding-bottom:50px;

}

.footer img{

    width:80px;

    margin-bottom:12px;

    opacity:.95;

}

.footer p{

    color:var(--muted);

    font-size:14px;

    line-height:1.6;

}

/*==================================================
  ANIMACIONES
==================================================*/

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(25px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.hero,
.profile,
.info-card{

    animation:fadeUp .8s ease;

}

.contact-item{

    animation:fadeUp .8s ease;

}

.contact-item:nth-child(2){

    animation-delay:.1s;

}

.contact-item:nth-child(3){

    animation-delay:.2s;

}

.contact-item:nth-child(4){

    animation-delay:.3s;

}

/*==================================================
  SCROLLBAR
==================================================*/

::-webkit-scrollbar{

    width:8px;

}

::-webkit-scrollbar-thumb{

    background:rgba(18,61,141,.35);

    border-radius:20px;

}

::-webkit-scrollbar-track{

    background:#eef3fb;

}

/*==================================================
  RESPONSIVE
==================================================*/

@media (max-width:768px){

.hero{

    height:235px;

}

.logo{

    width:95px;

}

.hero h2{

    font-size:22px;

}

.hero h2 span{

    font-size:24px;

}

.profile{

    margin-top:-75px;

}

.photo{

    width:195px;

    height:255px;

}

.info-card{

    padding:28px 22px;

}

.info-card h1{

    font-size:34px;

}

.cargo{

    font-size:19px;

}

.empresa{

    font-size:16px;

}

.icon{

    width:48px;

    height:48px;

}

.info strong{

    font-size:16px;

}

.action{

    font-size:16px;

    padding:16px;

}

.qr img{

    width:120px;

}

}

@media (max-width:420px){

.container{

    width:94%;

}

.info-card{

    padding:24px 18px;

}

.hero{

    height:220px;

}

.photo{

    width:180px;

    height:235px;

}

.info-card h1{

    font-size:30px;

}

}