/* Tema de la presentación de PatientOp. Marca tomada de patientop.com (logo, azul #0459A8/#047ECC, verde #60B63C/#178B59, Inter).
   Reglas: texto que se lee, mínimo 28 px; titular de contenido siempre en la misma posición (.cabecera);
   contenido en la zona .contenido; nodos opacos para que las líneas terminen en su borde. */
:root {
  --c-fondo: #050f26;
  --c-texto: #ffffff;
  --c-suave: rgba(225, 235, 255, 0.78);
  --c-acento: #60b63c;
  --c-acento-2: #047ecc;
  --c-azul: #0459a8;
  --c-verde-osc: #178b59;
  --c-linea: rgba(255, 255, 255, 0.16);
  --c-tarjeta: #0c1c42;
  --f-titulo: "Inter", system-ui, sans-serif;
  --f-texto: "Inter", system-ui, sans-serif;
}

.deck-fondo { background: radial-gradient(ellipse at 25% 15%, #0a2a66 0%, #050f26 55%, #030916 100%); }
#malla { position: absolute; inset: 0; }

/* Tipografía del tema */
.kicker { font-size: 28px; letter-spacing: 0.2em; color: var(--c-acento); }
.titulo, .titulo-m, .titulo-xl { font-weight: 800; }
.titulo-m { font-size: 80px; letter-spacing: -0.035em; }
.titulo { font-size: 116px; letter-spacing: -0.04em; }
.titulo-xl { font-size: 170px; letter-spacing: -0.05em; }
.bajada { font-size: 40px; }
.degradado, .degradado * { background: linear-gradient(100deg, #2aa0f0, #60b63c); -webkit-background-clip: text; background-clip: text; color: transparent; }
.chip { font-size: 30px; padding: 16px 30px; background: var(--c-tarjeta); gap: 14px; }
.chip .icono { width: 34px; height: 34px; }

/* Retícula: titular arriba, contenido debajo */
.cabecera { position: absolute; top: 88px; left: 140px; right: 140px; z-index: 2; }
.cabecera .titulo-m { margin-top: 16px; max-width: 1640px; }
.contenido { position: absolute; top: 330px; bottom: 90px; left: 140px; right: 140px; display: flex; align-items: center; justify-content: center; gap: 90px; z-index: 1; }
.lienzo { position: absolute; inset: 0; }
.lienzo > .nodo, .lienzo > .nucleo, .lienzo > .agenda, .lienzo > .bandeja, .lienzo > .conector, .lienzo > .rama { position: absolute; }
.texto-centro { position: relative; z-index: 2; text-align: center; }
.texto-centro .titulo { margin-top: 20px; }

/* Nodos y núcleo (opacos) */
.nodo { width: 240px; height: 200px; font-size: 28px; line-height: 1.15; background: var(--c-tarjeta); border: 2px solid var(--c-linea); border-radius: 36px; padding: 0 14px; }
.nodo .icono { width: 64px; height: 64px; color: var(--c-acento); }
.nucleo { width: 440px; height: 250px; border-radius: 48px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: linear-gradient(145deg, #0d3a86, #0b5a52); border: 3px solid rgba(96, 182, 60, 0.7); box-shadow: 0 0 90px rgba(4, 126, 204, 0.35); }
.nucleo .icono { width: 72px; height: 72px; color: #fff; }
.nucleo b { font-size: 54px; font-weight: 800; }
.nucleo span { font-size: 28px; color: var(--c-suave); }
.nucleo-chico { width: 320px; height: 300px; }
.nucleo-pin { width: 96px; height: 118px; }

/* Portada y pedido */
.lockup { display: flex; align-items: center; gap: 30px; margin-bottom: 40px; }
.pin-grande { width: 150px; height: 185px; filter: drop-shadow(0 12px 40px rgba(4, 126, 204, 0.45)); }
.wordmark { font-size: 140px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.wordmark .op { color: var(--c-acento); }
.portada-titulo { font-size: 120px; }
.portada-lema { margin-top: 26px; font-size: 44px; color: var(--c-suave); }
.portada-lema em { font-style: italic; color: var(--c-acento); }
.pie-portada { position: absolute; bottom: 64px; left: 0; right: 0; text-align: center; font-size: 30px; font-weight: 600; letter-spacing: 0.06em; color: var(--c-suave); }
.lockup-chico .pin-grande { width: 96px; height: 118px; }
.lockup-chico .wordmark { font-size: 84px; }
.pedido-titulo { font-size: 104px; }
.pedido-paso { margin-top: 30px; font-size: 42px; color: var(--c-suave); }
.pedido-botones { display: flex; gap: 28px; margin-top: 46px; }
.boton-cta { padding: 26px 56px; border-radius: 999px; font-size: 36px; font-weight: 700; background: linear-gradient(90deg, #047ecc, #60b63c); box-shadow: 0 16px 50px rgba(96, 182, 60, 0.35); }
.boton-sec { padding: 26px 50px; border-radius: 999px; font-size: 36px; font-weight: 600; border: 2px solid var(--c-linea); background: var(--c-tarjeta); }

/* Indicador de capítulo (fuera del escenario, escala con la ventana) */
.capitulos { position: fixed; top: calc(24px * var(--escala)); right: calc(40px * var(--escala)); z-index: 4; display: flex; gap: calc(10px * var(--escala)); opacity: 0; transition: opacity 0.4s; pointer-events: none; }
.capitulos.visible { opacity: 1; }
.capitulos span { font-size: calc(26px * var(--escala)); font-weight: 600; padding: calc(8px * var(--escala)) calc(16px * var(--escala)); border-radius: 999px; color: rgba(255, 255, 255, 0.45); border: 1px solid rgba(255, 255, 255, 0.12); }
.capitulos span.hecha { color: rgba(255, 255, 255, 0.75); }
.capitulos span.actual { color: #061431; background: var(--c-acento); border-color: var(--c-acento); }

/* 2. Problema */
#problema .nodo { width: 200px; height: 180px; font-size: 28px; }
#problema .nodo-pms { border-color: rgba(96, 182, 60, 0.6); }

/* 4. Cinco partes */
#cinco { flex-direction: row; align-items: center; gap: 40px; }
.cinco-izq { width: 700px; display: flex; flex-direction: column; gap: 28px; }
.anillo { position: relative; width: 900px; height: 900px; }
.anillo > svg { width: 100%; height: 100%; overflow: visible; }
.anillo-etiqueta { position: absolute; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 12px; padding: 16px 26px; border-radius: 999px; background: var(--c-tarjeta); border: 2px solid var(--c-linea); font-size: 30px; font-weight: 700; white-space: nowrap; }
.anillo-etiqueta b { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--c-acento); color: #061431; font-size: 24px; }
.anillo-centro { position: absolute; left: 50%; top: 50%; width: 150px; height: 185px; transform: translate(-50%, -50%); }

/* Divisores */
.divisor .titulo-xl { margin: 20px 0 30px; }
.envivo-cliente { display: flex; flex-direction: column; align-items: center; gap: 30px; }
.k2d-logo { display: inline-flex; background: #fff; border-radius: 28px; padding: 22px 44px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35); }
.k2d-logo img { height: 110px; width: auto; }
#puerta .bajada { max-width: 1300px; }

/* 6. Web */
.web-contenido { justify-content: space-between; }
.lista { list-style: none; display: flex; flex-direction: column; gap: 34px; width: 620px; flex: none; }
.lista li { display: flex; align-items: center; gap: 24px; font-size: 40px; font-weight: 600; }
.lista .icono { width: 52px; height: 52px; }
.idioma { color: var(--c-acento); display: inline-block; min-width: 220px; }
.web-visual { position: relative; width: 980px; height: 640px; flex: none; }
.web-visual .navegador { position: absolute; left: 0; top: 60px; width: 880px; z-index: 3; }
.pantallas { position: relative; aspect-ratio: 1440 / 900; background: #0b2a63; }
.pantallas img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.sede-carta { position: absolute; width: 560px; border-radius: 18px; overflow: hidden; border: 3px solid rgba(255, 255, 255, 0.85); box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5); }
.sede-carta img { width: 100%; }
.sede-carta.c2 { right: 0; top: 0; z-index: 2; }
.sede-carta.c3 { right: 40px; top: -60px; z-index: 1; opacity: 0.8; }

/* 7. Reserva: formulario redibujado, legible */
.tel-form { width: 440px; }
.form-movil { aspect-ratio: auto; height: 700px; background: #f4f6fb; color: #0f1b33; display: flex; flex-direction: column; gap: 18px; padding: 0 0 22px; }
.fm-cab { background: #0459a8; color: #fff; padding: 34px 28px 26px; display: flex; flex-direction: column; gap: 6px; }
.fm-cab small { font-size: 18px; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.8; }
.fm-cab b { font-size: 34px; line-height: 1.15; }
.fm-campo { margin: 0 24px; display: flex; flex-direction: column; gap: 6px; }
.fm-campo span { font-size: 18px; font-weight: 600; color: #6b7690; text-transform: uppercase; letter-spacing: 0.08em; }
.fm-campo b { height: 62px; border-radius: 14px; background: #fff; border: 2px solid #dfe5ef; display: flex; align-items: center; padding: 0 18px; font-size: 26px; font-weight: 600; }
.fm-horas { margin: 4px 24px 0; display: flex; gap: 12px; }
.fm-horas i { flex: 1; height: 58px; border-radius: 14px; border: 2px solid #dfe5ef; background: #fff; display: flex; align-items: center; justify-content: center; font-style: normal; font-size: 24px; font-weight: 700; }
.fm-horas i.sel { background: #60b63c; border-color: #60b63c; color: #fff; }
.fm-boton { margin: 8px 24px 0; height: 66px; border-radius: 999px; background: #0459a8; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 700; letter-spacing: 0.04em; }
.fm-letra { margin: 0 30px; font-size: 16px; line-height: 1.35; color: #6b7690; text-align: center; }
.agenda { width: 720px; border-radius: 30px; background: #fff; color: #0f1b33; padding: 30px 32px; box-shadow: 0 40px 100px rgba(0, 0, 0, 0.45); }
.agenda-cab { display: flex; align-items: center; gap: 14px; font-size: 30px; margin-bottom: 16px; color: #0459a8; }
.agenda-cab .icono { color: #0459a8; width: 38px; height: 38px; }
.agenda-fila { display: flex; align-items: center; gap: 20px; padding: 10px 0; border-top: 1px solid #eef1f6; font-size: 26px; color: #6b7690; }
.agenda-fila > span { width: 84px; font-weight: 600; }
.cita { flex: 1; height: 64px; border-radius: 14px; background: #e7ecf5; color: #56607a; display: flex; align-items: center; padding: 0 20px; font-weight: 600; font-size: 26px; }
.cita.libre { background: repeating-linear-gradient(135deg, #f4f6fa 0 10px, #fff 10px 20px); }
.cita.nueva { background: linear-gradient(90deg, #0459a8, #60b63c); color: #fff; gap: 12px; }
.cita.nueva .icono { color: #fff; width: 30px; height: 30px; }

/* Cifras gigantes */
.cifra-gigante { font-size: 280px; font-weight: 900; letter-spacing: -0.025em; line-height: 0.9; font-variant-numeric: tabular-nums; background: linear-gradient(100deg, #2aa0f0, #60b63c); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cifra-texto { margin-top: 30px; font-size: 56px; font-weight: 700; line-height: 1.2; }
.cifra-pie { margin-top: 26px; font-size: 36px; color: var(--c-suave); }

/* 9. Escribir contra dictar */
.versus { top: 320px; bottom: 250px; display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: stretch; }
.lado { display: flex; flex-direction: column; justify-content: flex-start; gap: 28px; padding-top: 44px; }
.lado-cab { display: flex; align-items: center; gap: 16px; font-size: 38px; font-weight: 700; }
.lado-bueno { border-color: rgba(96, 182, 60, 0.6); box-shadow: 0 0 60px rgba(96, 182, 60, 0.15); }
.onda-ruido { height: 110px; display: flex; align-items: center; gap: 6px; }
.onda-ruido i { flex: 1; background: rgba(255, 255, 255, 0.4); border-radius: 4px; height: 20%; }
.deletreo { font-size: 44px; font-style: italic; color: #ffb4a8; }
.campo { height: 100px; border-radius: 20px; background: #fff; color: #0f1b33; display: flex; align-items: center; padding: 0 28px; font-size: 40px; font-weight: 700; }
.cursor { display: inline-block; width: 4px; height: 48px; background: #047ecc; margin-left: 4px; }
.lado-nota { font-size: 32px; color: var(--c-suave); }
.ventajas { position: absolute; left: 140px; right: 140px; bottom: 110px; display: flex; justify-content: center; gap: 26px; }
.tarjeta { background: var(--c-tarjeta); border: 2px solid var(--c-linea); }

/* 10. Teléfono */
.tel-contenido { justify-content: space-between; }
.chips-grid { display: grid; grid-template-columns: 1fr; gap: 22px; width: 720px; }
.chips-grid .chip { font-size: 36px; padding: 22px 34px; }
.chips-grid .chip .icono { width: 42px; height: 42px; }
.voz-visual { display: flex; flex-direction: column; align-items: center; gap: 50px; width: 820px; }
.voz-circulo { width: 220px; height: 220px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: linear-gradient(145deg, #047ecc, #60b63c); box-shadow: 0 0 100px rgba(4, 126, 204, 0.5); }
.voz-circulo .icono { color: #fff; width: 96px; height: 96px; }
.barras { display: flex; align-items: center; gap: 9px; height: 170px; }
.barras i { width: 14px; height: 30%; border-radius: 7px; background: linear-gradient(180deg, #2aa0f0, #60b63c); }

/* 12. Seguro */
.nodo-escudo { border-color: rgba(96, 182, 60, 0.7); box-shadow: 0 0 50px rgba(96, 182, 60, 0.2); }
.rama { display: flex; flex-direction: column; gap: 14px; }
.rama .nodo { position: relative; height: 150px; }
.etiqueta-rama { font-size: 26px; font-weight: 700; color: var(--c-acento); letter-spacing: 0.1em; text-transform: uppercase; }
#seguro .rama { margin-top: -54px; }

/* 13. Avisos */
.bandeja { width: 720px; display: flex; align-items: center; gap: 28px; padding: 30px 36px; border-radius: 28px; background: var(--c-tarjeta); border: 2px solid var(--c-linea); }
.bandeja .icono { width: 60px; height: 60px; }
.bandeja b { display: block; font-size: 40px; }
.bandeja span { font-size: 30px; color: var(--c-suave); }
.sobre { position: absolute; width: 48px; height: 48px; margin: -24px 0 0 -24px; color: #fff; z-index: 3; }

/* 14. Escalera */
.escalera { position: absolute; left: 140px; right: 140px; bottom: 100px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; align-items: end; }
.peldano { background: var(--c-tarjeta); border: 2px solid var(--c-linea); border-radius: 30px; padding: 36px; display: flex; flex-direction: column; gap: 18px; }
.peldano:nth-child(1) { height: 400px; } .peldano:nth-child(2) { height: 470px; } .peldano:nth-child(3) { height: 540px; } .peldano:nth-child(4) { height: 610px; }
.peldano .num { flex: none; width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(96, 182, 60, 0.2); color: var(--c-acento); font-weight: 800; font-size: 28px; }
.peldano b { font-size: 50px; font-weight: 800; }
.peldano p { font-size: 32px; line-height: 1.3; color: var(--c-suave); }
.peldano-final { background: linear-gradient(160deg, #0d3a86, #0b5a52); border-color: rgba(96, 182, 60, 0.7); }
.peldano-final p { color: #fff; }

/* 16. Atraer */
.panel-fuentes { width: 1300px; padding: 50px 60px; display: flex; flex-direction: column; gap: 30px; }
.panel-titulo { font-size: 32px; font-weight: 600; color: var(--c-suave); }
.barra-fuente { display: grid; grid-template-columns: 420px 1fr 120px; align-items: center; gap: 30px; font-size: 34px; font-weight: 600; }
.barra-fuente span { display: flex; align-items: center; gap: 16px; }
.barra-fuente .icono { width: 40px; height: 40px; }
.barra-fuente b { height: 30px; border-radius: 15px; background: rgba(255, 255, 255, 0.08); position: relative; overflow: hidden; }
.barra-fuente b i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 15px; background: linear-gradient(90deg, #047ecc, #60b63c); }
.barra-fuente em { font-style: normal; font-weight: 800; font-size: 38px; text-align: right; font-variant-numeric: tabular-nums; }

/* 17. Chat */
.chat-ventana { width: 1100px; border-radius: 32px; background: #fff; color: #0f1b33; padding: 0 0 34px; box-shadow: 0 40px 110px rgba(0, 0, 0, 0.5); }
.chat-cab { display: flex; align-items: center; gap: 16px; padding: 26px 34px; border-bottom: 1px solid #eef1f6; font-size: 32px; border-radius: 32px 32px 0 0; background: #f6f8fc; }
.chat-cab .icono { color: #0459a8; width: 40px; height: 40px; }
.chat-cab span { margin-left: auto; font-size: 24px; color: #178b59; font-weight: 600; }
.burbuja { max-width: 74%; margin: 22px 34px 0; padding: 20px 28px; border-radius: 26px; font-size: 32px; line-height: 1.3; }
.burbuja.yo { margin-left: auto; background: #0459a8; color: #fff; border-bottom-right-radius: 6px; }
.burbuja.bot { background: #eef1f6; border-bottom-left-radius: 6px; }
.burbuja.confirmada { display: flex; gap: 14px; align-items: center; background: linear-gradient(90deg, #dff3d6, #dbe9fb); }
.burbuja .icono { width: 36px; height: 36px; color: #178b59; }

/* 18. Antes de la visita */
.previsita-contenido { justify-content: space-between; }
.checklist { display: flex; flex-direction: column; gap: 22px; width: 700px; }
.checklist .chip { font-size: 36px; padding: 20px 32px; }
.checklist .icono { width: 42px; height: 42px; }
.sms-hilo { width: 860px; display: flex; flex-direction: column; gap: 20px; padding: 36px; border-radius: 36px; background: #eef1f7; }
.sms-msg { max-width: 88%; padding: 20px 26px; border-radius: 26px; border-bottom-left-radius: 6px; background: #fff; color: #0f1b33; font-size: 30px; line-height: 1.3; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); }
.sms-msg.yo { align-self: flex-end; background: #047ecc; color: #fff; border-bottom-left-radius: 26px; border-bottom-right-radius: 6px; }
.sms-link { color: #0459a8; font-weight: 700; }

/* 19. Recuperar */
#recuperar .nodo { width: 260px; height: 220px; }
.nodo-ok { border-color: rgba(96, 182, 60, 0.8); box-shadow: 0 0 60px rgba(96, 182, 60, 0.3); }
.fila-inferior { position: absolute; left: 140px; right: 140px; bottom: 150px; display: flex; justify-content: center; gap: 28px; }

/* 20. Informe */
.informe-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; justify-content: stretch; }
.col-tit { display: flex; align-items: center; gap: 14px; font-size: 32px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 20px; }
.col-tit .icono { width: 40px; height: 40px; }
.col-fuerte .col-tit { color: #60b63c; } .col-mejora .col-tit, .col-mejora .col-tit .icono { color: #fbbf5a; }
.hallazgo { font-size: 34px; line-height: 1.3; padding: 26px 30px; border-radius: 22px; margin-bottom: 20px; background: var(--c-tarjeta); border-left: 6px solid #60b63c; }
.col-mejora .hallazgo { border-left-color: #fbbf5a; }
.tarea-asignada { display: flex; flex-direction: column; gap: 14px; padding: 26px 30px; border-radius: 22px; background: linear-gradient(160deg, #0d3a86, #0b5a52); border: 2px solid rgba(96, 182, 60, 0.6); }
.tarea-asignada div { display: flex; gap: 20px; align-items: baseline; }
.tarea-asignada span { width: 120px; flex: none; font-size: 24px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-acento); }
.tarea-asignada b { font-size: 32px; }

/* 21. Integraciones */
.conector { position: absolute; width: 420px; display: flex; align-items: center; gap: 20px; padding: 28px 32px; border-radius: 26px; background: var(--c-tarjeta); border: 2px solid var(--c-linea); font-size: 34px; }
.conector .icono { width: 48px; height: 48px; }
.vivo { margin-left: auto; font-size: 20px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #061431; background: var(--c-acento); padding: 8px 14px; border-radius: 999px; }

/* 22. Mapa */
.sedes-contenido { justify-content: space-between; }
.sedes-texto { width: 820px; display: flex; flex-direction: column; gap: 40px; }
.jerarquia { display: grid; grid-template-columns: repeat(2, max-content); gap: 18px; }

.mapa { position: relative; width: 560px; height: 650px; flex: none; margin-right: 260px; }
.mapa-svg { width: 100%; height: 100%; overflow: visible; }
.mapa-ca { fill: rgba(4, 126, 204, 0.12); stroke: #2aa0f0; stroke-width: 3; stroke-linejoin: round; }
.sede-punto { fill: #60b63c; }
.sede-anillo { fill: none; stroke: #60b63c; stroke-width: 3; }
.sede-nombre { position: absolute; font-size: 26px; font-weight: 700; white-space: nowrap; padding: 6px 14px; border-radius: 999px; background: var(--c-tarjeta); border: 2px solid rgba(96, 182, 60, 0.6); }

/* 23. Socios */
.tres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px; align-items: start; align-content: center; }
.socio { display: flex; flex-direction: column; gap: 22px; padding: 56px 48px; min-height: 420px; }
.socio .icono { width: 72px; height: 72px; }
.socio b { font-size: 56px; font-weight: 800; }
.socio p { font-size: 34px; color: var(--c-suave); line-height: 1.3; }

/* Enlaces: se ven como el resto (el motor no avanza al hacer clic en un enlace) */
.slide a { color: inherit; text-decoration: none; }
.slide a:hover { text-decoration: underline; text-underline-offset: 6px; }
.boton-cta:hover, .boton-sec:hover { text-decoration: none; filter: brightness(1.12); }

/* 6. Web: el video del hero de Porterville (del satélite a la puerta) sobre la cascada */
.web-visual .tarjeta-video { position: absolute; right: -20px; top: -80px; width: 360px; z-index: 4; border-radius: 22px; overflow: hidden; border: 3px solid rgba(255, 255, 255, 0.9); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); }
.web-visual .tarjeta-video video { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.lista { gap: 28px; }

/* Lema oficial bajo el wordmark (como en patientop.com) */
.wordmark-caja { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.descriptor { font-size: 34px; font-weight: 500; color: var(--c-suave); padding-left: 6px; }

/* Clímax del acto 2: las dos cifras reales */
.cifras-dos { width: 1640px; display: grid; grid-template-columns: 1fr 1fr; gap: 140px; margin: 30px 0 10px; }
.cifras-dos .cifra-gigante { font-size: 200px; }
.cifras-dos .cifra-texto { font-size: 46px; margin-top: 18px; }
#prueba .cifra-pie { font-size: 36px; }
.cifra-detalle { margin-top: 14px; font-size: 30px; color: var(--c-suave); line-height: 1.3; max-width: 720px; margin-left: auto; margin-right: auto; }