/* ============================================================
   IGUAL QUE proveedores.php — mismas variables, misma fuente
   ============================================================ */
:root {
    --purple:  #7B2FBE;
    --pink:    #E91E8C;
    --yellow:  #FFD93D;
    --teal:    #00BFA5;
    --blue:    #2979FF;
    --orange:  #FF6B35;
    --white:   #FFFFFF;
    --bg:      #F7F3FF;
    --dark:    #1A1A2E;
    --text:    #3D3D5C;
    --shadow:  0 8px 32px rgba(123,47,190,0.13);
}

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

body {
    font-family: 'Nunito', sans-serif !important;
    color: var(--text);
    background: var(--white);
    overflow-x: hidden;
    padding-top: 0;
}

.container { max-width:1180px; margin:0 auto; padding:0 24px; }

/* ===== HERO — copia exacta de proveedores ===== */
.hero {
    background: var(--dark);
    padding: 100px 0 80px;
    position: relative; overflow: hidden; text-align: center;
}
.hero-blob {
    position: absolute; border-radius: 50%;
    filter: blur(80px); opacity: 0.3; pointer-events: none;
}
.blob-1 { width:500px; height:500px; background:var(--purple); top:-120px; right:-100px; }
.blob-2 { width:380px; height:380px; background:var(--orange); bottom:-80px; left:-80px; }
.blob-3 { width:260px; height:260px; background:var(--teal); top:35%; left:45%; opacity:.2; }
.hero-dots {
    position:absolute; inset:0;
    background-image: radial-gradient(circle, rgba(255,255,255,.06) 1px, transparent 1px);
    background-size: 36px 36px;
}
.hero .container { position:relative; z-index:2; }

.hero-tag {
    display:inline-flex; align-items:center; gap:8px;
    background: rgba(255,217,61,.15);
    border: 1px solid rgba(255,217,61,.35);
    color: var(--yellow); padding:7px 20px; border-radius:999px;
    font-size:.82rem; font-weight:800;
    letter-spacing:1.3px; text-transform:uppercase; margin-bottom:20px;
}
.hero h1 {
    font-family: 'Fredoka One', cursive;
    font-size: clamp(2.4rem, 5.5vw, 3.8rem);
    color: white; line-height:1.1; margin-bottom:16px;
}
.hero h1 span { color: var(--yellow); }
.hero p {
    color: rgba(255,255,255,.75);
    font-size:1.1rem; line-height:1.7;
    max-width:600px; margin:0 auto;
}

/* ===== DIAGONAL — igual proveedores ===== */
.diag {
    height:60px; background:var(--dark);
    clip-path: polygon(0 0,100% 0,100% 30%,0 100%);
    margin-bottom:-2px;
}

/* ===== LABELS / TÍTULOS — igual proveedores ===== */
.section-label {
    display:inline-flex; align-items:center; gap:8px;
    background: linear-gradient(135deg, var(--purple), var(--pink));
    color:white; padding:6px 18px; border-radius:999px;
    font-size:.8rem; font-weight:800;
    letter-spacing:1px; text-transform:uppercase; margin-bottom:14px;
}
.section-title {
    font-family:'Fredoka One', cursive;
    font-size: clamp(1.9rem,4vw,2.7rem);
    color:var(--dark); margin-bottom:10px;
}
.section-title .hl { color: var(--purple); }
.section-sub {
    color:var(--text); font-size:1rem;
    max-width:620px; line-height:1.65; margin-bottom:48px;
}

/* ===== SECCIÓN PRINCIPAL (fondo bg como proveedores) ===== */
.contacto-section { background:var(--bg); padding:70px 0; }

/* ===== GRID 2 COLUMNAS ===== */
.contact-grid {
    display:grid; grid-template-columns:1fr 1fr;
    gap:22px; margin-bottom:22px;
}

/* ===== TARJETA — MISMO estilo que .prov-card ===== */
.contact-card {
    background: white;
    border-radius:22px; overflow:hidden;
    box-shadow: var(--shadow);
    transition: all .35s ease;
    border: 2px solid transparent;
    display:flex; flex-direction:column;
}
.contact-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 48px rgba(123,47,190,.2);
    border-color: var(--purple);
}

