{"id":1930,"date":"2026-03-27T18:29:28","date_gmt":"2026-03-28T00:29:28","guid":{"rendered":"https:\/\/casamajeva.com\/?page_id=1930"},"modified":"2026-04-19T14:36:37","modified_gmt":"2026-04-19T20:36:37","slug":"cotizador","status":"publish","type":"page","link":"https:\/\/casamajeva.com\/en\/cotizador\/","title":{"rendered":"Cotizador surf"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\r\n\r\n\r\n\r\n\r\nPaquete Surf \u2014 Casa Majeva 2026<\/title>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=DM+Sans:wght@300;400;500&display=swap\" rel=\"stylesheet\">\r\n<style>\r\n :root {\r\n --sand: #f5f0e8; --cream: #faf8f4; --ocean: #2d6a7f; --ocean-light: #4a8fa6;\r\n --ocean-pale: #e8f4f8; --coral: #c7623a; --coral-pale: #fdf0ea;\r\n --gold: #b8924a; --gold-pale: #faf4e8; --text: #1c2b30; --text-muted: #6b8590;\r\n --border: #e2ddd5; --white: #ffffff; --shadow: rgba(45,106,127,0.12);\r\n }\r\n * { box-sizing: border-box; margin: 0; padding: 0; }\r\n body { font-family: 'DM Sans', sans-serif; background: var(--cream); color: var(--text); min-height: 100vh; }\r\n\r\n \/* HEADER *\/\r\n header { background: var(--white); border-bottom: 1px solid var(--border); padding: 0 2rem; position: sticky; top: 0; z-index: 100; box-shadow: 0 2px 20px var(--shadow); }\r\n .header-inner { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; height: 68px; gap: 1rem; flex-wrap: wrap; }\r\n .logo { font-family: 'Cormorant Garamond', serif; font-size: 1.6rem; font-weight: 300; letter-spacing: 0.08em; }\r\n .logo span { color: var(--ocean); font-style: italic; }\r\n .toggle-group { display: flex; background: var(--sand); border-radius: 100px; padding: 3px; gap: 2px; }\r\n .toggle-btn { padding: 6px 16px; border-radius: 100px; border: none; cursor: pointer; font-family: 'DM Sans', sans-serif; font-size: 0.78rem; font-weight: 500; letter-spacing: 0.05em; transition: all 0.2s; background: transparent; color: var(--text-muted); }\r\n .toggle-btn.active { background: var(--white); color: var(--ocean); box-shadow: 0 1px 6px var(--shadow); }\r\n\r\n \/* HERO *\/\r\n .hero { background: linear-gradient(135deg, var(--ocean) 0%, #1e4d5e 100%); color: var(--white); text-align: center; padding: 2.5rem 2rem 2rem; position: relative; overflow: hidden; }\r\n .hero::before { content: ''; position: absolute; inset: 0; background: url(\"data:image\/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'\/%3E%3C\/g%3E%3C\/svg%3E\"); }\r\n .hero h1 { font-family: 'Cormorant Garamond', serif; font-size: clamp(1.6rem,4vw,2.4rem); font-weight: 300; letter-spacing: 0.06em; margin-bottom: 0.3rem; position: relative; }\r\n .hero p { font-size: 0.82rem; opacity: 0.75; letter-spacing: 0.08em; text-transform: uppercase; position: relative; }\r\n .hero-note { font-size: 0.76rem; opacity: 0.6; margin-top: 0.5rem; position: relative; font-style: italic; }\r\n\r\n \/* LAYOUT *\/\r\n .container { max-width: 1100px; margin: 0 auto; padding: 2rem 1.5rem; display: grid; grid-template-columns: 1fr 340px; gap: 2rem; align-items: start; }\r\n\r\n \/* SECTIONS *\/\r\n .section { background: var(--white); border-radius: 16px; border: 1px solid var(--border); overflow: hidden; margin-bottom: 1.5rem; box-shadow: 0 2px 16px var(--shadow); transition: box-shadow 0.2s; animation: fadeIn 0.4s ease both; }\r\n .section:hover { box-shadow: 0 4px 24px var(--shadow); }\r\n .section-header { padding: 1.1rem 1.5rem; display: flex; align-items: center; gap: 0.8rem; border-bottom: 1px solid var(--border); }\r\n .section-icon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; }\r\n .icon-ocean{background:var(--ocean-pale)} .icon-coral{background:var(--coral-pale)} .icon-gold{background:var(--gold-pale)}\r\n .section-title { font-family: 'Cormorant Garamond', serif; font-size: 1.15rem; font-weight: 600; letter-spacing: 0.04em; }\r\n .section-subtitle { font-size: 0.78rem; color: var(--text-muted); margin-top: 1px; }\r\n .section-body { padding: 1.2rem 1.5rem; }\r\n\r\n \/* FORM ELEMENTS *\/\r\n .form-label { display: block; font-size: 0.76rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 0.35rem; }\r\n .select-wrap { position: relative; }\r\n select { width: 100%; padding: 0.55rem 1rem; border: 1.5px solid var(--border); border-radius: 10px; font-family: 'DM Sans', sans-serif; font-size: 0.88rem; color: var(--text); background: var(--cream); appearance: none; cursor: pointer; transition: border-color 0.2s, box-shadow 0.2s; outline: none; }\r\n select:focus { border-color: var(--ocean); box-shadow: 0 0 0 3px rgba(45,106,127,0.1); }\r\n .select-wrap::after { content: '\\25BE'; position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; font-size: 0.9rem; }\r\n .small-select { padding: 0.5rem 0.8rem; font-size: 0.84rem; }\r\n .date-row { display: flex; align-items: flex-end; gap: 0.6rem; margin-top: 0.8rem; }\r\n .date-field { flex: 1; }\r\n .date-input { width: 100%; padding: 0.55rem 0.8rem; border: 1.5px solid var(--border); border-radius: 10px; font-family: 'DM Sans', sans-serif; font-size: 0.86rem; color: var(--text); background: var(--cream); cursor: pointer; transition: border-color 0.2s, box-shadow 0.2s; outline: none; }\r\n .date-input:focus { border-color: var(--ocean); box-shadow: 0 0 0 3px rgba(45,106,127,0.1); }\r\n .date-input::-webkit-calendar-picker-indicator { cursor: pointer; opacity: 0.5; }\r\n .date-arrow { display: flex; align-items: center; justify-content: center; color: var(--ocean); font-size: 1.1rem; padding-bottom: 0.3rem; flex-shrink: 0; }\r\n .nights-badge { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.76rem; background: var(--ocean-pale); color: var(--ocean); padding: 5px 14px; border-radius: 100px; font-weight: 500; flex-shrink: 0; margin-bottom: 0.1rem; white-space: nowrap; }\r\n\r\n \/* MODE CARDS *\/\r\n .mode-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }\r\n .mode-card { border: 2px solid var(--border); border-radius: 14px; padding: 1.2rem 1rem; cursor: pointer; transition: all 0.25s; background: var(--cream); text-align: center; position: relative; }\r\n .mode-card:hover { border-color: var(--ocean-light); background: var(--ocean-pale); transform: translateY(-2px); box-shadow: 0 6px 20px var(--shadow); }\r\n .mode-card.active { border-color: var(--ocean); background: var(--ocean-pale); box-shadow: 0 4px 16px var(--shadow); }\r\n .mode-card.active::after { content: '\\2713'; position: absolute; top: 8px; right: 10px; background: var(--ocean); color: #fff; width: 20px; height: 20px; border-radius: 50%; font-size: 0.65rem; display: flex; align-items: center; justify-content: center; }\r\n .mode-emoji { font-size: 2rem; margin-bottom: 0.5rem; display: block; }\r\n .mode-name { font-family: 'Cormorant Garamond', serif; font-size: 1.05rem; font-weight: 600; margin-bottom: 0.3rem; color: var(--ocean); }\r\n .mode-desc { font-size: 0.72rem; color: var(--text-muted); line-height: 1.45; }\r\n .mode-price-tag { display: inline-block; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; padding: 3px 10px; border-radius: 100px; margin-top: 0.6rem; background: var(--coral-pale); color: var(--coral); }\r\n .guide-mandatory { display: flex; align-items: center; gap: 0.4rem; font-size: 0.73rem; color: var(--ocean); background: var(--ocean-pale); border-radius: 8px; padding: 0.55rem 0.8rem; margin-top: 0.8rem; }\r\n .guide-mandatory strong { font-weight: 600; }\r\n\r\n \/* GUIDE CONFIG *\/\r\n .guide-row { display: flex; gap: 1rem; align-items: flex-end; flex-wrap: wrap; }\r\n .guide-field { flex: 1; min-width: 120px; }\r\n .guide-price-inline { flex-shrink: 0; text-align: right; padding-bottom: 0.1rem; }\r\n .guide-price-val { font-size: 0.92rem; font-weight: 500; color: var(--ocean); }\r\n .guide-price-unit { font-size: 0.68rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }\r\n\r\n \/* DAY ROWS *\/\r\n .day-row { display: flex; align-items: center; gap: 0.7rem; padding: 0.55rem 0; border-bottom: 1px dashed var(--border); }\r\n .day-row:last-child{border-bottom:none}\r\n .day-label { font-size: 0.76rem; font-weight: 600; color: var(--ocean); background: var(--ocean-pale); border-radius: 8px; padding: 3px 10px; white-space: nowrap; min-width: 50px; text-align: center; }\r\n .day-select-wrap { flex: 1; position: relative; }\r\n .day-select { width: 100%; padding: 0.4rem 2rem 0.4rem 0.7rem; border: 1.5px solid var(--border); border-radius: 8px; font-family: 'DM Sans', sans-serif; font-size: 0.8rem; color: var(--text); background: var(--cream); appearance: none; cursor: pointer; transition: border-color 0.2s; outline: none; }\r\n .day-select:focus{border-color:var(--ocean)}\r\n .day-select-wrap::after { content: '\\25BE'; position: absolute; right: 0.6rem; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; font-size: 0.8rem; }\r\n .day-price-tag { font-size: 0.78rem; font-weight: 600; color: var(--coral); white-space: nowrap; min-width: 70px; text-align: right; }\r\n .surf-hint { font-size: 0.73rem; color: var(--text-muted); margin-bottom: 0.8rem; line-height: 1.5; background: var(--sand); border-radius: 8px; padding: 0.55rem 0.8rem; }\r\n\r\n \/* BOARD RENTAL *\/\r\n .check-item { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.8rem 0; cursor: pointer; transition: background 0.15s; border-radius: 8px; padding-left: 0.3rem; }\r\n .check-item:hover{background:var(--sand)}\r\n .check-item input[type=\"checkbox\"] { width: 18px; height: 18px; accent-color: var(--ocean); cursor: pointer; flex-shrink: 0; margin-top: 2px; }\r\n .check-name { font-size: 0.86rem; font-weight: 500; margin-bottom: 0.1rem; }\r\n .check-desc { font-size: 0.72rem; color: var(--text-muted); line-height: 1.4; }\r\n .check-price { font-size: 0.86rem; font-weight: 500; color: var(--ocean); white-space: nowrap; text-align: right; flex-shrink: 0; }\r\n .check-unit { font-size: 0.66rem; color: var(--text-muted); text-transform: uppercase; }\r\n\r\n \/* SUMMARY *\/\r\n .summary{position:sticky;top:90px}\r\n .summary-card{background:var(--white);border-radius:16px;border:1px solid var(--border);overflow:hidden;box-shadow:0 4px 24px var(--shadow)}\r\n .summary-header{background:var(--ocean);color:var(--white);padding:1.1rem 1.4rem;display:flex;align-items:center;gap:0.6rem}\r\n .summary-header h2{font-family:'Cormorant Garamond',serif;font-size:1.15rem;font-weight:400;letter-spacing:0.05em}\r\n .summary-body{padding:1.1rem 1.4rem}\r\n .summary-config{background:var(--sand);border-radius:10px;padding:0.7rem 1rem;margin-bottom:0.8rem;font-size:0.8rem}\r\n .summary-config-row{display:flex;justify-content:space-between;align-items:center;padding:0.15rem 0}\r\n .summary-row{display:flex;justify-content:space-between;align-items:flex-start;font-size:0.8rem;padding:0.4rem 0;border-bottom:1px dashed var(--border);gap:0.5rem}\r\n .summary-row:last-of-type{border-bottom:none}\r\n .summary-row-name{color:var(--text-muted);flex:1;line-height:1.4}\r\n .summary-row-val{font-weight:500;white-space:nowrap}\r\n .summary-empty{text-align:center;color:var(--text-muted);font-size:0.8rem;padding:1.2rem 0;font-style:italic}\r\n .total-block{background:linear-gradient(135deg,var(--ocean) 0%,#1e4d5e 100%);border-radius:12px;padding:1.1rem;margin-top:0.8rem;color:var(--white);text-align:center}\r\n .total-label{font-size:0.7rem;text-transform:uppercase;letter-spacing:0.1em;opacity:0.75;margin-bottom:0.25rem}\r\n .total-amount{font-family:'Cormorant Garamond',serif;font-size:2rem;font-weight:300;letter-spacing:0.04em;line-height:1}\r\n .total-ppp{font-size:0.73rem;opacity:0.7;margin-top:0.25rem}\r\n .btn-contact{display:flex;align-items:center;justify-content:center;gap:0.5rem;width:100%;margin-top:0.8rem;padding:0.8rem;background:var(--coral);color:var(--white);border:none;border-radius:12px;font-family:'DM Sans',sans-serif;font-size:0.83rem;font-weight:500;letter-spacing:0.06em;text-transform:uppercase;cursor:pointer;transition:background 0.2s,transform 0.1s}\r\n .btn-contact:hover:not(:disabled){background:#b5552e;transform:translateY(-1px)}\r\n .btn-contact:disabled{opacity:0.65;cursor:not-allowed;transform:none}\r\n .note-text{font-size:0.7rem;color:var(--text-muted);text-align:center;margin-top:0.6rem;line-height:1.5}\r\n\r\n .hidden{display:none!important}\r\n .large-group-warning { display: flex; align-items: flex-start; gap: 0.4rem; font-size: 0.73rem; color: var(--coral); background: var(--coral-pale); border: 1.5px solid var(--coral); border-radius: 8px; padding: 0.6rem 0.8rem; margin-top: 0.6rem; line-height: 1.45; }\r\n .large-group-summary-note { font-size: 0.7rem; color: var(--coral); text-align: center; margin-top: 0.5rem; font-weight: 500; background: var(--coral-pale); border-radius: 8px; padding: 0.45rem 0.6rem; }\r\n .persons-label-inline { font-size: 0.84rem; color: var(--text-muted); }\r\n .stepper { display: inline-flex; align-items: center; border: 1.5px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--cream); }\r\n .stepper-btn { width: 42px; height: 42px; border: none; background: transparent; font-size: 1.2rem; font-weight: 500; color: var(--ocean); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s, color 0.15s; user-select: none; }\r\n .stepper-btn:hover:not(:disabled) { background: var(--ocean-pale); }\r\n .stepper-btn:active:not(:disabled) { background: var(--ocean); color: var(--white); }\r\n .stepper-btn:disabled { color: var(--border); cursor: not-allowed; }\r\n .stepper-val { min-width: 44px; text-align: center; font-family: 'Cormorant Garamond', serif; font-size: 1.3rem; font-weight: 600; color: var(--text); border-left: 1.5px solid var(--border); border-right: 1.5px solid var(--border); padding: 0 4px; line-height: 42px; }\r\n\r\n \/* MODAL *\/\r\n .overlay{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:1.5rem;background:rgba(28,43,48,0.6);backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity 0.25s ease}\r\n .overlay.visible{opacity:1;pointer-events:all}\r\n .cf-card{background:var(--white);border-radius:20px;box-shadow:0 24px 60px rgba(28,43,48,0.25);max-width:400px;width:100%;overflow:hidden;transform:translateY(20px) scale(0.97);opacity:0;transition:transform 0.32s cubic-bezier(0.34,1.45,0.64,1),opacity 0.25s ease}\r\n .overlay.visible .cf-card{transform:translateY(0) scale(1);opacity:1}\r\n .cf-header{background:linear-gradient(135deg,var(--ocean) 0%,#1e4d5e 100%);padding:1.3rem 1.5rem 1.1rem;color:var(--white)}\r\n .cf-header-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:0.2rem}\r\n .cf-title{font-family:'Cormorant Garamond',serif;font-size:1.3rem;font-weight:400;letter-spacing:0.04em}\r\n .cf-close-x{background:none;border:none;color:rgba(255,255,255,0.55);font-size:1.25rem;cursor:pointer;padding:2px 5px;border-radius:6px;line-height:1;transition:color 0.15s}\r\n .cf-close-x:hover{color:#fff}\r\n .cf-subtitle{font-size:0.72rem;opacity:0.7;letter-spacing:0.04em}\r\n .cf-body{padding:1.3rem 1.5rem 1.5rem;display:flex;flex-direction:column;gap:0.85rem}\r\n .cf-mini-summary{background:var(--sand);border-radius:10px;padding:0.6rem 1rem;display:flex;justify-content:space-between;align-items:center;font-size:0.78rem;margin-bottom:0.1rem}\r\n .cf-mini-label{color:var(--text-muted)}\r\n .cf-mini-total{font-weight:600;color:var(--ocean);font-size:0.92rem}\r\n .cf-field{display:flex;flex-direction:column;gap:0.25rem}\r\n .cf-label{font-size:0.7rem;font-weight:500;text-transform:uppercase;letter-spacing:0.08em;color:var(--text-muted)}\r\n .cf-input{padding:0.55rem 0.85rem;border:1.5px solid var(--border);border-radius:10px;font-family:'DM Sans',sans-serif;font-size:0.88rem;color:var(--text);background:var(--cream);outline:none;width:100%;transition:border-color 0.2s,box-shadow 0.2s}\r\n .cf-input:focus{border-color:var(--ocean);box-shadow:0 0 0 3px rgba(45,106,127,0.1)}\r\n .cf-input.invalid{border-color:var(--coral)!important;box-shadow:0 0 0 3px rgba(199,98,58,0.1)!important}\r\n .cf-err{font-size:0.68rem;color:var(--coral);display:none;margin-top:1px}\r\n .cf-err.show{display:block}\r\n .cf-actions{display:flex;gap:0.6rem;margin-top:0.2rem}\r\n .cf-btn-cancel{flex:1;padding:0.7rem;border-radius:10px;border:1.5px solid var(--border);background:var(--white);font-family:'DM Sans',sans-serif;font-size:0.8rem;font-weight:500;color:var(--text-muted);cursor:pointer;transition:all 0.15s}\r\n .cf-btn-cancel:hover{border-color:var(--text-muted);color:var(--text)}\r\n .cf-btn-send{flex:2;padding:0.7rem;border-radius:10px;border:none;background:var(--coral);color:var(--white);font-family:'DM Sans',sans-serif;font-size:0.8rem;font-weight:500;letter-spacing:0.04em;text-transform:uppercase;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:0.4rem;transition:background 0.2s,transform 0.1s}\r\n .cf-btn-send:hover:not(:disabled){background:#b5552e;transform:translateY(-1px)}\r\n .cf-btn-send:disabled{opacity:0.6;cursor:not-allowed;transform:none}\r\n .btn-spinner{width:15px;height:15px;border:2px solid rgba(255,255,255,0.35);border-top-color:#fff;border-radius:50%;animation:spin 0.7s linear infinite;flex-shrink:0;display:inline-block}\r\n @keyframes spin{to{transform:rotate(360deg)}}\r\n\r\n \/* RESULT OVERLAY *\/\r\n .result-card{background:var(--white);border-radius:20px;box-shadow:0 24px 60px rgba(28,43,48,0.25);padding:2.2rem 1.8rem 1.8rem;max-width:420px;width:100%;text-align:center;transform:translateY(20px) scale(0.97);opacity:0;transition:transform 0.35s cubic-bezier(0.34,1.56,0.64,1),opacity 0.3s ease}\r\n .overlay.visible .result-card{transform:translateY(0) scale(1);opacity:1}\r\n .result-icon{font-size:2.8rem;margin-bottom:0.8rem;display:block;animation:waveBob 2.5s ease-in-out infinite}\r\n @keyframes waveBob{0%,100%{transform:translateY(0) rotate(-5deg)} 50%{transform:translateY(-6px) rotate(5deg)}}\r\n .result-title{font-family:'Cormorant Garamond',serif;font-size:1.45rem;font-weight:600;color:var(--ocean);margin-bottom:0.6rem;line-height:1.25}\r\n .result-msg{font-size:0.84rem;color:var(--text-muted);line-height:1.6;margin-bottom:1.2rem}\r\n .result-chip{background:var(--ocean-pale);border-radius:10px;padding:0.65rem 1rem;margin-bottom:1.2rem;font-size:0.76rem;color:var(--ocean);display:flex;align-items:center;gap:0.5rem;justify-content:center}\r\n .result-close{background:var(--ocean);color:var(--white);border:none;border-radius:12px;padding:0.75rem 2rem;font-family:'DM Sans',sans-serif;font-size:0.83rem;font-weight:500;letter-spacing:0.05em;text-transform:uppercase;cursor:pointer;transition:background 0.2s,transform 0.1s}\r\n .result-close:hover{background:#1e4d5e;transform:translateY(-1px)}\r\n .result-card.is-error .result-title{color:var(--coral)}\r\n .result-card.is-error .result-chip{background:var(--coral-pale);color:var(--coral)}\r\n .result-card.is-error .result-close{background:var(--coral)}\r\n .result-card.is-error .result-close:hover{background:#b5552e}\r\n\r\n @media(max-width:768px){\r\n .container{grid-template-columns:1fr}.summary{position:static}\r\n .mode-grid{grid-template-columns:1fr}.date-row{flex-wrap:wrap}\r\n .date-field{min-width:calc(50% - 1.5rem)}.date-arrow{display:none}\r\n .guide-row{flex-direction:column;gap:0.6rem}\r\n }\r\n @keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<!-- CONTACT FORM OVERLAY -->\r\n<div class=\"overlay\" id=\"cf-overlay\">\r\n <div class=\"cf-card\">\r\n <div class=\"cf-header\">\r\n <div class=\"cf-header-top\">\r\n <span class=\"cf-title\" id=\"cf-title\"><\/span>\r\n <button class=\"cf-close-x\" onclick=\"closeCF()\">✕<\/button>\r\n <\/div>\r\n <div class=\"cf-subtitle\" id=\"cf-subtitle\"><\/div>\r\n <\/div>\r\n <div class=\"cf-body\">\r\n <div class=\"cf-mini-summary\">\r\n <span class=\"cf-mini-label\" id=\"cf-mini-label\"><\/span>\r\n <span class=\"cf-mini-total\" id=\"cf-mini-total\"><\/span>\r\n <\/div>\r\n <div class=\"cf-field\">\r\n <label class=\"cf-label\" id=\"cf-label-name\"><\/label>\r\n <input class=\"cf-input\" type=\"text\" id=\"cf-name\" autocomplete=\"name\" placeholder=\"Ej. Mar\u00eda Garc\u00eda\">\r\n <span class=\"cf-err\" id=\"cf-err-name\"><\/span>\r\n <\/div>\r\n <div class=\"cf-field\">\r\n <label class=\"cf-label\" id=\"cf-label-email\"><\/label>\r\n <input class=\"cf-input\" type=\"email\" id=\"cf-email\" autocomplete=\"email\" placeholder=\"correo@ejemplo.com\">\r\n <span class=\"cf-err\" id=\"cf-err-email\"><\/span>\r\n <\/div>\r\n <div class=\"cf-field\">\r\n <label class=\"cf-label\" id=\"cf-label-phone\"><\/label>\r\n <input class=\"cf-input\" type=\"tel\" id=\"cf-phone\" autocomplete=\"tel\" placeholder=\"+52 958 000 0000\">\r\n <span class=\"cf-err\" id=\"cf-err-phone\"><\/span>\r\n <\/div>\r\n <div class=\"cf-actions\">\r\n <button class=\"cf-btn-cancel\" id=\"cf-btn-cancel\" onclick=\"closeCF()\"><\/button>\r\n <button class=\"cf-btn-send\" id=\"cf-btn-send\" onclick=\"confirmAndSend()\">\r\n <span id=\"cf-btn-label\"><\/span>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n<!-- RESULT OVERLAY -->\r\n<div class=\"overlay\" id=\"result-overlay\">\r\n <div class=\"result-card\" id=\"result-card\">\r\n <span class=\"result-icon\" id=\"result-icon\"><\/span>\r\n <div class=\"result-title\" id=\"result-title\"><\/div>\r\n <p class=\"result-msg\" id=\"result-msg\"><\/p>\r\n <div class=\"result-chip\">\r\n <span>\ud83d\udcf1<\/span>\r\n <span id=\"result-chip-text\"><\/span>\r\n <\/div>\r\n <button class=\"result-close\" id=\"result-close-btn\" onclick=\"closeResult()\"><\/button>\r\n <\/div>\r\n<\/div>\r\n\r\n<!-- HEADER -->\r\n<header>\r\n <div class=\"header-inner\">\r\n <div class=\"logo\">Casa <span>Majeva<\/span><\/div>\r\n <div class=\"toggle-group\">\r\n <button class=\"toggle-btn active\" onclick=\"setLang('es')\" id=\"btn-es\">\ud83c\uddf2\ud83c\uddfd ES<\/button>\r\n <button class=\"toggle-btn\" onclick=\"setLang('en')\" id=\"btn-en\">\ud83c\uddfa\ud83c\uddf8 EN<\/button>\r\n <\/div>\r\n <\/div>\r\n<\/header>\r\n\r\n<!-- HERO -->\r\n<div class=\"hero\">\r\n <h1 id=\"hero-title\">\ud83c\udfc4 Paquete Surf 2026<\/h1>\r\n <p>Oaxaca \u00b7 Istmo de Tehuantepec<\/p>\r\n <div class=\"hero-note\" id=\"hero-note\">Para hu\u00e9spedes ya hospedados<\/div>\r\n<\/div>\r\n\r\n<div class=\"container\">\r\n<div class=\"left-col\">\r\n\r\n <!-- DATES & GUESTS -->\r\n <div class=\"section\" id=\"sec-config\">\r\n <div class=\"section-header\">\r\n <div class=\"section-icon icon-ocean\">\ud83d\udcc5<\/div>\r\n <div>\r\n <div class=\"section-title\" id=\"t-config-title\">Fechas del servicio<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"section-body\">\r\n <div>\r\n <label class=\"form-label\" id=\"t-persons-label\">N\u00famero de personas<\/label>\r\n <div style=\"display:flex;align-items:center;gap:0.8rem;flex-wrap:wrap\">\r\n <div class=\"stepper\">\r\n <button class=\"stepper-btn\" id=\"persons-minus\" onclick=\"changePersons(-1)\">\u2212<\/button>\r\n <span class=\"stepper-val\" id=\"persons-display\">2<\/span>\r\n <button class=\"stepper-btn\" id=\"persons-plus\" onclick=\"changePersons(1)\">+<\/button>\r\n <\/div>\r\n <span class=\"persons-label-inline\" id=\"persons-inline-label\">personas<\/span>\r\n <\/div>\r\n <div class=\"large-group-warning hidden\" id=\"large-group-warning\">\r\n <span>\ud83d\ude99<\/span>\r\n <span id=\"t-large-group\">Tu grupo necesita <strong id=\"pickup-count-text\">2 pick-ups<\/strong> (m\u00e1x. 4 personas + 1 gu\u00eda por veh\u00edculo). Un agente confirmar\u00e1 la cotizaci\u00f3n.<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"date-row\">\r\n <div class=\"date-field\">\r\n <label class=\"form-label\" id=\"t-start-label\">Primer d\u00eda de surf<\/label>\r\n <input type=\"date\" class=\"date-input\" id=\"date-start\" onchange=\"onDateChange()\" onclick=\"this.showPicker&&this.showPicker()\" onkeydown=\"event.preventDefault()\">\r\n <\/div>\r\n <div class=\"date-arrow\">\u2192<\/div>\r\n <div class=\"date-field\">\r\n <label class=\"form-label\" id=\"t-end-label\">\u00daltimo d\u00eda de surf<\/label>\r\n <input type=\"date\" class=\"date-input\" id=\"date-end\" onchange=\"onDateChange()\" onclick=\"this.showPicker&&this.showPicker()\" onkeydown=\"event.preventDefault()\">\r\n <\/div>\r\n <div style=\"display:flex;align-items:flex-end\">\r\n <div class=\"nights-badge\" id=\"days-badge\">\ud83c\udfc4 3 d\u00edas<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- MODE SELECTOR -->\r\n <div class=\"section\" id=\"sec-mode\">\r\n <div class=\"section-header\">\r\n <div class=\"section-icon icon-coral\">\ud83d\ude99<\/div>\r\n <div>\r\n <div class=\"section-title\" id=\"t-mode-title\">Tipo de servicio<\/div>\r\n <div class=\"section-subtitle\" id=\"t-mode-sub\">Elige c\u00f3mo quieres llegar a los spots<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"section-body\">\r\n <div class=\"mode-grid\">\r\n <div class=\"mode-card active\" onclick=\"setMode('fullday')\" id=\"mode-fullday\">\r\n <span class=\"mode-emoji\">\ud83d\udefb<\/span>\r\n <div class=\"mode-name\" id=\"t-mode-full-name\">Pick-up todo el d\u00eda<\/div>\r\n <div class=\"mode-desc\" id=\"t-mode-full-desc\">4x4 a tu disposici\u00f3n \u00b7 Visita m\u00faltiples spots \u00b7 Libertad total<\/div>\r\n <div class=\"mode-price-tag\" id=\"t-mode-full-price\">US$ 95 \/ d\u00eda<\/div>\r\n <\/div>\r\n <div class=\"mode-card\" onclick=\"setMode('transfer')\" id=\"mode-transfer\">\r\n <span class=\"mode-emoji\">\ud83c\udfc4\u200d\u2642\ufe0f<\/span>\r\n <div class=\"mode-name\" id=\"t-mode-trans-name\">Traslado individual<\/div>\r\n <div class=\"mode-desc\" id=\"t-mode-trans-desc\">1 traslado ida y vuelta al spot por d\u00eda<\/div>\r\n <div class=\"mode-price-tag\" id=\"t-mode-trans-price\">Desde US$ 45 \/ d\u00eda<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"guide-mandatory\" id=\"guide-mandatory-note\">\r\n \ud83e\udded <span id=\"t-guide-mandatory\">El <strong>gu\u00eda<\/strong> se incluye obligatoriamente en ambos servicios (US$ 30 por persona \/ d\u00eda)<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- SURFERS COUNT (charges guide fee only for those who actually surf) -->\r\n <div class=\"section\" id=\"sec-guide\">\r\n <div class=\"section-header\">\r\n <div class=\"section-icon icon-ocean\">\ud83e\udded<\/div>\r\n <div>\r\n <div class=\"section-title\" id=\"t-guide-title\">Gu\u00eda y surfistas<\/div>\r\n <div class=\"section-subtitle\" id=\"t-guide-sub\">5AM \u2013 8PM \u00b7 Puntas de surf y \u00e1reas recreativas<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"section-body\">\r\n <div class=\"guide-row\">\r\n <div class=\"guide-field\">\r\n <label class=\"form-label\" id=\"t-guide-persons-label\">\u00bfCu\u00e1ntas personas surfean?<\/label>\r\n <div class=\"select-wrap\">\r\n <select id=\"guide-persons\" class=\"small-select\" onchange=\"recalculate()\"><\/select>\r\n <\/div>\r\n <\/div>\r\n <div class=\"guide-price-inline\">\r\n <div class=\"guide-price-val\" id=\"guide-price-display\">US$ 30.00<\/div>\r\n <div class=\"guide-price-unit\" id=\"t-guide-price-unit\">por surfista \/ d\u00eda<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"guide-mandatory\" style=\"margin-top:0.8rem;background:var(--sand);color:var(--text-muted)\">\r\n \u2139\ufe0f <span id=\"t-companions-note\">Los acompa\u00f1antes no surfistas ya est\u00e1n incluidos en el costo del pick-up (sin cargo adicional)<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- SURF SPOTS PER DAY (only shown for transfer mode) -->\r\n <div class=\"section hidden\" id=\"sec-spots\">\r\n <div class=\"section-header\">\r\n <div class=\"section-icon icon-coral\">\ud83c\udf0a<\/div>\r\n <div>\r\n <div class=\"section-title\" id=\"t-spots-title\">Destinos por d\u00eda<\/div>\r\n <div class=\"section-subtitle\" id=\"t-spots-sub\">Selecciona la playa para cada d\u00eda<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"section-body\">\r\n <div class=\"surf-hint\" id=\"spots-hint\">Elige el spot de surf para cada d\u00eda. Selecciona <em>Sin traslado<\/em> si quieres descansar ese d\u00eda.<\/div>\r\n <div id=\"spots-container\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- BOARD RENTAL -->\r\n <div class=\"section\" id=\"sec-board\">\r\n <div class=\"section-header\">\r\n <div class=\"section-icon icon-ocean\">\ud83c\udfc4<\/div>\r\n <div>\r\n <div class=\"section-title\" id=\"t-board-title\">Renta de tablas de surf<\/div>\r\n <div class=\"section-subtitle\" id=\"t-board-sub\">US$ 25 por tabla \/ d\u00eda<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"section-body\">\r\n <label class=\"check-item\">\r\n <input type=\"checkbox\" id=\"board-check\" onchange=\"onBoardToggle()\">\r\n <div style=\"flex:1\">\r\n <div class=\"check-name\" id=\"t-board-check-name\">Incluir renta de tablas<\/div>\r\n <div class=\"check-desc\" id=\"t-board-check-desc\">Varios tama\u00f1os disponibles \u00b7 Selecciona cu\u00e1ntas por d\u00eda<\/div>\r\n <\/div>\r\n <\/label>\r\n <div id=\"board-days-container\" class=\"hidden\"><\/div>\r\n <div id=\"board-total-wrap\" class=\"hidden\" style=\"display:flex;justify-content:flex-end;margin-top:0.6rem\">\r\n <div class=\"check-price\" id=\"board-total-display\">\u2014<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n<\/div>\r\n\r\n<!-- SUMMARY -->\r\n<div class=\"summary\">\r\n <div class=\"summary-card\">\r\n <div class=\"summary-header\">\r\n <span>\ud83e\uddfe<\/span>\r\n <h2 id=\"t-quote-title\">Tu cotizaci\u00f3n surf<\/h2>\r\n <\/div>\r\n <div class=\"summary-body\">\r\n <div class=\"summary-config\">\r\n <div class=\"summary-config-row\">\r\n <span id=\"t-sum-mode-key\">Servicio<\/span>\r\n <span style=\"font-weight:600\" id=\"sum-mode-label\">Pick-up todo el d\u00eda<\/span>\r\n <\/div>\r\n <div class=\"summary-config-row\">\r\n <span id=\"t-sum-dates-key\">Fechas<\/span>\r\n <span style=\"font-weight:600\" id=\"sum-dates-label\">\u2014<\/span>\r\n <\/div>\r\n <div class=\"summary-config-row\">\r\n <span id=\"t-sum-config-key\">D\u00edas \u00b7 Personas<\/span>\r\n <span style=\"font-weight:600\" id=\"sum-config-label\">3 d\u00edas \u00b7 2 personas<\/span>\r\n <\/div>\r\n <\/div>\r\n <div id=\"summary-items\">\r\n <div class=\"summary-empty\" id=\"summary-empty-msg\"><\/div>\r\n <\/div>\r\n <div class=\"total-block\">\r\n <div class=\"total-label\" id=\"t-total-label\">Total estimado<\/div>\r\n <div class=\"total-amount\" id=\"total-display\">\u2014<\/div>\r\n <div class=\"total-ppp\" id=\"ppp-display\"><\/div>\r\n <\/div>\r\n <button class=\"btn-contact\" onclick=\"openCF()\">\r\n <span id=\"btn-contact-label\">\ud83d\udce9 Solicitar paquete surf<\/span>\r\n <\/button>\r\n <div class=\"large-group-summary-note hidden\" id=\"large-group-summary-note\">\r\n <span id=\"t-large-group-summary\">\u26a0\ufe0f Grupo grande: cotizaci\u00f3n sujeta a confirmaci\u00f3n por un agente<\/span>\r\n <\/div>\r\n <p class=\"note-text\" id=\"note-currency\"><\/p>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n<\/div>\r\n\r\n<script>\r\n\/* ============================================================\r\n PRICING (2026)\r\n - Pick-up todo el d\u00eda: US$ 95 \/ d\u00eda (capacidad m\u00e1x 4 surfistas + 1 gu\u00eda por veh\u00edculo)\r\n - Gu\u00eda: US$ 30 \/ surfista \/ d\u00eda (solo quienes surfean \u2014 acompa\u00f1antes no pagan, ya van en la camioneta)\r\n - Traslado individual (viaje redondo por veh\u00edculo\/d\u00eda):\r\n \u00b7 Opci\u00f3n 1 \u2014 Conejo \u00b7 Escondida \u00b7 Chivo: US$ 45\r\n \u00b7 Opci\u00f3n 2 \u2014 Chipehua \u00b7 Bamba \u00b7 San Diego: US$ 85\r\n - Tabla de surf: US$ 25 \/ tabla \/ d\u00eda\r\n ============================================================ *\/\r\nconst PRICES = {\r\n guide_pp: 30,\r\n truck: 95,\r\n board: 25,\r\n surf: {\r\n zona_1: 45,\r\n zona_2: 85\r\n }\r\n};\r\n\r\nconst SPOTS = [\r\n { val: 'zona_1', label: '\ud83c\udfc4 Conejo \u00b7 Escondida \u00b7 Chivo', price: 45 },\r\n { val: 'zona_2', label: '\ud83c\udfc4 Chipehua \u00b7 Bamba \u00b7 San Diego', price: 85 }\r\n];\r\n\r\nconst I18N = {\r\n es: {\r\n 'hero-title': '\ud83c\udfc4 Paquete Surf 2026',\r\n 'hero-note': 'Para hu\u00e9spedes ya hospedados',\r\n 't-config-title': 'Fechas del servicio',\r\n 't-persons-label': 'N\u00famero de personas',\r\n 'opt1': '1 persona', 'opt2': '2 personas', 'opt3': '3 personas', 'opt4': '4 personas',\r\n 't-start-label': 'Primer d\u00eda de surf',\r\n 't-end-label': '\u00daltimo d\u00eda de surf',\r\n 't-mode-title': 'Tipo de servicio',\r\n 't-mode-sub': 'Elige c\u00f3mo quieres llegar a los spots',\r\n 't-mode-full-name': 'Pick-up todo el d\u00eda',\r\n 't-mode-full-desc': '4x4 a tu disposici\u00f3n \u00b7 Visita m\u00faltiples spots \u00b7 Libertad total',\r\n 't-mode-full-price': 'US$ 95 \/ d\u00eda',\r\n 't-mode-trans-name': 'Traslado individual',\r\n 't-mode-trans-desc': '1 traslado ida y vuelta al spot por d\u00eda',\r\n 't-mode-trans-price': 'Desde US$ 45 \/ d\u00eda',\r\n 't-guide-mandatory': 'El <strong>gu\u00eda<\/strong> se incluye obligatoriamente en ambos servicios (US$ 30 por persona \/ d\u00eda)',\r\n 't-guide-title': 'Gu\u00eda y surfistas',\r\n 't-guide-sub': '5AM \u2013 8PM \u00b7 Puntas de surf y \u00e1reas recreativas',\r\n 't-guide-persons-label': '\u00bfCu\u00e1ntas personas surfean?',\r\n 't-guide-price-unit': 'por surfista \/ d\u00eda',\r\n 't-companions-note': 'Los acompa\u00f1antes no surfistas ya est\u00e1n incluidos en el costo del pick-up (sin cargo adicional)',\r\n 't-spots-title': 'Destinos por d\u00eda',\r\n 't-spots-sub': 'Selecciona la playa para cada d\u00eda',\r\n 'spots-hint-trans': 'Elige la zona de surf para cada d\u00eda. <strong>Opci\u00f3n 1<\/strong> (Conejo \u00b7 Escondida \u00b7 Chivo) \u2014 US$ 45. <strong>Opci\u00f3n 2<\/strong> (Chipehua \u00b7 Bamba \u00b7 San Diego) \u2014 US$ 85. Selecciona <em>Sin traslado<\/em> para d\u00edas de descanso.',\r\n 'surf-none': 'Sin traslado',\r\n large_group_html: pks => 'Tu grupo necesita <strong>' + pks + ' pick-ups<\/strong> (m\u00e1x. 4 personas + 1 gu\u00eda por veh\u00edculo). Un agente confirmar\u00e1 la cotizaci\u00f3n.',\r\n 't-board-title': 'Renta de tablas de surf',\r\n 't-board-sub': 'US$ 25 por tabla \/ d\u00eda',\r\n 't-board-check-name': 'Incluir renta de tablas',\r\n 't-board-check-desc': 'Varios tama\u00f1os disponibles \u00b7 Selecciona cu\u00e1ntas por d\u00eda',\r\n 't-quote-title': 'Tu cotizaci\u00f3n surf',\r\n 't-sum-mode-key': 'Servicio',\r\n 't-sum-dates-key': 'Fechas',\r\n 't-sum-config-key': 'D\u00edas \u00b7 Personas',\r\n 't-total-label': 'Total estimado',\r\n 'btn-contact': '\ud83d\udce9 Solicitar paquete surf',\r\n day: i => 'D\u00eda ' + i,\r\n days_badge: n => '\ud83c\udfc4 ' + n + ' d\u00eda' + (n !== 1 ? 's' : ''),\r\n days_config: (d, p) => d + ' d\u00eda' + (d !== 1 ? 's' : '') + ' \u00b7 ' + p + ' persona' + (p > 1 ? 's' : ''),\r\n ppp: v => v + ' por persona',\r\n note: 'Precios en USD. Tarifa 2026. Sujeto a disponibilidad.',\r\n no_dates: 'Selecciona fechas',\r\n mode_labels: { fullday: 'Pick-up todo el d\u00eda', transfer: 'Traslado individual' },\r\n truck_line: n => '4x4 Pick-up \u00d7 ' + n + ' d\u00eda' + (n !== 1 ? 's' : ''),\r\n truck_line_multi: (pks, d) => pks > 1\r\n ? pks + '\u00d7 4x4 Pick-up \u00d7 ' + d + ' d\u00eda' + (d !== 1 ? 's' : '')\r\n : '4x4 Pick-up \u00d7 ' + d + ' d\u00eda' + (d !== 1 ? 's' : ''),\r\n guide_line: (p, d) => 'Gu\u00eda \u00d7 ' + p + ' surfista' + (p > 1 ? 's' : '') + ' \u00d7 ' + d + 'd',\r\n surf_total: 'Traslados surf',\r\n board_total_line: 'Renta tablas surf',\r\n empty: 'Configura tu paquete surf para ver el desglose',\r\n no_board: 'Sin tabla',\r\n board_1: '1 tabla',\r\n board_n: n => n + ' tablas',\r\n board_total_label: 'Total tablas: ',\r\n gp: n => n === 1 ? '1 surfista' : n + ' surfistas',\r\n btn_sending: 'Enviando\u2026',\r\n cf_title: 'Un paso m\u00e1s\u2026',\r\n cf_subtitle: 'D\u00e9janos tus datos y te contactamos',\r\n cf_mini_label: 'Total estimado',\r\n cf_label_name: 'Nombre completo',\r\n cf_label_email: 'Correo electr\u00f3nico',\r\n cf_label_phone: 'Tel\u00e9fono \/ WhatsApp',\r\n cf_err_name: 'Ingresa tu nombre completo',\r\n cf_err_email: 'Ingresa un correo v\u00e1lido',\r\n cf_err_phone: 'Ingresa un n\u00famero de tel\u00e9fono',\r\n cf_cancel: 'Cancelar',\r\n cf_send: 'Confirmar y enviar \ud83d\udce9',\r\n success_icon: '\ud83c\udf0a',\r\n success_title: '\u00a1Tu solicitud est\u00e1 en camino!',\r\n success_msg: 'Hemos recibido tu cotizaci\u00f3n de paquete surf. Un agente revisar\u00e1 tu solicitud y te contactar\u00e1 para confirmar disponibilidad. \u00a1Nos vemos en el agua! \ud83e\udd19',\r\n success_chip: 'Respuesta habitual: menos de 24 horas',\r\n error_icon: '\ud83d\ude15',\r\n error_title: 'Algo sali\u00f3 mal',\r\n error_msg: 'No pudimos enviar tu solicitud. Intenta de nuevo o cont\u00e1ctanos por WhatsApp.',\r\n error_chip: 'Error de conexi\u00f3n',\r\n result_close: 'Entendido'\r\n },\r\n en: {\r\n 'hero-title': '\ud83c\udfc4 Surf Package 2026',\r\n 'hero-note': 'For guests already staying with us',\r\n 't-config-title': 'Service dates',\r\n 't-persons-label': 'Number of people',\r\n 'opt1': '1 person', 'opt2': '2 persons', 'opt3': '3 persons', 'opt4': '4 persons',\r\n 't-start-label': 'First surf day',\r\n 't-end-label': 'Last surf day',\r\n 't-mode-title': 'Service type',\r\n 't-mode-sub': 'Choose how you want to reach the spots',\r\n 't-mode-full-name': 'Full-day pick-up',\r\n 't-mode-full-desc': '4x4 at your disposal \u00b7 Visit multiple spots \u00b7 Total freedom',\r\n 't-mode-full-price': 'US$ 95 \/ day',\r\n 't-mode-trans-name': 'Individual transfer',\r\n 't-mode-trans-desc': '1 round-trip transfer to a spot per day',\r\n 't-mode-trans-price': 'From US$ 45 \/ day',\r\n 't-guide-mandatory': 'A <strong>guide<\/strong> is mandatory with both services (US$ 30 per person \/ day)',\r\n 't-guide-title': 'Guide & surfers',\r\n 't-guide-sub': '5AM \u2013 8PM \u00b7 Surf spots & recreation',\r\n 't-guide-persons-label': 'How many people surf?',\r\n 't-guide-price-unit': 'per surfer \/ day',\r\n 't-companions-note': 'Non-surfing companions are already included in the pick-up cost (no extra charge)',\r\n 't-spots-title': 'Destinations per day',\r\n 't-spots-sub': 'Select the beach for each day',\r\n 'spots-hint-trans': 'Pick the surf zone for each day. <strong>Option 1<\/strong> (Conejo \u00b7 Escondida \u00b7 Chivo) \u2014 US$ 45. <strong>Option 2<\/strong> (Chipehua \u00b7 Bamba \u00b7 San Diego) \u2014 US$ 85. Select <em>No transfer<\/em> for rest days.',\r\n 'surf-none': 'No transfer',\r\n large_group_html: pks => 'Your group needs <strong>' + pks + ' pick-ups<\/strong> (max 4 people + 1 guide per vehicle). An agent will confirm the quote.',\r\n 't-board-title': 'Surfboard rental',\r\n 't-board-sub': 'US$ 25 per board \/ day',\r\n 't-board-check-name': 'Include board rental',\r\n 't-board-check-desc': 'Various sizes available \u00b7 Select how many per day',\r\n 't-quote-title': 'Your surf quote',\r\n 't-sum-mode-key': 'Service',\r\n 't-sum-dates-key': 'Dates',\r\n 't-sum-config-key': 'Days \u00b7 Guests',\r\n 't-total-label': 'Estimated total',\r\n 'btn-contact': '\ud83d\udce9 Request surf package',\r\n day: i => 'Day ' + i,\r\n days_badge: n => '\ud83c\udfc4 ' + n + ' day' + (n !== 1 ? 's' : ''),\r\n days_config: (d, p) => d + ' day' + (d !== 1 ? 's' : '') + ' \u00b7 ' + p + ' guest' + (p > 1 ? 's' : ''),\r\n ppp: v => v + ' per person',\r\n note: 'Prices in USD. 2026 rate. Subject to availability.',\r\n no_dates: 'Select dates',\r\n mode_labels: { fullday: 'Full-day pick-up', transfer: 'Individual transfer' },\r\n truck_line: n => '4x4 Pick-up \u00d7 ' + n + ' day' + (n !== 1 ? 's' : ''),\r\n truck_line_multi: (pks, d) => pks > 1\r\n ? pks + '\u00d7 4x4 Pick-up \u00d7 ' + d + ' day' + (d !== 1 ? 's' : '')\r\n : '4x4 Pick-up \u00d7 ' + d + ' day' + (d !== 1 ? 's' : ''),\r\n guide_line: (p, d) => 'Guide \u00d7 ' + p + ' surfer' + (p > 1 ? 's' : '') + ' \u00d7 ' + d + 'd',\r\n surf_total: 'Surf transfers',\r\n board_total_line: 'Surfboard rental',\r\n empty: 'Set up your surf package to see breakdown',\r\n no_board: 'No board',\r\n board_1: '1 board',\r\n board_n: n => n + ' boards',\r\n board_total_label: 'Boards total: ',\r\n gp: n => n === 1 ? '1 surfer' : n + ' surfers',\r\n btn_sending: 'Sending\u2026',\r\n cf_title: 'Almost there\u2026',\r\n cf_subtitle: 'Leave your details so we can reach you',\r\n cf_mini_label: 'Estimated total',\r\n cf_label_name: 'Full name',\r\n cf_label_email: 'Email',\r\n cf_label_phone: 'Phone \/ WhatsApp',\r\n cf_err_name: 'Enter your full name',\r\n cf_err_email: 'Enter a valid email',\r\n cf_err_phone: 'Enter a phone number',\r\n cf_cancel: 'Cancel',\r\n cf_send: 'Confirm & send \ud83d\udce9',\r\n success_icon: '\ud83c\udf0a',\r\n success_title: 'Request sent!',\r\n success_msg: \"We've received your surf package quote. An agent will reach out to confirm availability. See you in the water! \ud83e\udd19\",\r\n success_chip: 'Response time: under 24 hours',\r\n error_icon: '\ud83d\ude15',\r\n error_title: 'Something went wrong',\r\n error_msg: 'Could not send. Try again or contact us via WhatsApp.',\r\n error_chip: 'Connection error',\r\n result_close: 'Got it'\r\n }\r\n};\r\n\r\nlet lang = 'es', days = 3, mode = 'fullday', persons = 2;\r\nlet spotSelections = {}, boardSelections = {};\r\n\r\nconst T = () => I18N[lang];\r\nconst N = () => persons;\r\nconst pickupsNeeded = () => Math.ceil(persons \/ 4);\r\n\r\nfunction changePersons(delta) {\r\n persons = Math.max(1, Math.min(10, persons + delta));\r\n document.getElementById('persons-display').textContent = persons;\r\n document.getElementById('persons-minus').disabled = persons <= 1;\r\n document.getElementById('persons-plus').disabled = persons >= 10;\r\n onPersonsChange();\r\n}\r\n\r\nfunction fmt(n) {\r\n if (n == null) return '\u2014';\r\n return 'US$ ' + n.toLocaleString('es-MX', { minimumFractionDigits: 2, maximumFractionDigits: 2 });\r\n}\r\n\r\nfunction isoDate(d) {\r\n return d.getFullYear() + '-' + String(d.getMonth() + 1).padStart(2, '0') + '-' + String(d.getDate()).padStart(2, '0');\r\n}\r\n\r\nfunction fmtDateShort(ds) {\r\n if (!ds) return '\u2014';\r\n const [y, m, d] = ds.split('-');\r\n const mo = lang === 'es'\r\n ? ['ene','feb','mar','abr','may','jun','jul','ago','sep','oct','nov','dic']\r\n : ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];\r\n return parseInt(d) + ' ' + mo[parseInt(m) - 1];\r\n}\r\n\r\nfunction initDates() {\r\n const today = new Date();\r\n const s = new Date(today); s.setDate(today.getDate() + 7);\r\n const e = new Date(s); e.setDate(s.getDate() + 2);\r\n document.getElementById('date-start').value = isoDate(s);\r\n document.getElementById('date-end').value = isoDate(e);\r\n document.getElementById('date-start').min = isoDate(today);\r\n document.getElementById('date-end').min = isoDate(today);\r\n}\r\n\r\nfunction onDateChange() {\r\n const s = document.getElementById('date-start').value;\r\n const e = document.getElementById('date-end').value;\r\n if (s) document.getElementById('date-end').min = s;\r\n if (s && e) {\r\n const diff = Math.round((new Date(e) - new Date(s)) \/ 864e5) + 1; \/\/ inclusive\r\n if (diff < 1) {\r\n document.getElementById('date-end').value = s;\r\n days = 1;\r\n } else {\r\n days = diff;\r\n }\r\n }\r\n document.getElementById('days-badge').textContent = T().days_badge(days);\r\n buildGuideOpts();\r\n buildSpotDays();\r\n buildBoardDays();\r\n recalculate();\r\n}\r\n\r\nfunction setMode(m) {\r\n mode = m;\r\n document.querySelectorAll('.mode-card').forEach(c => c.classList.remove('active'));\r\n document.getElementById('mode-' + m).classList.add('active');\r\n\r\n const t = T();\r\n\r\n \/\/ Hide spots for fullday (free roaming), show for transfer\r\n if (m === 'fullday') {\r\n document.getElementById('sec-spots').classList.add('hidden');\r\n } else {\r\n document.getElementById('sec-spots').classList.remove('hidden');\r\n document.getElementById('spots-hint').innerHTML = t['spots-hint-trans'];\r\n buildSpotDays();\r\n }\r\n\r\n recalculate();\r\n}\r\n\r\nfunction updateLargeGroupWarning() {\r\n const n = N(), pks = pickupsNeeded();\r\n const warning = document.getElementById('large-group-warning');\r\n const t = T();\r\n if (n > 4) {\r\n warning.classList.remove('hidden');\r\n document.getElementById('t-large-group').innerHTML = t.large_group_html(pks);\r\n } else {\r\n warning.classList.add('hidden');\r\n }\r\n}\r\n\r\nfunction onPersonsChange() {\r\n updateLargeGroupWarning();\r\n buildGuideOpts();\r\n buildBoardDays();\r\n recalculate();\r\n}\r\n\r\nfunction buildGuideOpts() {\r\n const sel = document.getElementById('guide-persons');\r\n const prev = parseInt(sel.value) || N();\r\n const n = N();\r\n sel.innerHTML = '';\r\n for (let i = 1; i <= n; i++) {\r\n const o = document.createElement('option');\r\n o.value = i;\r\n o.textContent = T().gp(i);\r\n if (i === Math.min(prev, n)) o.selected = true;\r\n sel.appendChild(o);\r\n }\r\n}\r\n\r\nfunction buildSpotDays() {\r\n const c = document.getElementById('spots-container');\r\n c.innerHTML = '';\r\n const t = T();\r\n\r\n \/\/ Clean old keys (and migrate any legacy individual-spot selections to zone ids)\r\n Object.keys(spotSelections).forEach(k => {\r\n if (parseInt(k) > days) { delete spotSelections[k]; return; }\r\n const v = spotSelections[k];\r\n if (v && v !== 'none' && v !== 'zona_1' && v !== 'zona_2') {\r\n \/\/ Map legacy individual spots to their zone\r\n if (['conejo','chivo','escondida'].includes(v)) spotSelections[k] = 'zona_1';\r\n else if (['chipehua','bamba','sandiego'].includes(v)) spotSelections[k] = 'zona_2';\r\n else spotSelections[k] = 'zona_1';\r\n }\r\n });\r\n\r\n for (let i = 1; i <= days; i++) {\r\n if (!(i in spotSelections)) spotSelections[i] = 'zona_1'; \/\/ default to option 1\r\n\r\n const row = document.createElement('div');\r\n row.className = 'day-row';\r\n\r\n const lbl = document.createElement('div');\r\n lbl.className = 'day-label';\r\n lbl.textContent = t.day(i);\r\n\r\n const wrap = document.createElement('div');\r\n wrap.className = 'day-select-wrap';\r\n\r\n const sel = document.createElement('select');\r\n sel.className = 'day-select';\r\n\r\n \/\/ \"No transfer\" option\r\n const noneOpt = document.createElement('option');\r\n noneOpt.value = 'none';\r\n noneOpt.textContent = t['surf-none'];\r\n if (spotSelections[i] === 'none') noneOpt.selected = true;\r\n sel.appendChild(noneOpt);\r\n\r\n \/\/ Two flat zone options\r\n SPOTS.forEach(sp => {\r\n const opt = document.createElement('option');\r\n opt.value = sp.val;\r\n opt.textContent = sp.label + ' \u2014 US$ ' + sp.price;\r\n if (spotSelections[i] === sp.val) opt.selected = true;\r\n sel.appendChild(opt);\r\n });\r\n\r\n const di = i;\r\n sel.addEventListener('change', e => {\r\n spotSelections[di] = e.target.value;\r\n updateSpotPrice(di);\r\n recalculate();\r\n });\r\n\r\n wrap.appendChild(sel);\r\n\r\n const tag = document.createElement('div');\r\n tag.className = 'day-price-tag';\r\n tag.id = 'spot-price-' + i;\r\n\r\n row.appendChild(lbl);\r\n row.appendChild(wrap);\r\n row.appendChild(tag);\r\n c.appendChild(row);\r\n\r\n updateSpotPrice(i);\r\n }\r\n}\r\n\r\nfunction updateSpotPrice(dayNum) {\r\n const tag = document.getElementById('spot-price-' + dayNum);\r\n if (!tag) return;\r\n const sel = spotSelections[dayNum];\r\n if (mode === 'transfer') {\r\n tag.textContent = (sel && sel !== 'none') ? fmt(PRICES.surf[sel]) : '\u2014';\r\n } else {\r\n \/\/ Full-day: no extra per-spot charge\r\n tag.textContent = (sel && sel !== 'none') ? '\u2713' : '\u2014';\r\n }\r\n}\r\n\r\nfunction onBoardToggle() {\r\n const checked = document.getElementById('board-check').checked;\r\n const container = document.getElementById('board-days-container');\r\n const totalWrap = document.getElementById('board-total-wrap');\r\n if (checked) {\r\n container.classList.remove('hidden');\r\n totalWrap.classList.remove('hidden');\r\n buildBoardDays();\r\n } else {\r\n container.classList.add('hidden');\r\n totalWrap.classList.add('hidden');\r\n Object.keys(boardSelections).forEach(k => boardSelections[k] = 0);\r\n }\r\n recalculate();\r\n}\r\n\r\nfunction buildBoardDays() {\r\n const c = document.getElementById('board-days-container');\r\n c.innerHTML = '';\r\n const n = N(), t = T();\r\n\r\n Object.keys(boardSelections).forEach(k => { if (parseInt(k) > days) delete boardSelections[k]; });\r\n\r\n for (let i = 1; i <= days; i++) {\r\n if (!(i in boardSelections)) boardSelections[i] = 0;\r\n\r\n const row = document.createElement('div');\r\n row.className = 'day-row';\r\n\r\n const lbl = document.createElement('div');\r\n lbl.className = 'day-label';\r\n lbl.textContent = t.day(i);\r\n\r\n const wrap = document.createElement('div');\r\n wrap.className = 'day-select-wrap';\r\n\r\n const sel = document.createElement('select');\r\n sel.className = 'day-select';\r\n\r\n sel.appendChild(Object.assign(document.createElement('option'), {\r\n value: '0', textContent: t.no_board, selected: boardSelections[i] === 0\r\n }));\r\n\r\n for (let j = 1; j <= n; j++) {\r\n const lb = j === 1 ? t.board_1 : t.board_n(j);\r\n sel.appendChild(Object.assign(document.createElement('option'), {\r\n value: String(j), textContent: lb, selected: boardSelections[i] === j\r\n }));\r\n }\r\n\r\n const di = i;\r\n sel.addEventListener('change', e => {\r\n boardSelections[di] = parseInt(e.target.value) || 0;\r\n updateBoardPrices();\r\n recalculate();\r\n });\r\n\r\n wrap.appendChild(sel);\r\n\r\n const tag = document.createElement('div');\r\n tag.className = 'day-price-tag';\r\n tag.id = 'board-day-price-' + i;\r\n const v = boardSelections[i] * PRICES.board;\r\n tag.textContent = v > 0 ? fmt(v) : '\u2014';\r\n\r\n row.appendChild(lbl);\r\n row.appendChild(wrap);\r\n row.appendChild(tag);\r\n c.appendChild(row);\r\n }\r\n updateBoardPrices();\r\n}\r\n\r\nfunction updateBoardPrices() {\r\n let tot = 0;\r\n for (let i = 1; i <= days; i++) {\r\n const v = (boardSelections[i] || 0) * PRICES.board;\r\n tot += v;\r\n const tag = document.getElementById('board-day-price-' + i);\r\n if (tag) tag.textContent = v > 0 ? fmt(v) : '\u2014';\r\n }\r\n const t = T();\r\n document.getElementById('board-total-display').textContent = tot > 0 ? t.board_total_label + fmt(tot) : '\u2014';\r\n}\r\n\r\nfunction getBoardTotal() {\r\n let t = 0;\r\n for (let i = 1; i <= days; i++) t += (boardSelections[i] || 0) * PRICES.board;\r\n return t;\r\n}\r\n\r\nfunction getActiveSurfDays() {\r\n let count = 0;\r\n for (let i = 1; i <= days; i++) {\r\n if (spotSelections[i] && spotSelections[i] !== 'none') count++;\r\n }\r\n return count;\r\n}\r\n\r\nfunction getSurfTransferTotal() {\r\n let t = 0;\r\n for (let i = 1; i <= days; i++) {\r\n const s = spotSelections[i];\r\n if (s && s !== 'none') t += PRICES.surf[s];\r\n }\r\n return t;\r\n}\r\n\r\nfunction recalculate() {\r\n updateAllSpotPrices();\r\n updateSummary();\r\n}\r\n\r\nfunction updateAllSpotPrices() {\r\n for (let i = 1; i <= days; i++) updateSpotPrice(i);\r\n}\r\n\r\nfunction updateSummary() {\r\n const t = T(), n = N(), gp = parseInt(document.getElementById('guide-persons').value) || 1;\r\n const rows = [];\r\n let total = 0;\r\n const activeDays = getActiveSurfDays();\r\n\r\n if (mode === 'fullday') {\r\n \/\/ Pickup: $95\/day per pickup needed (max 4 passengers + 1 guide per truck)\r\n \/\/ Non-surfing companions ride along at no extra cost\r\n const pks = pickupsNeeded();\r\n const truckCost = PRICES.truck * pks * days;\r\n total += truckCost;\r\n rows.push({ name: t.truck_line_multi(pks, days), val: fmt(truckCost) });\r\n\r\n \/\/ Guide: $30 \u00d7 SURFERS \u00d7 days (only those who surf)\r\n const guideCost = PRICES.guide_pp * gp * days;\r\n total += guideCost;\r\n rows.push({ name: t.guide_line(gp, days), val: fmt(guideCost) });\r\n } else {\r\n \/\/ Transfer mode: spot price per day \u00d7 vehicles needed\r\n const pks = pickupsNeeded();\r\n const surfCost = getSurfTransferTotal() * pks;\r\n if (surfCost > 0) {\r\n total += surfCost;\r\n const label = pks > 1 ? t.surf_total + ' (' + pks + ' veh.)' : t.surf_total;\r\n rows.push({ name: label, val: fmt(surfCost) });\r\n }\r\n\r\n \/\/ Guide: $30 \u00d7 SURFERS \u00d7 active days\r\n if (activeDays > 0) {\r\n const guideCost = PRICES.guide_pp * gp * activeDays;\r\n total += guideCost;\r\n rows.push({ name: t.guide_line(gp, activeDays), val: fmt(guideCost) });\r\n }\r\n }\r\n\r\n \/\/ Board rental\r\n const boardT = getBoardTotal();\r\n if (boardT > 0) {\r\n total += boardT;\r\n rows.push({ name: t.board_total_line, val: fmt(boardT) });\r\n }\r\n\r\n \/\/ Render\r\n document.getElementById('summary-items').innerHTML = rows.length\r\n ? rows.map(r => '<div class=\"summary-row\"><span class=\"summary-row-name\">' + r.name + '<\/span><span class=\"summary-row-val\">' + r.val + '<\/span><\/div>').join('')\r\n : '<div class=\"summary-empty\">' + t.empty + '<\/div>';\r\n\r\n const startD = document.getElementById('date-start').value;\r\n const endD = document.getElementById('date-end').value;\r\n document.getElementById('sum-dates-label').textContent = (startD && endD) ? fmtDateShort(startD) + ' \u2192 ' + fmtDateShort(endD) : t.no_dates;\r\n document.getElementById('sum-mode-label').textContent = t.mode_labels[mode];\r\n document.getElementById('total-display').textContent = fmt(total);\r\n document.getElementById('ppp-display').textContent = t.ppp(fmt(total \/ (n || 1)));\r\n document.getElementById('sum-config-label').textContent = t.days_config(days, n);\r\n document.getElementById('note-currency').textContent = t.note;\r\n\r\n \/\/ Large group note in summary\r\n const lgNote = document.getElementById('large-group-summary-note');\r\n if (n > 4) {\r\n const pks = pickupsNeeded();\r\n lgNote.classList.remove('hidden');\r\n document.getElementById('t-large-group-summary').textContent = lang === 'es'\r\n ? '\u26a0\ufe0f ' + pks + ' pick-ups necesarios \u00b7 Cotizaci\u00f3n sujeta a confirmaci\u00f3n'\r\n : '\u26a0\ufe0f ' + pks + ' pick-ups required \u00b7 Quote subject to confirmation';\r\n } else {\r\n lgNote.classList.add('hidden');\r\n }\r\n}\r\n\r\n\/* --- CONTACT FORM --- *\/\r\nfunction buildPayload() {\r\n const t = T(), n = N(), gp = parseInt(document.getElementById('guide-persons').value) || 1;\r\n const startD = document.getElementById('date-start').value;\r\n const endD = document.getElementById('date-end').value;\r\n let total = 0;\r\n\r\n \/\/ Human-readable names (what n8n \/ HubSpot actually receive)\r\n const SPOT_NAMES = {\r\n zona_1: 'Zona Conejo, Chivo, Escondida',\r\n zona_2: 'Zona Chipehua, Bamba, San Diego'\r\n };\r\n\r\n \/\/ ---- Base payload (always present) ----\r\n const payload = {\r\n enviado: new Date().toISOString(),\r\n idioma: lang,\r\n tipo: 'paquete_surf',\r\n modo: mode === 'fullday' ? 'pickup_todo_el_dia' : 'traslado_individual',\r\n primer_dia: startD || null,\r\n ultimo_dia: endD || null,\r\n dias: days,\r\n personas: n,\r\n surfistas: gp,\r\n acompanantes: n - gp\r\n };\r\n\r\n \/\/ ---- Mode-specific base (pick-up \/ gu\u00eda charges) ----\r\n if (mode === 'fullday') {\r\n const pks = pickupsNeeded();\r\n payload.pickup_4x4 = 's\u00ed';\r\n payload.cantidad_pickups = pks;\r\n payload.pickup_precio_dia = PRICES.truck;\r\n payload.pickup_subtotal = PRICES.truck * pks * days;\r\n total += payload.pickup_subtotal;\r\n\r\n payload.guia_precio_pp_dia = PRICES.guide_pp;\r\n payload.guia_dias = days;\r\n payload.guia_subtotal = PRICES.guide_pp * gp * days;\r\n total += payload.guia_subtotal;\r\n } else {\r\n const pks = pickupsNeeded();\r\n payload.pickup_4x4 = 'no';\r\n payload.cantidad_vehiculos = pks;\r\n const activeDays = getActiveSurfDays();\r\n\r\n if (activeDays > 0) {\r\n payload.traslados_subtotal = getSurfTransferTotal() * pks;\r\n total += payload.traslados_subtotal;\r\n\r\n payload.guia_precio_pp_dia = PRICES.guide_pp;\r\n payload.guia_dias = activeDays;\r\n payload.guia_subtotal = PRICES.guide_pp * gp * activeDays;\r\n total += payload.guia_subtotal;\r\n }\r\n }\r\n\r\n \/\/ ---- Destinos: solo aparecen si modo=transfer y el d\u00eda tiene selecci\u00f3n ----\r\n if (mode === 'transfer') {\r\n let totalDestinos = 0;\r\n for (let i = 1; i <= days; i++) {\r\n const s = spotSelections[i];\r\n if (s && s !== 'none') {\r\n payload['destino_dia_' + i] = SPOT_NAMES[s] || s;\r\n payload['destino_dia_' + i + '_precio'] = PRICES.surf[s];\r\n totalDestinos++;\r\n }\r\n }\r\n if (totalDestinos > 0) payload.dias_con_traslado = totalDestinos;\r\n }\r\n\r\n \/\/ ---- Tablas: solo aparecen los d\u00edas donde se seleccionaron tablas ----\r\n let boardT = 0, boardsTotal = 0;\r\n for (let i = 1; i <= days; i++) {\r\n const bv = boardSelections[i] || 0;\r\n if (bv > 0) {\r\n payload['tablas_dia_' + i] = bv;\r\n const daySubtotal = bv * PRICES.board;\r\n payload['tablas_dia_' + i + '_subtotal'] = daySubtotal;\r\n boardT += daySubtotal;\r\n boardsTotal += bv;\r\n }\r\n }\r\n if (boardsTotal > 0) {\r\n payload.tablas_total_unidades = boardsTotal;\r\n payload.tablas_precio_dia = PRICES.board;\r\n payload.tablas_subtotal = boardT;\r\n }\r\n total += boardT;\r\n\r\n \/\/ ---- Totales ----\r\n payload.total = total;\r\n payload.total_formateado = fmt(total);\r\n payload.por_persona = total \/ (n || 1);\r\n payload.por_persona_formateado = fmt(total \/ (n || 1));\r\n payload.grupo_grande = n > 4;\r\n\r\n return payload;\r\n}\r\n\r\nfunction openCF() {\r\n const t = T(), payload = buildPayload();\r\n document.getElementById('cf-title').textContent = t.cf_title;\r\n document.getElementById('cf-subtitle').textContent = t.cf_subtitle;\r\n document.getElementById('cf-mini-label').textContent = t.cf_mini_label;\r\n document.getElementById('cf-mini-total').textContent = payload.total_formateado;\r\n document.getElementById('cf-label-name').textContent = t.cf_label_name;\r\n document.getElementById('cf-label-email').textContent = t.cf_label_email;\r\n document.getElementById('cf-label-phone').textContent = t.cf_label_phone;\r\n document.getElementById('cf-err-name').textContent = t.cf_err_name;\r\n document.getElementById('cf-err-email').textContent = t.cf_err_email;\r\n document.getElementById('cf-err-phone').textContent = t.cf_err_phone;\r\n document.getElementById('cf-btn-cancel').textContent = t.cf_cancel;\r\n document.getElementById('cf-btn-label').textContent = t.cf_send;\r\n ['cf-name','cf-email','cf-phone'].forEach(id => document.getElementById(id).classList.remove('invalid'));\r\n ['cf-err-name','cf-err-email','cf-err-phone'].forEach(id => document.getElementById(id).classList.remove('show'));\r\n document.getElementById('cf-overlay').classList.add('visible');\r\n document.body.style.overflow = 'hidden';\r\n setTimeout(() => document.getElementById('cf-name').focus(), 320);\r\n}\r\n\r\nfunction closeCF() {\r\n document.getElementById('cf-overlay').classList.remove('visible');\r\n document.body.style.overflow = '';\r\n}\r\n\r\nfunction validateCF() {\r\n let ok = true;\r\n const name = document.getElementById('cf-name').value.trim();\r\n const email = document.getElementById('cf-email').value.trim();\r\n const phone = document.getElementById('cf-phone').value.trim();\r\n const re = \/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/;\r\n const chk = (inp, err, bad) => {\r\n document.getElementById(inp).classList.toggle('invalid', bad);\r\n document.getElementById(err).classList.toggle('show', bad);\r\n if (bad) ok = false;\r\n };\r\n chk('cf-name', 'cf-err-name', name.length < 2);\r\n chk('cf-email', 'cf-err-email', !re.test(email));\r\n chk('cf-phone', 'cf-err-phone', phone.length < 6);\r\n return ok;\r\n}\r\n\r\nasync function confirmAndSend() {\r\n if (!validateCF()) return;\r\n const t = T(), btn = document.getElementById('cf-btn-send'), label = document.getElementById('cf-btn-label');\r\n btn.disabled = true;\r\n label.innerHTML = '<span class=\"btn-spinner\"><\/span> ' + t.btn_sending;\r\n\r\n \/\/ Flat payload: contact fields at top level (no nested object)\r\n const payload = {\r\n nombre: document.getElementById('cf-name').value.trim(),\r\n email: document.getElementById('cf-email').value.trim(),\r\n telefono: document.getElementById('cf-phone').value.trim(),\r\n ...buildPayload()\r\n };\r\n\r\n try {\r\n const res = await fetch('https:\/\/vmi3015988.contaboserver.net\/webhook\/majeva', {\r\n method: 'POST', headers: { 'Content-Type': 'application\/json' }, body: JSON.stringify(payload)\r\n });\r\n if (!res.ok) throw new Error('HTTP ' + res.status);\r\n closeCF(); showResult(true);\r\n } catch (err) {\r\n console.error(err);\r\n closeCF(); showResult(false);\r\n } finally {\r\n btn.disabled = false;\r\n label.textContent = t.cf_send;\r\n }\r\n}\r\n\r\nfunction showResult(ok) {\r\n const t = T(), card = document.getElementById('result-card');\r\n card.classList.toggle('is-error', !ok);\r\n document.getElementById('result-icon').textContent = ok ? t.success_icon : t.error_icon;\r\n document.getElementById('result-title').textContent = ok ? t.success_title : t.error_title;\r\n document.getElementById('result-msg').textContent = ok ? t.success_msg : t.error_msg;\r\n document.getElementById('result-chip-text').textContent = ok ? t.success_chip : t.error_chip;\r\n document.getElementById('result-close-btn').textContent = t.result_close;\r\n document.getElementById('result-overlay').classList.add('visible');\r\n document.body.style.overflow = 'hidden';\r\n}\r\n\r\nfunction closeResult() {\r\n document.getElementById('result-overlay').classList.remove('visible');\r\n document.body.style.overflow = '';\r\n}\r\n\r\n\/\/ Overlay close handlers\r\ndocument.getElementById('cf-overlay').addEventListener('click', function(e) { if (e.target === this) closeCF(); });\r\ndocument.getElementById('result-overlay').addEventListener('click', function(e) { if (e.target === this) closeResult(); });\r\ndocument.addEventListener('keydown', e => { if (e.key === 'Escape') { closeCF(); closeResult(); } });\r\n\r\n\/* --- LANGUAGE --- *\/\r\nfunction setLang(l) {\r\n lang = l;\r\n document.getElementById('btn-es').classList.toggle('active', l === 'es');\r\n document.getElementById('btn-en').classList.toggle('active', l === 'en');\r\n const t = I18N[l];\r\n\r\n \/\/ Simple text replacements\r\n ['hero-title','hero-note','t-config-title','t-persons-label',\r\n 't-start-label','t-end-label','t-mode-title','t-mode-sub','t-mode-full-name','t-mode-full-desc',\r\n 't-mode-full-price','t-mode-trans-name','t-mode-trans-desc','t-mode-trans-price',\r\n 't-guide-title','t-guide-sub','t-guide-persons-label','t-guide-price-unit','t-companions-note',\r\n 't-spots-title','t-spots-sub',\r\n 't-board-title','t-board-sub','t-board-check-name','t-board-check-desc',\r\n 't-quote-title','t-sum-mode-key','t-sum-dates-key','t-sum-config-key','t-total-label'\r\n ].forEach(id => {\r\n const el = document.getElementById(id);\r\n if (el && t[id] !== undefined) el.textContent = t[id];\r\n });\r\n\r\n \/\/ innerHTML items\r\n document.getElementById('t-guide-mandatory').innerHTML = t['t-guide-mandatory'];\r\n if (mode === 'transfer') {\r\n document.getElementById('spots-hint').innerHTML = t['spots-hint-trans'];\r\n }\r\n document.getElementById('btn-contact-label').textContent = t['btn-contact'];\r\n document.getElementById('days-badge').textContent = t.days_badge(days);\r\n document.getElementById('persons-inline-label').textContent = l === 'es' ? 'personas' : 'people';\r\n\r\n \/\/ Update large group warning\r\n updateLargeGroupWarning();\r\n\r\n buildGuideOpts();\r\n buildSpotDays();\r\n buildBoardDays();\r\n recalculate();\r\n}\r\n\r\n\/* --- INIT --- *\/\r\ninitDates();\r\nonDateChange();\r\ndocument.getElementById('persons-minus').disabled = persons <= 1;\r\ndocument.getElementById('persons-plus').disabled = persons >= 10;\r\nbuildGuideOpts();\r\nsetMode('fullday');\r\n<\/script>\r\n<\/body>\r\n<\/html>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Paquete Surf \u2014 Casa Majeva 2026 ✕ \ud83d\udcf1 Casa Majeva \ud83c\uddf2\ud83c\uddfd ES \ud83c\uddfa\ud83c\uddf8 EN \ud83c\udfc4 Paquete Surf 2026 Oaxaca \u00b7 Istmo de Tehuantepec Para hu\u00e9spedes ya hospedados \ud83d\udcc5 Fechas del servicio N\u00famero de personas \u2212 2 + personas \ud83d\ude99 Tu grupo necesita 2 pick-ups (m\u00e1x. 4 personas + 1 gu\u00eda por veh\u00edculo). Un agente confirmar\u00e1 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Cotizador surf - Casa Majeva<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/casamajeva.com\/en\/cotizador\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Cotizador surf - Casa Majeva\" \/>\n<meta property=\"og:description\" content=\"Paquete Surf \u2014 Casa Majeva 2026 ✕ \ud83d\udcf1 Casa Majeva \ud83c\uddf2\ud83c\uddfd ES \ud83c\uddfa\ud83c\uddf8 EN \ud83c\udfc4 Paquete Surf 2026 Oaxaca \u00b7 Istmo de Tehuantepec Para hu\u00e9spedes ya hospedados \ud83d\udcc5 Fechas del servicio N\u00famero de personas \u2212 2 + personas \ud83d\ude99 Tu grupo necesita 2 pick-ups (m\u00e1x. 4 personas + 1 gu\u00eda por veh\u00edculo). Un agente confirmar\u00e1 […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/casamajeva.com\/en\/cotizador\/\" \/>\n<meta property=\"og:site_name\" content=\"Casa Majeva\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/profile.php?id=61556484365892&locale=es_LA\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-19T20:36:37+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/casamajeva.com\/cotizador\/\",\"url\":\"https:\/\/casamajeva.com\/cotizador\/\",\"name\":\"Cotizador surf - Casa Majeva\",\"isPartOf\":{\"@id\":\"https:\/\/casamajeva.com\/#website\"},\"datePublished\":\"2026-03-28T00:29:28+00:00\",\"dateModified\":\"2026-04-19T20:36:37+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/casamajeva.com\/cotizador\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/casamajeva.com\/cotizador\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/casamajeva.com\/cotizador\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Inicio\",\"item\":\"https:\/\/casamajeva.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Cotizador surf\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/casamajeva.com\/#website\",\"url\":\"https:\/\/casamajeva.com\/\",\"name\":\"Casa Majeva\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/casamajeva.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/casamajeva.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/casamajeva.com\/#organization\",\"name\":\"Casa Majeva\",\"url\":\"https:\/\/casamajeva.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/casamajeva.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/casamajeva.com\/wp-content\/uploads\/2024\/03\/cropped-Majeva-logo-blanco.png\",\"contentUrl\":\"https:\/\/casamajeva.com\/wp-content\/uploads\/2024\/03\/cropped-Majeva-logo-blanco.png\",\"width\":512,\"height\":512,\"caption\":\"Casa Majeva\"},\"image\":{\"@id\":\"https:\/\/casamajeva.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/profile.php?id=61556484365892&locale=es_LA\",\"https:\/\/www.instagram.com\/casa_majeva\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Cotizador surf - Casa Majeva","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/casamajeva.com\/en\/cotizador\/","og_locale":"en_US","og_type":"article","og_title":"Cotizador surf - Casa Majeva","og_description":"Paquete Surf \u2014 Casa Majeva 2026 ✕ \ud83d\udcf1 Casa Majeva \ud83c\uddf2\ud83c\uddfd ES \ud83c\uddfa\ud83c\uddf8 EN \ud83c\udfc4 Paquete Surf 2026 Oaxaca \u00b7 Istmo de Tehuantepec Para hu\u00e9spedes ya hospedados \ud83d\udcc5 Fechas del servicio N\u00famero de personas \u2212 2 + personas \ud83d\ude99 Tu grupo necesita 2 pick-ups (m\u00e1x. 4 personas + 1 gu\u00eda por veh\u00edculo). Un agente confirmar\u00e1 […]","og_url":"https:\/\/casamajeva.com\/en\/cotizador\/","og_site_name":"Casa Majeva","article_publisher":"https:\/\/www.facebook.com\/profile.php?id=61556484365892&locale=es_LA","article_modified_time":"2026-04-19T20:36:37+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/casamajeva.com\/cotizador\/","url":"https:\/\/casamajeva.com\/cotizador\/","name":"Cotizador surf - Casa Majeva","isPartOf":{"@id":"https:\/\/casamajeva.com\/#website"},"datePublished":"2026-03-28T00:29:28+00:00","dateModified":"2026-04-19T20:36:37+00:00","breadcrumb":{"@id":"https:\/\/casamajeva.com\/cotizador\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/casamajeva.com\/cotizador\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/casamajeva.com\/cotizador\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Inicio","item":"https:\/\/casamajeva.com\/"},{"@type":"ListItem","position":2,"name":"Cotizador surf"}]},{"@type":"WebSite","@id":"https:\/\/casamajeva.com\/#website","url":"https:\/\/casamajeva.com\/","name":"Casa Majeva","description":"","publisher":{"@id":"https:\/\/casamajeva.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/casamajeva.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/casamajeva.com\/#organization","name":"Casa Majeva","url":"https:\/\/casamajeva.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/casamajeva.com\/#\/schema\/logo\/image\/","url":"https:\/\/casamajeva.com\/wp-content\/uploads\/2024\/03\/cropped-Majeva-logo-blanco.png","contentUrl":"https:\/\/casamajeva.com\/wp-content\/uploads\/2024\/03\/cropped-Majeva-logo-blanco.png","width":512,"height":512,"caption":"Casa Majeva"},"image":{"@id":"https:\/\/casamajeva.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/profile.php?id=61556484365892&locale=es_LA","https:\/\/www.instagram.com\/casa_majeva"]}]}},"_links":{"self":[{"href":"https:\/\/casamajeva.com\/en\/wp-json\/wp\/v2\/pages\/1930"}],"collection":[{"href":"https:\/\/casamajeva.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/casamajeva.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/casamajeva.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/casamajeva.com\/en\/wp-json\/wp\/v2\/comments?post=1930"}],"version-history":[{"count":34,"href":"https:\/\/casamajeva.com\/en\/wp-json\/wp\/v2\/pages\/1930\/revisions"}],"predecessor-version":[{"id":1969,"href":"https:\/\/casamajeva.com\/en\/wp-json\/wp\/v2\/pages\/1930\/revisions\/1969"}],"wp:attachment":[{"href":"https:\/\/casamajeva.com\/en\/wp-json\/wp\/v2\/media?parent=1930"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}