/* Contact page */
.contact-page{max-width:1200px;margin:0 auto;padding:26px 16px 50px 16px;font-family:'Segoe UI', Arial, sans-serif}

/* Fondo animado (amarillo transparente) */
body{background: linear-gradient(120deg, #0b1220, #232f3e, rgba(250, 204, 21, 0.55), #232f3e); background-size: 300% 300%; animation: authBg 16s ease infinite;}
@keyframes authBg{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@media (prefers-reduced-motion: reduce){body{animation:none}}

.contact-hero{display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:center;padding:26px 20px;border-radius:18px;background:#e8fff0;border:1px solid #b7f0c7}
.contact-badge{display:inline-flex;align-items:center;gap:10px;padding:8px 12px;border-radius:999px;background:#dff7ea;color:#111;font-weight:700;margin-bottom:10px}
/* Iconos en negro (solo contactos) */
.contact-page i{color:#111}
.contact-title{margin:0;font-size:3rem;line-height:1.1;color:#111}
.contact-subtitle{margin:10px 0 0 0;color:#444;max-width:64ch}

.contact-hero-right{display:flex;justify-content:flex-end}
.contact-logo-card{display:flex;flex-direction:column;align-items:center;gap:12px}
.contact-logo{width:150px;height:150px;border-radius:999px;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 12px #00968822;border:1px solid rgba(0,0,0,0.06);position:relative;isolation:isolate}
.contact-logo img{max-width:105px;height:auto;display:block}

/* Fuego en los bordes del logo */
.contact-logo::before,
.contact-logo::after{content:'';position:absolute;inset:-14px;border-radius:inherit;z-index:-1;pointer-events:none;
  /* Mantiene el fuego fuera del círculo (anillo exterior) */
  -webkit-mask: radial-gradient(circle at 50% 50%, transparent 0 58%, #000 64%);
  mask: radial-gradient(circle at 50% 50%, transparent 0 58%, #000 64%);
}
.contact-logo::before{
  background:conic-gradient(from 180deg,
    rgba(255, 215, 0, 0.0) 0deg,
    rgba(255, 160, 0, 0.95) 40deg,
    rgba(255, 60, 0, 0.95) 90deg,
    rgba(255, 140, 0, 0.95) 140deg,
    rgba(255, 215, 0, 0.0) 200deg,
    rgba(255, 80, 0, 0.90) 260deg,
    rgba(255, 200, 0, 0.0) 360deg);
  filter:blur(10px);
  opacity:.85;
  animation:logoFireFlicker 2.2s infinite ease-in-out;
}
.contact-logo::after{
  background:radial-gradient(circle at 50% 50%, rgba(255, 120, 0, 0.20), rgba(255, 60, 0, 0.0) 65%);
  filter:blur(16px);
  opacity:.7;
  animation:logoFireGlow 1.7s infinite ease-in-out;
}

@keyframes logoFireFlicker{
  0%{transform:scale(1) rotate(0deg);opacity:.78;filter:blur(10px) hue-rotate(0deg)}
  25%{transform:scale(1.02) rotate(6deg);opacity:.92;filter:blur(11px) hue-rotate(-6deg)}
  55%{transform:scale(0.99) rotate(-5deg);opacity:.80;filter:blur(9px) hue-rotate(8deg)}
  80%{transform:scale(1.03) rotate(9deg);opacity:.95;filter:blur(12px) hue-rotate(-10deg)}
  100%{transform:scale(1) rotate(0deg);opacity:.82;filter:blur(10px) hue-rotate(0deg)}
}

@keyframes logoFireGlow{
  0%{transform:scale(1);opacity:.55}
  50%{transform:scale(1.05);opacity:.85}
  100%{transform:scale(1);opacity:.55}
}

@media (prefers-reduced-motion: reduce){
  .contact-logo::before,
  .contact-logo::after{animation:none}
}
.contact-hours{width:100%;max-width:320px;background:#fff;border-radius:16px;padding:14px 14px;border:1px solid rgba(0,0,0,0.06);box-shadow:0 2px 12px #00968822}
.contact-hours h3{margin:0 0 8px 0;color:#009688;font-size:1.05rem}
.contact-hours p{margin:0;color:#444;line-height:1.45}

.contact-info-grid{margin-top:18px;display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));gap:16px}
.contact-info-card{background:#fff;border-radius:16px;padding:14px;border:1px solid rgba(0,0,0,0.06);box-shadow:0 2px 12px #00968822;display:flex;gap:12px;align-items:flex-start}
.contact-info-icon{width:44px;height:44px;border-radius:12px;background:#e8fff0;display:flex;align-items:center;justify-content:center;color:#111;flex:0 0 44px}
.contact-info-card h4{margin:2px 0 4px 0;color:#111}
.contact-info-card p{margin:0;color:#444;line-height:1.35}

.contact-panels{margin-top:18px;display:grid;grid-template-columns:1.15fr .85fr;gap:18px;align-items:start}
.contact-panel{background:#fff;border-radius:18px;border:1px solid rgba(0,0,0,0.06);box-shadow:0 2px 12px #00968822;overflow:hidden}
.contact-panel-header{padding:14px 16px;border-bottom:1px solid rgba(0,0,0,0.06);display:flex;align-items:center;gap:10px}
.contact-panel-header i{color:#111}
.contact-panel-header h3{margin:0;color:#111}
.contact-panel-body{padding:16px}

/* Panel del formulario: un poco menos alto */
.contact-form-panel .contact-panel-body{padding:17px}
.contact-form-panel .contact-field textarea{min-height:155px}

.contact-alert{border-radius:14px;padding:12px 14px;margin:0 0 12px 0;border:1px solid rgba(0,0,0,0.10)}
.contact-alert ul{margin:0;padding-left:18px}
.contact-alert-ok{background:#ffffffcc}
.contact-alert-err{background:#fff3f3}

.contact-form{width:100%}
.contact-form-grid{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:16px}
.contact-field{display:flex;flex-direction:column;gap:8px}
.contact-field-full{margin-top:14px}
.contact-field label{font-weight:800;color:#111}
.contact-field input,
.contact-field select,
.contact-field textarea{width:100%;border:1px solid #b7f0c7;border-radius:14px;padding:12px 14px;font:inherit;color:#111;background:#fff;outline:none;box-sizing:border-box}
.contact-field textarea{min-height:140px;resize:vertical}
.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus{border-color:#009688;box-shadow:0 0 0 3px #0096881a}

.contact-form-footer{display:flex;align-items:center;gap:12px;margin-top:14px}
.contact-btn{border-radius:999px;padding:12px 16px;font-weight:900;border:1px solid transparent;cursor:pointer;display:inline-flex;align-items:center;gap:10px;line-height:1}
.contact-btn-primary{background:#fff;color:#009688;border-color:#009688}
.contact-btn-primary i{color:#111}
.contact-btn-primary:hover{background:#e8fff0}
.contact-btn-outline{background:#fff;border-color:#b7f0c7;color:#009688}
.contact-counter{margin-left:auto;color:#444;font-weight:700}

.contact-map-embed{padding:14px}
.contact-map-embed iframe{width:100%;height:360px;border:0;display:block;border-radius:14px}

.contact-social{padding:12px 14px;border-top:1px solid rgba(0,0,0,0.06);display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.contact-social-btn{display:inline-flex;align-items:center;gap:10px;padding:10px 14px;border-radius:999px;border:1px solid rgba(0,0,0,0.10);background:#fff;color:#111;text-decoration:none;font-weight:800}
.contact-social-btn i{color:#111}
.contact-social-btn:hover{background:#e8fff0}

.contact-faq{margin-top:18px;background:#fff;border-radius:18px;border:1px solid rgba(0,0,0,0.06);box-shadow:0 2px 12px #00968822;padding:14px 16px}
.contact-faq h3{margin:0 0 10px 0;color:#111;display:flex;align-items:center;gap:10px}
.contact-faq details{border-top:1px solid rgba(0,0,0,0.06);padding:10px 0}
.contact-faq details:first-of-type{border-top:0}
.contact-faq summary{cursor:pointer;font-weight:700;color:#111;list-style:none}
.contact-faq summary::-webkit-details-marker{display:none}
.contact-faq summary::after{content:'+';float:right;color:#009688;font-weight:900}
.contact-faq details[open] summary::after{content:'–'}
.contact-faq p{margin:8px 0 0 0;color:#444;line-height:1.5}

@media (max-width: 980px){
  .contact-hero{grid-template-columns:1fr;}
  .contact-hero-right{justify-content:center}
  .contact-title{font-size:2.3rem}
  .contact-info-grid{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .contact-panels{grid-template-columns:1fr}
}

@media (max-width: 520px){
  .contact-page{padding:18px 12px 40px 12px}
  .contact-hero{padding:18px 14px}
  .contact-title{font-size:2rem}
  .contact-info-grid{grid-template-columns:1fr}
  .contact-form{max-width:min(360px, 94%);margin-left:auto;margin-right:auto}
  .contact-form-grid{grid-template-columns:1fr}
  .contact-form-footer{flex-wrap:wrap}
  .contact-counter{width:100%;margin-left:0}
  .contact-field textarea{min-height:120px}
  .contact-map-embed iframe{height:300px}
}