/* Cabecera oscura igual que .prov-top premium */
.card-top {
    background: linear-gradient(135deg, var(--dark), #2D1B69);
    padding:28px 20px 22px; text-align:center; color:white;
    position:relative; overflow:hidden;
}
.card-top::before {
    content:''; position:absolute; inset:0;
    background: radial-gradient(ellipse at center, rgba(123,47,190,.35) 0%, transparent 70%);
}
.card-top-icon {
    width:68px; height:68px;
    background: rgba(255,255,255,.12);
    border: 2px solid rgba(255,255,255,.22);
    border-radius:18px;
    display:flex; align-items:center; justify-content:center;
    font-size:1.8rem; color:var(--yellow);
    margin:0 auto 14px; position:relative; z-index:2;
}
.card-top h3 {
    font-family:'Fredoka One', cursive;
    font-size:1.35rem; position:relative; z-index:2; margin-bottom:4px;
}
.card-top p { font-size:.85rem; opacity:.8; position:relative; z-index:2; }

.card-body { padding:22px 22px; display:flex; flex-direction:column; gap:0; flex-grow:1; }

/* Filas de info */
.info-row {
    display:flex; align-items:flex-start; gap:14px;
    padding:14px 0; border-bottom:1px solid #ede5f8;
}
.info-row:last-child { border-bottom:none; }

.info-icon {
    width:38px; height:38px; border-radius:11px; flex-shrink:0;
    background: linear-gradient(135deg, var(--purple), var(--pink));
    display:flex; align-items:center; justify-content:center;
    color:white; font-size:.9rem;
}
.info-text { flex:1; }
.info-text strong { display:block; color:var(--dark); font-size:.88rem; font-weight:800; margin-bottom:3px; }
.info-text span   { display:block; color:var(--text); font-size:.9rem; line-height:1.5; }

.tag-open {
    display:inline-flex; align-items:center; gap:5px;
    background:#E8F5E9; color:#2E7D32;
    padding:3px 11px; border-radius:999px;
    font-size:.76rem; font-weight:800; margin-top:6px;
}

/* Botones — misma forma que .btn-ser-prov / botones de proveedores */
.btn-row { display:flex; gap:10px; flex-wrap:wrap; margin-top:13px; }

.btn-action {
    height:38px; padding:0 18px; border-radius:999px;
    display:inline-flex; align-items:center; gap:8px;
    text-decoration:none; color:white;
    font-size:.85rem; font-weight:900;
    font-family:'Nunito', sans-serif;
    border:none; cursor:pointer;
    transition:all .3s; box-shadow:0 4px 12px rgba(0,0,0,.15);
}
.btn-action:hover { transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,.2); }
.btn-wsp  { background:linear-gradient(135deg,#25D366,#128C7E); }
.btn-call { background:linear-gradient(135deg, var(--purple), var(--pink)); }
.btn-mail { background:linear-gradient(135deg, var(--orange),#FF8E53); }
.btn-map  { background:linear-gradient(135deg, var(--teal),#00897B); }
.btn-map.full { width:100%; justify-content:center; margin-top:14px; height:44px; font-size:.95rem; border-radius:14px; }

/* Mapa */
.map-frame {
    width:100%; height:300px;
    border-radius:14px; overflow:hidden;
    border:2px solid #ede5f8;
    box-shadow:0 4px 16px rgba(0,0,0,.08);
    margin-bottom:16px;
}
.map-frame iframe { width:100%; height:100%; border:none; }

.map-chips {
    display:grid; grid-template-columns:1fr 1fr; gap:10px;
}
.map-chip {
    background:var(--bg); border-radius:12px; padding:11px 13px;
    display:flex; align-items:center; gap:9px;
    font-size:.84rem; color:var(--text);
    border:1px solid #ede5f8; transition:all .3s;
}
.map-chip:hover { background:#ede5f8; border-color:var(--purple); }
.map-chip .chip-emoji { font-size:1.3rem; flex-shrink:0; }
.map-chip strong { display:block; color:var(--dark); font-size:.8rem; margin-bottom:1px; }

/* ===== SECCIÓN HORARIOS — fondo blanco igual que ser-prov-section ===== */
.horarios-section { background:white; padding:70px 0; }

.horarios-grid {
    display:grid; grid-template-columns:repeat(4,1fr); gap:18px;
}

/* Horario card — igual que .prov-card pero más simple */
.horario-card {
    background:var(--bg); border-radius:20px; padding:26px 16px;
    text-align:center; border:2px solid transparent;
    transition:all .35s ease; position:relative; overflow:hidden;
    box-shadow:var(--shadow);
}
.horario-card::before {
    content:''; position:absolute; top:0; left:0; right:0; height:4px;
    background:linear-gradient(135deg, var(--purple), var(--pink));
    transform:scaleX(0); transition:transform .3s;
}
.horario-card:hover { transform:translateY(-7px); border-color:var(--purple); background:white; }
.horario-card:hover::before { transform:scaleX(1); }
.horario-card.today { background:white; border-color:var(--purple); box-shadow:0 12px 36px rgba(123,47,190,.2); }
.horario-card.today::before { transform:scaleX(1); }

.h-emoji  { font-size:2rem; display:block; margin-bottom:10px; }
.h-dia    { font-family:'Fredoka One', cursive; font-size:1.05rem; color:var(--purple); margin-bottom:8px; }
.h-horas  { font-size:1rem; font-weight:800; color:var(--dark); }
.h-badge  {
    display:inline-block; margin-top:10px;
    padding:3px 13px; border-radius:999px;
    font-size:.72rem; font-weight:900;
}
.h-badge.purple { background:linear-gradient(135deg, var(--purple), var(--pink)); color:white; }
.h-badge.green  { background:linear-gradient(135deg,#25D366,#128C7E); color:white; }
.h-badge.gray   { background:#ddd; color:var(--dark); }

/* ===== SECCIÓN FORMULARIO — fondo bg ===== */
.formulario-section { background:var(--bg); padding:70px 0; }

.form-wrapper {
    background:white; border-radius:22px;
    box-shadow:var(--shadow); padding:36px 36px;
    max-width:820px; margin:0 auto;
    border:2px solid transparent; transition:border-color .3s;
}
.form-wrapper:hover { border-color:rgba(123,47,190,.2); }

.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.form-group { display:flex; flex-direction:column; gap:7px; }
.form-group.full { grid-column:span 2; }

.form-group label { font-weight:800; color:var(--dark); font-size:.88rem; }
.form-group label span { color:var(--pink); margin-left:2px; }

.form-group input,
.form-group select,
.form-group textarea {
    padding:13px 16px;
    border:2px solid #e0d8f0; border-radius:14px;
    font-family:'Nunito', sans-serif; font-size:.95rem;
    color:var(--dark); background:var(--bg);
    transition:all .3s; outline:none;
    -webkit-appearance:none; appearance:none;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color:var(--purple);
    background:white;
    box-shadow:0 0 0 4px rgba(123,47,190,.1);
}
.form-group textarea { resize:vertical; min-height:115px; }
.form-group select {
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%237B2FBE' d='M7 7l3-3 3 3m0 6l-3 3-3-3'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right 14px center;
    background-size:18px; padding-right:42px; cursor:pointer;
    background-color:var(--bg);
}
.form-group select:focus { background-color:white; }

.form-submit { grid-column:span 2; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:4px; }
.form-note { font-size:.82rem; color:var(--text); display:flex; align-items:center; gap:6px; }

/* Botón submit — igual que .btn-ser-prov */
.btn-submit {
    display:inline-flex; align-items:center; gap:10px;
    background:#25D366; color:white;
    padding:15px 36px; border-radius:999px;
    font-weight:900; font-size:1.05rem;
    font-family:'Nunito', sans-serif;
    border:none; cursor:pointer; text-decoration:none;
    box-shadow:0 8px 24px rgba(37,211,102,.4); transition:all .3s;
    border:2px solid rgba(255,255,255,.2);
}
.btn-submit:hover { transform:translateY(-3px); box-shadow:0 14px 32px rgba(37,211,102,.5); }

.form-feedback {
    display:none; padding:14px 18px; border-radius:14px;
    margin-top:4px; font-weight:700; font-size:.9rem;
    align-items:center; gap:10px; grid-column:span 2;
}
.form-feedback.success { background:#E8F5E9; border:2px solid #66BB6A; color:#2E7D32; }
.form-feedback.error   { background:#FFF3E0; border:2px solid #FFA726; color:#E65100; }

/* ===== SECCIÓN "¿LISTO PARA CELEBRAR?" — igual que ser-prov-section ===== */
.cta-section { background:white; padding:70px 0; }

.cta-grid {
    display:grid; grid-template-columns:1fr 1fr; gap:48px;
    align-items:center; margin-top:48px;
}

.cta-text p {
    font-size:1rem; color:var(--text); line-height:1.75; margin-bottom:16px;
}
.cta-text p strong { color:var(--purple); }

.beneficios-list { list-style:none; margin-top:20px; display:flex; flex-direction:column; gap:12px; }
.beneficios-list li {
    display:flex; align-items:flex-start; gap:12px;
    font-size:.95rem; color:var(--text); line-height:1.5;
}
.bi {
    width:36px; height:36px; border-radius:10px; flex-shrink:0;
    background:linear-gradient(135deg, var(--purple), var(--pink));
    display:flex; align-items:center; justify-content:center;
    color:white; font-size:1rem; margin-top:2px;
}

/* Tarjeta oscura CTA — igual que .ser-prov-card */
.cta-card {
    background:linear-gradient(135deg, var(--dark), #2D1B69);
    border-radius:24px; padding:40px 36px;
    text-align:center; color:white;
    position:relative; overflow:hidden;
    border:2px solid rgba(255,217,61,.25);
}
.cta-card::before {
    content:''; position:absolute; inset:0;
    background:radial-gradient(ellipse at center, rgba(123,47,190,.3) 0%, transparent 70%);
}
.cta-card h3 {
    font-family:'Fredoka One', cursive;
    font-size:1.8rem; color:var(--yellow); margin-bottom:12px;
    position:relative; z-index:2;
}
.cta-card p {
    font-size:.97rem; color:rgba(255,255,255,.8); line-height:1.65;
    margin-bottom:24px; position:relative; z-index:2;
}
/* Botón verde igual que .btn-ser-prov */
.btn-ser-prov {
    display:inline-flex; align-items:center; gap:10px;
    background:#25D366; color:white;
    padding:16px 36px; border-radius:999px;
    font-weight:900; font-size:1.05rem; text-decoration:none;
    box-shadow:0 8px 24px rgba(37,211,102,.4); transition:all .3s;
    border:2px solid rgba(255,255,255,.2);
    position:relative; z-index:2;
}
.btn-ser-prov:hover { transform:translateY(-3px); box-shadow:0 14px 32px rgba(37,211,102,.5); }

/* ===== FAQ ===== */
.faq-section { background:var(--bg); padding:70px 0; }

.faq-list { display:flex; flex-direction:column; gap:12px; max-width:820px; margin:0 auto; }

.faq-item { border:2px solid #e0d8f0; border-radius:16px; overflow:hidden; transition:border-color .3s; }
.faq-item.open { border-color:var(--purple); }

.faq-question {
    width:100%; background:none; border:none; padding:18px 22px;
    display:flex; align-items:center; justify-content:space-between; gap:15px;
    cursor:pointer; font-family:'Fredoka One', cursive; font-size:1rem;
    color:var(--dark); text-align:left; transition:background .2s;
}
.faq-question:hover { background:var(--bg); }
.faq-item.open .faq-question { background:#f0e8ff; color:var(--purple); }

.faq-chevron {
    width:30px; height:30px; border-radius:50%; flex-shrink:0;
    background:linear-gradient(135deg, var(--purple), var(--pink));
    display:flex; align-items:center; justify-content:center;
    transition:transform .3s;
}
.faq-chevron i { color:white; font-size:.75rem; }
.faq-item.open .faq-chevron { transform:rotate(180deg); }

.faq-answer { max-height:0; overflow:hidden; transition:max-height .4s ease, padding .3s; }
.faq-item.open .faq-answer { max-height:200px; padding:0 22px 18px; }
.faq-answer p { color:var(--text); line-height:1.7; margin:0; font-size:.93rem; }

/* ===== ANIMACIONES — igual proveedores ===== */
.fade-up { opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease; }
.fade-up.visible { opacity:1; transform:translateY(0); }
.fade-up-d1 { transition-delay:.1s; }
.fade-up-d2 { transition-delay:.2s; }
.fade-up-d3 { transition-delay:.3s; }

/* ===== RESPONSIVE ===== */
@media (max-width:900px) {
    .contact-grid  { grid-template-columns:1fr; }
    .horarios-grid { grid-template-columns:repeat(2,1fr); }
    .cta-grid      { grid-template-columns:1fr; gap:32px; }
}
@media (max-width:640px) {
    .hero            { padding:100px 0 70px; }
    .map-chips       { grid-template-columns:1fr 1fr; }
    .map-frame       { height:250px; }
    .form-grid       { grid-template-columns:1fr; }
    .form-group.full,
    .form-submit,
    .form-feedback   { grid-column:span 1; }
    .form-submit     { flex-direction:column; align-items:flex-start; }
    .whatsapp-float  { width:56px; height:56px; font-size:1.9rem; bottom:18px; right:18px; }
}
@media (max-width:420px) {
    .horarios-grid { grid-template-columns:1fr; }
    .map-chips     { grid-template-columns:1fr; }
    .btn-row       { flex-direction:column; }
    .btn-action    { justify-content:center; }
}